@likec4/styles 1.59.3 → 1.59.4

package/dist/tokens/index.mjs

@@ -1,24 +1,4 @@
 const tokens = {
-  "fontWeights.normal": {
-    "value": "400",
-    "variable": "var(--font-weights-normal)"
-  },
-  "fontWeights.medium": {
-    "value": "500",
-    "variable": "var(--font-weights-medium)"
-  },
-  "fontWeights.semibold": {
-    "value": "600",
-    "variable": "var(--font-weights-semibold)"
-  },
-  "fontWeights.bold": {
-    "value": "600",
-    "variable": "var(--font-weights-bold)"
-  },
-  "fontWeights.extrabold": {
-    "value": "700",
-    "variable": "var(--font-weights-extrabold)"
-  },
   "fontSizes.xxs": {
     "value": "10px",
     "variable": "var(--font-sizes-xxs)"
@@ -28,19 +8,19 @@ const tokens = {
     "variable": "var(--font-sizes-xs)"
   },
   "fontSizes.sm": {
-    "value": "14px",
+    "value": "13px",
     "variable": "var(--font-sizes-sm)"
   },
   "fontSizes.md": {
-    "value": "16px",
+    "value": "14px",
     "variable": "var(--font-sizes-md)"
   },
   "fontSizes.lg": {
-    "value": "18px",
+    "value": "16px",
     "variable": "var(--font-sizes-lg)"
   },
   "fontSizes.xl": {
-    "value": "20px",
+    "value": "18px",
     "variable": "var(--font-sizes-xl)"
   },
   "fontSizes.likec4.xs": {
@@ -63,13 +43,65 @@ const tokens = {
     "value": "27.65px",
     "variable": "var(--font-sizes-likec4-xl)"
   },
+  "fontSizes.h1": {
+    "value": "2.125rem",
+    "variable": "var(--font-sizes-h1)"
+  },
+  "fontSizes.h2": {
+    "value": "1.625rem",
+    "variable": "var(--font-sizes-h2)"
+  },
+  "fontSizes.h3": {
+    "value": "1.375rem",
+    "variable": "var(--font-sizes-h3)"
+  },
+  "fontSizes.h4": {
+    "value": "1.125rem",
+    "variable": "var(--font-sizes-h4)"
+  },
+  "fontSizes.h5": {
+    "value": "1rem",
+    "variable": "var(--font-sizes-h5)"
+  },
+  "fontSizes.h6": {
+    "value": "0.875rem",
+    "variable": "var(--font-sizes-h6)"
+  },
+  "fontWeights.normal": {
+    "value": "400",
+    "variable": "var(--font-weights-normal)"
+  },
+  "fontWeights.medium": {
+    "value": "500",
+    "variable": "var(--font-weights-medium)"
+  },
+  "fontWeights.semibold": {
+    "value": "600",
+    "variable": "var(--font-weights-semibold)"
+  },
+  "fontWeights.bold": {
+    "value": "600",
+    "variable": "var(--font-weights-bold)"
+  },
+  "fontWeights.extrabold": {
+    "value": "700",
+    "variable": "var(--font-weights-extrabold)"
+  },
+  "fontWeights.display": {
+    "value": "700",
+    "variable": "var(--font-weights-display)"
+  },
   "lineHeights.1": {
     "value": "1",
     "variable": "var(--line-heights-1)"
   },
-  "lineHeights.xxs": {
+  "lineHeights.tight": {
+    "value": "1.05",
+    "variable": "var(--line-heights-tight)"
+  },
+  "lineHeights.snug": {
     "value": "1.1",
-    "variable": "var(--line-heights-xxs)"
+    "variable": "var(--line-heights-snug)"
   },
   "lineHeights.xs": {
     "value": "1.2",
@@ -84,13 +116,17 @@ const tokens = {
     "variable": "var(--line-heights-md)"
   },
   "lineHeights.lg": {
-    "value": "1.55",
+    "value": "1.5",
     "variable": "var(--line-heights-lg)"
   },
   "lineHeights.xl": {
-    "value": "1.6",
+    "value": "1.5",
     "variable": "var(--line-heights-xl)"
   },
+  "fonts.display": {
+    "value": "'IBM Plex Sans Variable',ui-sans-serif,system-ui,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
+    "variable": "var(--fonts-display)"
+  },
   "fonts.mono": {
     "value": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
     "variable": "var(--fonts-mono)"
@@ -115,9 +151,9 @@ const tokens = {
     "value": "var(--likec4-relation-font, var(--fonts-likec4))",
     "variable": "var(--fonts-likec4-relation)"
   },
-  "letterSpacings.tighter": {
-    "value": "-0.05em",
-    "variable": "var(--letter-spacings-tighter)"
+  "letterSpacings.display": {
+    "value": "-0.02em",
+    "variable": "var(--letter-spacings-display)"
   },
   "letterSpacings.tight": {
     "value": "-0.025em",
@@ -127,17 +163,13 @@ const tokens = {
     "value": "0em",
     "variable": "var(--letter-spacings-normal)"
   },
-  "letterSpacings.wide": {
-    "value": "0.025em",
-    "variable": "var(--letter-spacings-wide)"
+  "letterSpacings.caps": {
+    "value": "0.12em",
+    "variable": "var(--letter-spacings-caps)"
   },
-  "letterSpacings.wider": {
-    "value": "0.05em",
-    "variable": "var(--letter-spacings-wider)"
-  },
-  "letterSpacings.widest": {
-    "value": "0.1em",
-    "variable": "var(--letter-spacings-widest)"
+  "letterSpacings.caps.sm": {
+    "value": "0.06em",
+    "variable": "var(--letter-spacings-caps-sm)"
   },
   "sizes.0": {
     "value": "0",
@@ -187,125 +219,21 @@ const tokens = {
     "value": "50%",
     "variable": "var(--sizes-50\\%)"
   },
-  "sizes.spacing.0": {
-    "value": "0px",
-    "variable": "var(--sizes-spacing-0)"
-  },
-  "sizes.spacing.1": {
-    "value": "4px",
-    "variable": "var(--sizes-spacing-1)"
-  },
-  "sizes.spacing.2": {
-    "value": "8px",
-    "variable": "var(--sizes-spacing-2)"
-  },
-  "sizes.spacing.3": {
-    "value": "12px",
-    "variable": "var(--sizes-spacing-3)"
-  },
-  "sizes.spacing.4": {
-    "value": "16px",
-    "variable": "var(--sizes-spacing-4)"
-  },
-  "sizes.spacing.5": {
-    "value": "20px",
-    "variable": "var(--sizes-spacing-5)"
-  },
-  "sizes.spacing.6": {
-    "value": "24px",
-    "variable": "var(--sizes-spacing-6)"
-  },
-  "sizes.spacing.7": {
-    "value": "28px",
-    "variable": "var(--sizes-spacing-7)"
+  "sizes.full": {
+    "value": "100%",
+    "variable": "var(--sizes-full)"
   },
-  "sizes.spacing.8": {
-    "value": "32px",
-    "variable": "var(--sizes-spacing-8)"
+  "sizes.control.sm": {
+    "value": "30px",
+    "variable": "var(--sizes-control-sm)"
   },
-  "sizes.spacing.9": {
+  "sizes.control.md": {
     "value": "36px",
-    "variable": "var(--sizes-spacing-9)"
-  },
-  "sizes.spacing.10": {
-    "value": "40px",
-    "variable": "var(--sizes-spacing-10)"
-  },
-  "sizes.spacing.12": {
-    "value": "48px",
-    "variable": "var(--sizes-spacing-12)"
-  },
-  "sizes.spacing.16": {
-    "value": "64px",
-    "variable": "var(--sizes-spacing-16)"
-  },
-  "sizes.spacing.0.5": {
-    "value": "2px",
-    "variable": "var(--sizes-spacing-0\\.5)"
-  },
-  "sizes.spacing.1.5": {
-    "value": "6px",
-    "variable": "var(--sizes-spacing-1\\.5)"
-  },
-  "sizes.spacing.2.5": {
-    "value": "10px",
-    "variable": "var(--sizes-spacing-2\\.5)"
-  },
-  "sizes.spacing.3.5": {
-    "value": "14px",
-    "variable": "var(--sizes-spacing-3\\.5)"
-  },
-  "sizes.spacing.4.5": {
-    "value": "18px",
-    "variable": "var(--sizes-spacing-4\\.5)"
-  },
-  "sizes.spacing.xxs": {
-    "value": "calc(8px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-xxs)"
-  },
-  "sizes.spacing.xs": {
-    "value": "calc(10px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-xs)"
-  },
-  "sizes.spacing.sm": {
-    "value": "calc(12px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-sm)"
-  },
-  "sizes.spacing.md": {
-    "value": "calc(16px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-md)"
-  },
-  "sizes.spacing.lg": {
-    "value": "calc(20px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-lg)"
-  },
-  "sizes.spacing.xl": {
-    "value": "calc(32px * var(--mantine-scale))",
-    "variable": "var(--sizes-spacing-xl)"
-  },
-  "sizes.spacing.likec4.xs": {
-    "value": "8px",
-    "variable": "var(--sizes-spacing-likec4-xs)"
-  },
-  "sizes.spacing.likec4.sm": {
-    "value": "10px",
-    "variable": "var(--sizes-spacing-likec4-sm)"
-  },
-  "sizes.spacing.likec4.md": {
-    "value": "16px",
-    "variable": "var(--sizes-spacing-likec4-md)"
-  },
-  "sizes.spacing.likec4.lg": {
-    "value": "24px",
-    "variable": "var(--sizes-spacing-likec4-lg)"
+    "variable": "var(--sizes-control-md)"
   },
-  "sizes.spacing.likec4.xl": {
-    "value": "32px",
-    "variable": "var(--sizes-spacing-likec4-xl)"
-  },
-  "sizes.full": {
-    "value": "100%",
-    "variable": "var(--sizes-full)"
+  "sizes.control.lg": {
+    "value": "42px",
+    "variable": "var(--sizes-control-lg)"
   },
   "sizes.action-icon": {
     "value": "28px",
@@ -367,10 +295,26 @@ const tokens = {
     "value": "0px solid transparent",
     "variable": "var(--borders-transparent)"
   },
+  "borders.subtle": {
+    "value": "var(--border-widths-default) solid var(--colors-border-subtle)",
+    "variable": "var(--borders-subtle)"
+  },
   "borders.default": {
-    "value": "1px solid var(--colors-default-border)",
+    "value": "var(--border-widths-default) solid var(--colors-border-default)",
     "variable": "var(--borders-default)"
   },
+  "borders.strong": {
+    "value": "var(--border-widths-strong) solid var(--colors-border-strong)",
+    "variable": "var(--borders-strong)"
+  },
+  "borders.outline": {
+    "value": "var(--border-widths-strong) solid var(--colors-border-outline)",
+    "variable": "var(--borders-outline)"
+  },
+  "borders.panel": {
+    "value": "var(--border-widths-default) solid var(--colors-likec4-panel-border)",
+    "variable": "var(--borders-panel)"
+  },
   "borderWidths.0": {
     "value": "0px",
     "variable": "var(--border-widths-0)"
@@ -391,6 +335,18 @@ const tokens = {
     "value": "4px",
     "variable": "var(--border-widths-4)"
   },
+  "borderWidths.default": {
+    "value": "1px",
+    "variable": "var(--border-widths-default)"
+  },
+  "borderWidths.strong": {
+    "value": "2px",
+    "variable": "var(--border-widths-strong)"
+  },
+  "borderWidths.extra": {
+    "value": "3px",
+    "variable": "var(--border-widths-extra)"
+  },
   "spacing.0": {
     "value": "0px",
     "variable": "var(--spacing-0)"
@@ -528,627 +484,171 @@ const tokens = {
     "variable": "var(--radii-lg)"
   },
   "radii.xl": {
-    "value": "32px",
+    "value": "24px",
     "variable": "var(--radii-xl)"
   },
   "radii.pill": {
     "value": "999px",
     "variable": "var(--radii-pill)"
   },
-  "colors.mantine.primary": {
-    "value": "var(--mantine-primary-color-6)",
-    "variable": "var(--colors-mantine-primary)"
-  },
-  "colors.mantine.primary.filled": {
-    "value": "var(--mantine-primary-color-filled)",
-    "variable": "var(--colors-mantine-primary-filled)"
-  },
-  "colors.mantine.primary.filledHover": {
-    "value": "var(--mantine-primary-color-filled-hover)",
-    "variable": "var(--colors-mantine-primary-filled-hover)"
-  },
-  "colors.mantine.primary.light": {
-    "value": "var(--mantine-primary-color-light)",
-    "variable": "var(--colors-mantine-primary-light)"
-  },
-  "colors.mantine.primary.lightHover": {
-    "value": "var(--mantine-primary-color-light-hover)",
-    "variable": "var(--colors-mantine-primary-light-hover)"
-  },
-  "colors.mantine.primary.lightColor": {
-    "value": "var(--mantine-primary-color-light-color)",
-    "variable": "var(--colors-mantine-primary-light-color)"
-  },
-  "colors.mantine.primary.outline": {
-    "value": "var(--mantine-primary-color-outline)",
-    "variable": "var(--colors-mantine-primary-outline)"
-  },
-  "colors.mantine.primary.outlineHover": {
-    "value": "var(--mantine-primary-color-outline-hover)",
-    "variable": "var(--colors-mantine-primary-outline-hover)"
-  },
-  "colors.mantine.primary[0]": {
-    "value": "var(--mantine-primary-color-0)",
-    "variable": "var(--colors-mantine-primary\\[0\\])"
-  },
-  "colors.mantine.primary[1]": {
-    "value": "var(--mantine-primary-color-1)",
-    "variable": "var(--colors-mantine-primary\\[1\\])"
-  },
-  "colors.mantine.primary[2]": {
-    "value": "var(--mantine-primary-color-2)",
-    "variable": "var(--colors-mantine-primary\\[2\\])"
-  },
-  "colors.mantine.primary[3]": {
-    "value": "var(--mantine-primary-color-3)",
-    "variable": "var(--colors-mantine-primary\\[3\\])"
-  },
-  "colors.mantine.primary[4]": {
-    "value": "var(--mantine-primary-color-4)",
-    "variable": "var(--colors-mantine-primary\\[4\\])"
-  },
-  "colors.mantine.primary[5]": {
-    "value": "var(--mantine-primary-color-5)",
-    "variable": "var(--colors-mantine-primary\\[5\\])"
-  },
-  "colors.mantine.primary[6]": {
-    "value": "var(--mantine-primary-color-6)",
-    "variable": "var(--colors-mantine-primary\\[6\\])"
-  },
-  "colors.mantine.primary[7]": {
-    "value": "var(--mantine-primary-color-7)",
-    "variable": "var(--colors-mantine-primary\\[7\\])"
-  },
-  "colors.mantine.primary[8]": {
-    "value": "var(--mantine-primary-color-8)",
-    "variable": "var(--colors-mantine-primary\\[8\\])"
-  },
-  "colors.mantine.primary[9]": {
-    "value": "var(--mantine-primary-color-9)",
-    "variable": "var(--colors-mantine-primary\\[9\\])"
-  },
-  "colors.mantine.white": {
-    "value": "var(--mantine-color-white)",
-    "variable": "var(--colors-mantine-white)"
-  },
-  "colors.mantine.text": {
-    "value": "var(--mantine-color-text)",
-    "variable": "var(--colors-mantine-text)"
-  },
-  "colors.mantine.body": {
-    "value": "var(--mantine-color-body)",
-    "variable": "var(--colors-mantine-body)"
-  },
-  "colors.mantine.dimmed": {
-    "value": "var(--mantine-color-dimmed)",
-    "variable": "var(--colors-mantine-dimmed)"
-  },
-  "colors.mantine.defaultBorder": {
-    "value": "var(--mantine-color-default-border)",
-    "variable": "var(--colors-mantine-default-border)"
-  },
-  "colors.mantine.defaultColor": {
-    "value": "var(--mantine-color-default-color)",
-    "variable": "var(--colors-mantine-default-color)"
-  },
-  "colors.mantine.defaultHover": {
-    "value": "var(--mantine-color-default-hover)",
-    "variable": "var(--colors-mantine-default-hover)"
-  },
-  "colors.mantine.default": {
-    "value": "var(--mantine-color-default)",
-    "variable": "var(--colors-mantine-default)"
-  },
-  "colors.mantine.error": {
-    "value": "var(--mantine-color-error)",
-    "variable": "var(--colors-mantine-error)"
-  },
-  "colors.mantine.placeholder": {
-    "value": "var(--mantine-color-placeholder)",
-    "variable": "var(--colors-mantine-placeholder)"
-  },
-  "colors.mantine.gray": {
-    "value": "var(--mantine-color-gray-6)",
-    "variable": "var(--colors-mantine-gray)"
-  },
-  "colors.mantine.gray.filled": {
-    "value": "var(--mantine-color-gray-filled)",
-    "variable": "var(--colors-mantine-gray-filled)"
-  },
-  "colors.mantine.gray.filledHover": {
-    "value": "var(--mantine-color-gray-filled-hover)",
-    "variable": "var(--colors-mantine-gray-filled-hover)"
-  },
-  "colors.mantine.gray.light": {
-    "value": "var(--mantine-color-gray-light)",
-    "variable": "var(--colors-mantine-gray-light)"
-  },
-  "colors.mantine.gray.lightHover": {
-    "value": "var(--mantine-color-gray-light-hover)",
-    "variable": "var(--colors-mantine-gray-light-hover)"
-  },
-  "colors.mantine.gray.lightColor": {
-    "value": "var(--mantine-color-gray-light-color)",
-    "variable": "var(--colors-mantine-gray-light-color)"
-  },
-  "colors.mantine.gray.outline": {
-    "value": "var(--mantine-color-gray-outline)",
-    "variable": "var(--colors-mantine-gray-outline)"
-  },
-  "colors.mantine.gray.outlineHover": {
-    "value": "var(--mantine-color-gray-outline-hover)",
-    "variable": "var(--colors-mantine-gray-outline-hover)"
-  },
   "colors.mantine.gray[0]": {
-    "value": "var(--mantine-color-gray-0)",
+    "value": "#f8f9fa",
     "variable": "var(--colors-mantine-gray\\[0\\])"
   },
   "colors.mantine.gray[1]": {
-    "value": "var(--mantine-color-gray-1)",
+    "value": "#f1f3f5",
     "variable": "var(--colors-mantine-gray\\[1\\])"
   },
   "colors.mantine.gray[2]": {
-    "value": "var(--mantine-color-gray-2)",
+    "value": "#e9ecef",
     "variable": "var(--colors-mantine-gray\\[2\\])"
   },
   "colors.mantine.gray[3]": {
-    "value": "var(--mantine-color-gray-3)",
+    "value": "#dee2e6",
     "variable": "var(--colors-mantine-gray\\[3\\])"
   },
   "colors.mantine.gray[4]": {
-    "value": "var(--mantine-color-gray-4)",
+    "value": "#ced4da",
     "variable": "var(--colors-mantine-gray\\[4\\])"
   },
   "colors.mantine.gray[5]": {
-    "value": "var(--mantine-color-gray-5)",
+    "value": "#adb5bd",
     "variable": "var(--colors-mantine-gray\\[5\\])"
   },
   "colors.mantine.gray[6]": {
-    "value": "var(--mantine-color-gray-6)",
+    "value": "#868e96",
     "variable": "var(--colors-mantine-gray\\[6\\])"
   },
   "colors.mantine.gray[7]": {
-    "value": "var(--mantine-color-gray-7)",
+    "value": "#495057",
     "variable": "var(--colors-mantine-gray\\[7\\])"
   },
   "colors.mantine.gray[8]": {
-    "value": "var(--mantine-color-gray-8)",
+    "value": "#343a40",
     "variable": "var(--colors-mantine-gray\\[8\\])"
   },
   "colors.mantine.gray[9]": {
-    "value": "var(--mantine-color-gray-9)",
+    "value": "#212529",
     "variable": "var(--colors-mantine-gray\\[9\\])"
   },
-  "colors.mantine.dark": {
-    "value": "var(--mantine-color-dark-6)",
-    "variable": "var(--colors-mantine-dark)"
-  },
-  "colors.mantine.dark.filled": {
-    "value": "var(--mantine-color-dark-filled)",
-    "variable": "var(--colors-mantine-dark-filled)"
-  },
-  "colors.mantine.dark.filledHover": {
-    "value": "var(--mantine-color-dark-filled-hover)",
-    "variable": "var(--colors-mantine-dark-filled-hover)"
-  },
-  "colors.mantine.dark.light": {
-    "value": "var(--mantine-color-dark-light)",
-    "variable": "var(--colors-mantine-dark-light)"
-  },
-  "colors.mantine.dark.lightHover": {
-    "value": "var(--mantine-color-dark-light-hover)",
-    "variable": "var(--colors-mantine-dark-light-hover)"
-  },
-  "colors.mantine.dark.lightColor": {
-    "value": "var(--mantine-color-dark-light-color)",
-    "variable": "var(--colors-mantine-dark-light-color)"
-  },
-  "colors.mantine.dark.outline": {
-    "value": "var(--mantine-color-dark-outline)",
-    "variable": "var(--colors-mantine-dark-outline)"
-  },
-  "colors.mantine.dark.outlineHover": {
-    "value": "var(--mantine-color-dark-outline-hover)",
-    "variable": "var(--colors-mantine-dark-outline-hover)"
-  },
   "colors.mantine.dark[0]": {
-    "value": "var(--mantine-color-dark-0)",
+    "value": "#C9C9C9",
     "variable": "var(--colors-mantine-dark\\[0\\])"
   },
   "colors.mantine.dark[1]": {
-    "value": "var(--mantine-color-dark-1)",
+    "value": "#b8b8b8",
     "variable": "var(--colors-mantine-dark\\[1\\])"
   },
   "colors.mantine.dark[2]": {
-    "value": "var(--mantine-color-dark-2)",
+    "value": "#828282",
     "variable": "var(--colors-mantine-dark\\[2\\])"
   },
   "colors.mantine.dark[3]": {
-    "value": "var(--mantine-color-dark-3)",
+    "value": "#696969",
     "variable": "var(--colors-mantine-dark\\[3\\])"
   },
   "colors.mantine.dark[4]": {
-    "value": "var(--mantine-color-dark-4)",
+    "value": "#424242",
     "variable": "var(--colors-mantine-dark\\[4\\])"
   },
   "colors.mantine.dark[5]": {
-    "value": "var(--mantine-color-dark-5)",
+    "value": "#3b3b3b",
     "variable": "var(--colors-mantine-dark\\[5\\])"
   },
   "colors.mantine.dark[6]": {
-    "value": "var(--mantine-color-dark-6)",
+    "value": "#2e2e2e",
     "variable": "var(--colors-mantine-dark\\[6\\])"
   },
   "colors.mantine.dark[7]": {
-    "value": "var(--mantine-color-dark-7)",
+    "value": "#242424",
     "variable": "var(--colors-mantine-dark\\[7\\])"
   },
   "colors.mantine.dark[8]": {
-    "value": "var(--mantine-color-dark-8)",
+    "value": "#1f1f1f",
     "variable": "var(--colors-mantine-dark\\[8\\])"
   },
   "colors.mantine.dark[9]": {
-    "value": "var(--mantine-color-dark-9)",
+    "value": "#141414",
     "variable": "var(--colors-mantine-dark\\[9\\])"
   },
-  "colors.mantine.orange": {
-    "value": "var(--mantine-color-orange-6)",
-    "variable": "var(--colors-mantine-orange)"
-  },
-  "colors.mantine.orange.filled": {
-    "value": "var(--mantine-color-orange-filled)",
-    "variable": "var(--colors-mantine-orange-filled)"
-  },
-  "colors.mantine.orange.filledHover": {
-    "value": "var(--mantine-color-orange-filled-hover)",
-    "variable": "var(--colors-mantine-orange-filled-hover)"
-  },
-  "colors.mantine.orange.light": {
-    "value": "var(--mantine-color-orange-light)",
-    "variable": "var(--colors-mantine-orange-light)"
-  },
-  "colors.mantine.orange.lightHover": {
-    "value": "var(--mantine-color-orange-light-hover)",
-    "variable": "var(--colors-mantine-orange-light-hover)"
-  },
-  "colors.mantine.orange.lightColor": {
-    "value": "var(--mantine-color-orange-light-color)",
-    "variable": "var(--colors-mantine-orange-light-color)"
-  },
-  "colors.mantine.orange.outline": {
-    "value": "var(--mantine-color-orange-outline)",
-    "variable": "var(--colors-mantine-orange-outline)"
-  },
-  "colors.mantine.orange.outlineHover": {
-    "value": "var(--mantine-color-orange-outline-hover)",
-    "variable": "var(--colors-mantine-orange-outline-hover)"
-  },
   "colors.mantine.orange[0]": {
-    "value": "var(--mantine-color-orange-0)",
+    "value": "#fff4e6",
     "variable": "var(--colors-mantine-orange\\[0\\])"
   },
   "colors.mantine.orange[1]": {
-    "value": "var(--mantine-color-orange-1)",
+    "value": "#ffe8cc",
     "variable": "var(--colors-mantine-orange\\[1\\])"
   },
   "colors.mantine.orange[2]": {
-    "value": "var(--mantine-color-orange-2)",
+    "value": "#ffd8a8",
     "variable": "var(--colors-mantine-orange\\[2\\])"
   },
   "colors.mantine.orange[3]": {
-    "value": "var(--mantine-color-orange-3)",
+    "value": "#ffc078",
     "variable": "var(--colors-mantine-orange\\[3\\])"
   },
   "colors.mantine.orange[4]": {
-    "value": "var(--mantine-color-orange-4)",
+    "value": "#ffa94d",
     "variable": "var(--colors-mantine-orange\\[4\\])"
   },
   "colors.mantine.orange[5]": {
-    "value": "var(--mantine-color-orange-5)",
+    "value": "#ff922b",
     "variable": "var(--colors-mantine-orange\\[5\\])"
   },
   "colors.mantine.orange[6]": {
-    "value": "var(--mantine-color-orange-6)",
+    "value": "#fd7e14",
     "variable": "var(--colors-mantine-orange\\[6\\])"
   },
   "colors.mantine.orange[7]": {
-    "value": "var(--mantine-color-orange-7)",
+    "value": "#f76707",
     "variable": "var(--colors-mantine-orange\\[7\\])"
   },
   "colors.mantine.orange[8]": {
-    "value": "var(--mantine-color-orange-8)",
+    "value": "#e8590c",
     "variable": "var(--colors-mantine-orange\\[8\\])"
   },
   "colors.mantine.orange[9]": {
-    "value": "var(--mantine-color-orange-9)",
+    "value": "#d9480f",
     "variable": "var(--colors-mantine-orange\\[9\\])"
   },
-  "colors.mantine.teal": {
-    "value": "var(--mantine-color-teal-6)",
-    "variable": "var(--colors-mantine-teal)"
-  },
-  "colors.mantine.teal.filled": {
-    "value": "var(--mantine-color-teal-filled)",
-    "variable": "var(--colors-mantine-teal-filled)"
-  },
-  "colors.mantine.teal.filledHover": {
-    "value": "var(--mantine-color-teal-filled-hover)",
-    "variable": "var(--colors-mantine-teal-filled-hover)"
-  },
-  "colors.mantine.teal.light": {
-    "value": "var(--mantine-color-teal-light)",
-    "variable": "var(--colors-mantine-teal-light)"
-  },
-  "colors.mantine.teal.lightHover": {
-    "value": "var(--mantine-color-teal-light-hover)",
-    "variable": "var(--colors-mantine-teal-light-hover)"
-  },
-  "colors.mantine.teal.lightColor": {
-    "value": "var(--mantine-color-teal-light-color)",
-    "variable": "var(--colors-mantine-teal-light-color)"
-  },
-  "colors.mantine.teal.outline": {
-    "value": "var(--mantine-color-teal-outline)",
-    "variable": "var(--colors-mantine-teal-outline)"
-  },
-  "colors.mantine.teal.outlineHover": {
-    "value": "var(--mantine-color-teal-outline-hover)",
-    "variable": "var(--colors-mantine-teal-outline-hover)"
-  },
-  "colors.mantine.teal[0]": {
-    "value": "var(--mantine-color-teal-0)",
-    "variable": "var(--colors-mantine-teal\\[0\\])"
-  },
-  "colors.mantine.teal[1]": {
-    "value": "var(--mantine-color-teal-1)",
-    "variable": "var(--colors-mantine-teal\\[1\\])"
-  },
-  "colors.mantine.teal[2]": {
-    "value": "var(--mantine-color-teal-2)",
-    "variable": "var(--colors-mantine-teal\\[2\\])"
-  },
-  "colors.mantine.teal[3]": {
-    "value": "var(--mantine-color-teal-3)",
-    "variable": "var(--colors-mantine-teal\\[3\\])"
-  },
-  "colors.mantine.teal[4]": {
-    "value": "var(--mantine-color-teal-4)",
-    "variable": "var(--colors-mantine-teal\\[4\\])"
-  },
-  "colors.mantine.teal[5]": {
-    "value": "var(--mantine-color-teal-5)",
-    "variable": "var(--colors-mantine-teal\\[5\\])"
-  },
-  "colors.mantine.teal[6]": {
-    "value": "var(--mantine-color-teal-6)",
-    "variable": "var(--colors-mantine-teal\\[6\\])"
-  },
-  "colors.mantine.teal[7]": {
-    "value": "var(--mantine-color-teal-7)",
-    "variable": "var(--colors-mantine-teal\\[7\\])"
-  },
-  "colors.mantine.teal[8]": {
-    "value": "var(--mantine-color-teal-8)",
-    "variable": "var(--colors-mantine-teal\\[8\\])"
-  },
-  "colors.mantine.teal[9]": {
-    "value": "var(--mantine-color-teal-9)",
-    "variable": "var(--colors-mantine-teal\\[9\\])"
-  },
-  "colors.mantine.red": {
-    "value": "var(--mantine-color-red-6)",
-    "variable": "var(--colors-mantine-red)"
-  },
-  "colors.mantine.red.filled": {
-    "value": "var(--mantine-color-red-filled)",
-    "variable": "var(--colors-mantine-red-filled)"
-  },
-  "colors.mantine.red.filledHover": {
-    "value": "var(--mantine-color-red-filled-hover)",
-    "variable": "var(--colors-mantine-red-filled-hover)"
-  },
-  "colors.mantine.red.light": {
-    "value": "var(--mantine-color-red-light)",
-    "variable": "var(--colors-mantine-red-light)"
-  },
-  "colors.mantine.red.lightHover": {
-    "value": "var(--mantine-color-red-light-hover)",
-    "variable": "var(--colors-mantine-red-light-hover)"
-  },
-  "colors.mantine.red.lightColor": {
-    "value": "var(--mantine-color-red-light-color)",
-    "variable": "var(--colors-mantine-red-light-color)"
-  },
-  "colors.mantine.red.outline": {
-    "value": "var(--mantine-color-red-outline)",
-    "variable": "var(--colors-mantine-red-outline)"
-  },
-  "colors.mantine.red.outlineHover": {
-    "value": "var(--mantine-color-red-outline-hover)",
-    "variable": "var(--colors-mantine-red-outline-hover)"
-  },
-  "colors.mantine.red[0]": {
-    "value": "var(--mantine-color-red-0)",
-    "variable": "var(--colors-mantine-red\\[0\\])"
-  },
-  "colors.mantine.red[1]": {
-    "value": "var(--mantine-color-red-1)",
-    "variable": "var(--colors-mantine-red\\[1\\])"
-  },
-  "colors.mantine.red[2]": {
-    "value": "var(--mantine-color-red-2)",
-    "variable": "var(--colors-mantine-red\\[2\\])"
-  },
-  "colors.mantine.red[3]": {
-    "value": "var(--mantine-color-red-3)",
-    "variable": "var(--colors-mantine-red\\[3\\])"
-  },
-  "colors.mantine.red[4]": {
-    "value": "var(--mantine-color-red-4)",
-    "variable": "var(--colors-mantine-red\\[4\\])"
-  },
-  "colors.mantine.red[5]": {
-    "value": "var(--mantine-color-red-5)",
-    "variable": "var(--colors-mantine-red\\[5\\])"
-  },
-  "colors.mantine.red[6]": {
-    "value": "var(--mantine-color-red-6)",
-    "variable": "var(--colors-mantine-red\\[6\\])"
-  },
-  "colors.mantine.red[7]": {
-    "value": "var(--mantine-color-red-7)",
-    "variable": "var(--colors-mantine-red\\[7\\])"
-  },
-  "colors.mantine.red[8]": {
-    "value": "var(--mantine-color-red-8)",
-    "variable": "var(--colors-mantine-red\\[8\\])"
-  },
-  "colors.mantine.red[9]": {
-    "value": "var(--mantine-color-red-9)",
-    "variable": "var(--colors-mantine-red\\[9\\])"
-  },
-  "colors.mantine.green": {
-    "value": "var(--mantine-color-green-6)",
-    "variable": "var(--colors-mantine-green)"
-  },
-  "colors.mantine.green.filled": {
-    "value": "var(--mantine-color-green-filled)",
-    "variable": "var(--colors-mantine-green-filled)"
-  },
-  "colors.mantine.green.filledHover": {
-    "value": "var(--mantine-color-green-filled-hover)",
-    "variable": "var(--colors-mantine-green-filled-hover)"
-  },
-  "colors.mantine.green.light": {
-    "value": "var(--mantine-color-green-light)",
-    "variable": "var(--colors-mantine-green-light)"
-  },
-  "colors.mantine.green.lightHover": {
-    "value": "var(--mantine-color-green-light-hover)",
-    "variable": "var(--colors-mantine-green-light-hover)"
-  },
-  "colors.mantine.green.lightColor": {
-    "value": "var(--mantine-color-green-light-color)",
-    "variable": "var(--colors-mantine-green-light-color)"
-  },
-  "colors.mantine.green.outline": {
-    "value": "var(--mantine-color-green-outline)",
-    "variable": "var(--colors-mantine-green-outline)"
-  },
-  "colors.mantine.green.outlineHover": {
-    "value": "var(--mantine-color-green-outline-hover)",
-    "variable": "var(--colors-mantine-green-outline-hover)"
-  },
-  "colors.mantine.green[0]": {
-    "value": "var(--mantine-color-green-0)",
-    "variable": "var(--colors-mantine-green\\[0\\])"
-  },
-  "colors.mantine.green[1]": {
-    "value": "var(--mantine-color-green-1)",
-    "variable": "var(--colors-mantine-green\\[1\\])"
-  },
-  "colors.mantine.green[2]": {
-    "value": "var(--mantine-color-green-2)",
-    "variable": "var(--colors-mantine-green\\[2\\])"
-  },
-  "colors.mantine.green[3]": {
-    "value": "var(--mantine-color-green-3)",
-    "variable": "var(--colors-mantine-green\\[3\\])"
-  },
-  "colors.mantine.green[4]": {
-    "value": "var(--mantine-color-green-4)",
-    "variable": "var(--colors-mantine-green\\[4\\])"
-  },
-  "colors.mantine.green[5]": {
-    "value": "var(--mantine-color-green-5)",
-    "variable": "var(--colors-mantine-green\\[5\\])"
-  },
-  "colors.mantine.green[6]": {
-    "value": "var(--mantine-color-green-6)",
-    "variable": "var(--colors-mantine-green\\[6\\])"
-  },
-  "colors.mantine.green[7]": {
-    "value": "var(--mantine-color-green-7)",
-    "variable": "var(--colors-mantine-green\\[7\\])"
-  },
-  "colors.mantine.green[8]": {
-    "value": "var(--mantine-color-green-8)",
-    "variable": "var(--colors-mantine-green\\[8\\])"
-  },
-  "colors.mantine.green[9]": {
-    "value": "var(--mantine-color-green-9)",
-    "variable": "var(--colors-mantine-green\\[9\\])"
-  },
-  "colors.mantine.yellow": {
-    "value": "var(--mantine-color-yellow-6)",
-    "variable": "var(--colors-mantine-yellow)"
-  },
-  "colors.mantine.yellow.filled": {
-    "value": "var(--mantine-color-yellow-filled)",
-    "variable": "var(--colors-mantine-yellow-filled)"
-  },
-  "colors.mantine.yellow.filledHover": {
-    "value": "var(--mantine-color-yellow-filled-hover)",
-    "variable": "var(--colors-mantine-yellow-filled-hover)"
-  },
-  "colors.mantine.yellow.light": {
-    "value": "var(--mantine-color-yellow-light)",
-    "variable": "var(--colors-mantine-yellow-light)"
-  },
-  "colors.mantine.yellow.lightHover": {
-    "value": "var(--mantine-color-yellow-light-hover)",
-    "variable": "var(--colors-mantine-yellow-light-hover)"
-  },
-  "colors.mantine.yellow.lightColor": {
-    "value": "var(--mantine-color-yellow-light-color)",
-    "variable": "var(--colors-mantine-yellow-light-color)"
-  },
-  "colors.mantine.yellow.outline": {
-    "value": "var(--mantine-color-yellow-outline)",
-    "variable": "var(--colors-mantine-yellow-outline)"
-  },
-  "colors.mantine.yellow.outlineHover": {
-    "value": "var(--mantine-color-yellow-outline-hover)",
-    "variable": "var(--colors-mantine-yellow-outline-hover)"
-  },
   "colors.mantine.yellow[0]": {
-    "value": "var(--mantine-color-yellow-0)",
+    "value": "#fff9db",
     "variable": "var(--colors-mantine-yellow\\[0\\])"
   },
   "colors.mantine.yellow[1]": {
-    "value": "var(--mantine-color-yellow-1)",
+    "value": "#fff3bf",
     "variable": "var(--colors-mantine-yellow\\[1\\])"
   },
   "colors.mantine.yellow[2]": {
-    "value": "var(--mantine-color-yellow-2)",
+    "value": "#ffec99",
     "variable": "var(--colors-mantine-yellow\\[2\\])"
   },
   "colors.mantine.yellow[3]": {
-    "value": "var(--mantine-color-yellow-3)",
+    "value": "#ffe066",
     "variable": "var(--colors-mantine-yellow\\[3\\])"
   },
   "colors.mantine.yellow[4]": {
-    "value": "var(--mantine-color-yellow-4)",
+    "value": "#ffd43b",
     "variable": "var(--colors-mantine-yellow\\[4\\])"
   },
   "colors.mantine.yellow[5]": {
-    "value": "var(--mantine-color-yellow-5)",
+    "value": "#fcc419",
     "variable": "var(--colors-mantine-yellow\\[5\\])"
   },
   "colors.mantine.yellow[6]": {
-    "value": "var(--mantine-color-yellow-6)",
+    "value": "#fab005",
     "variable": "var(--colors-mantine-yellow\\[6\\])"
   },
   "colors.mantine.yellow[7]": {
-    "value": "var(--mantine-color-yellow-7)",
+    "value": "#f59f00",
     "variable": "var(--colors-mantine-yellow\\[7\\])"
   },
   "colors.mantine.yellow[8]": {
-    "value": "var(--mantine-color-yellow-8)",
+    "value": "#f08c00",
     "variable": "var(--colors-mantine-yellow\\[8\\])"
   },
   "colors.mantine.yellow[9]": {
-    "value": "var(--mantine-color-yellow-9)",
+    "value": "#e67700",
     "variable": "var(--colors-mantine-yellow\\[9\\])"
   },
   "colors.transparent": {
@@ -1179,6 +679,50 @@ const tokens = {
     "value": "#000",
     "variable": "var(--colors-black)"
   },
+  "colors.likec4.accent.0": {
+    "value": "#eff7fa",
+    "variable": "var(--colors-likec4-accent-0)"
+  },
+  "colors.likec4.accent.1": {
+    "value": "#ddedf4",
+    "variable": "var(--colors-likec4-accent-1)"
+  },
+  "colors.likec4.accent.2": {
+    "value": "#bcdae6",
+    "variable": "var(--colors-likec4-accent-2)"
+  },
+  "colors.likec4.accent.3": {
+    "value": "#97c2d3",
+    "variable": "var(--colors-likec4-accent-3)"
+  },
+  "colors.likec4.accent.4": {
+    "value": "#5e98af",
+    "variable": "var(--colors-likec4-accent-4)"
+  },
+  "colors.likec4.accent.5": {
+    "value": "#4587a1",
+    "variable": "var(--colors-likec4-accent-5)"
+  },
+  "colors.likec4.accent.6": {
+    "value": "#34748d",
+    "variable": "var(--colors-likec4-accent-6)"
+  },
+  "colors.likec4.accent.7": {
+    "value": "#2a637a",
+    "variable": "var(--colors-likec4-accent-7)"
+  },
+  "colors.likec4.accent.8": {
+    "value": "#205165",
+    "variable": "var(--colors-likec4-accent-8)"
+  },
+  "colors.likec4.accent.9": {
+    "value": "#184253",
+    "variable": "var(--colors-likec4-accent-9)"
+  },
+  "colors.likec4.accent": {
+    "value": "#34748d",
+    "variable": "var(--colors-likec4-accent)"
+  },
   "easings.default": {
     "value": "cubic-bezier(0.4, 0, 0.2, 1)",
     "variable": "var(--easings-default)"
@@ -1188,7 +732,7 @@ const tokens = {
     "variable": "var(--easings-in)"
   },
   "easings.out": {
-    "value": "cubic-bezier(0, 0, 0.40, 1)",
+    "value": "cubic-bezier(0.2, 0.8, 0.2, 1)",
     "variable": "var(--easings-out)"
   },
   "easings.inOut": {
@@ -1200,29 +744,21 @@ const tokens = {
     "variable": "var(--durations-0)"
   },
   "durations.fastest": {
-    "value": "50ms",
+    "value": "80ms",
     "variable": "var(--durations-fastest)"
   },
-  "durations.faster": {
-    "value": "100ms",
-    "variable": "var(--durations-faster)"
-  },
   "durations.fast": {
-    "value": "130ms",
+    "value": "120ms",
     "variable": "var(--durations-fast)"
   },
-  "durations.normal": {
+  "durations.medium": {
     "value": "170ms",
-    "variable": "var(--durations-normal)"
+    "variable": "var(--durations-medium)"
   },
   "durations.slow": {
-    "value": "300ms",
+    "value": "240ms",
     "variable": "var(--durations-slow)"
   },
-  "durations.slower": {
-    "value": "400ms",
-    "variable": "var(--durations-slower)"
-  },
   "durations.slowest": {
     "value": "500ms",
     "variable": "var(--durations-slowest)"
@@ -1252,73 +788,153 @@ const tokens = {
     "variable": "var(--shadows-xl)"
   },
   "zIndex.0": {
-    "value": "0",
+    "value": 0,
     "variable": "var(--z-index-0)"
   },
-  "zIndex.1": {
-    "value": "1",
-    "variable": "var(--z-index-1)"
-  },
   "zIndex.-1": {
-    "value": "-1",
+    "value": -1,
     "variable": "var(--z-index--1)"
   },
-  "zIndex.likec4.diagram.edge": {
-    "value": "20",
-    "variable": "var(--z-index-likec4-diagram-edge)"
+  "zIndex.base": {
+    "value": 0,
+    "variable": "var(--z-index-base)"
+  },
+  "zIndex.sticky": {
+    "value": 100,
+    "variable": "var(--z-index-sticky)"
   },
-  "zIndex.likec4.diagram.edge.label": {
-    "value": "25",
-    "variable": "var(--z-index-likec4-diagram-edge-label)"
+  "zIndex.floating": {
+    "value": 150,
+    "variable": "var(--z-index-floating)"
   },
-  "zIndex.likec4.diagram.edge.controlPoint": {
-    "value": "30",
-    "variable": "var(--z-index-likec4-diagram-edge-control-point)"
+  "zIndex.panel": {
+    "value": 200,
+    "variable": "var(--z-index-panel)"
   },
-  "zIndex.likec4.diagram.node.compound": {
-    "value": "10",
-    "variable": "var(--z-index-likec4-diagram-node-compound)"
+  "zIndex.dropdown": {
+    "value": 1000,
+    "variable": "var(--z-index-dropdown)"
   },
-  "zIndex.likec4.diagram.node.element": {
-    "value": "40",
-    "variable": "var(--z-index-likec4-diagram-node-element)"
+  "zIndex.overlay": {
+    "value": 2000,
+    "variable": "var(--z-index-overlay)"
   },
-  "zIndex.likec4.dropdown": {
-    "value": "200",
-    "variable": "var(--z-index-likec4-dropdown)"
+  "zIndex.tooltip": {
+    "value": 3000,
+    "variable": "var(--z-index-tooltip)"
   },
-  "zIndex.likec4.panel": {
-    "value": "100",
-    "variable": "var(--z-index-likec4-panel)"
+  "zIndex.toast": {
+    "value": 4000,
+    "variable": "var(--z-index-toast)"
   },
-  "zIndex.likec4.panel.dropdown": {
-    "value": "200",
-    "variable": "var(--z-index-likec4-panel-dropdown)"
+  "zIndex.diagram.edge": {
+    "value": 20,
+    "variable": "var(--z-index-diagram-edge)"
   },
-  "zIndex.likec4.floatingWindow": {
-    "value": "300",
-    "variable": "var(--z-index-likec4-floating-window)"
+  "zIndex.diagram.edge.label": {
+    "value": 25,
+    "variable": "var(--z-index-diagram-edge-label)"
+  },
+  "zIndex.diagram.edge.controlPoint": {
+    "value": 30,
+    "variable": "var(--z-index-diagram-edge-control-point)"
+  },
+  "zIndex.diagram.node.compound": {
+    "value": 10,
+    "variable": "var(--z-index-diagram-node-compound)"
+  },
+  "zIndex.diagram.node.element": {
+    "value": 40,
+    "variable": "var(--z-index-diagram-node-element)"
   },
   "opacity.0": {
-    "value": "0",
+    "value": 0,
     "variable": "var(--opacity-0)"
   },
   "opacity.1": {
-    "value": "1",
+    "value": 1,
     "variable": "var(--opacity-1)"
   },
+  "opacity.0.05": {
+    "value": 0.05,
+    "variable": "var(--opacity-0\\.05)"
+  },
+  "opacity.0.1": {
+    "value": 0.1,
+    "variable": "var(--opacity-0\\.1)"
+  },
+  "opacity.0.15": {
+    "value": 0.15,
+    "variable": "var(--opacity-0\\.15)"
+  },
+  "opacity.0.2": {
+    "value": 0.2,
+    "variable": "var(--opacity-0\\.2)"
+  },
+  "opacity.0.25": {
+    "value": 0.25,
+    "variable": "var(--opacity-0\\.25)"
+  },
+  "opacity.0.3": {
+    "value": 0.3,
+    "variable": "var(--opacity-0\\.3)"
+  },
+  "opacity.0.35": {
+    "value": 0.35,
+    "variable": "var(--opacity-0\\.35)"
+  },
+  "opacity.0.4": {
+    "value": 0.4,
+    "variable": "var(--opacity-0\\.4)"
+  },
+  "opacity.0.45": {
+    "value": 0.45,
+    "variable": "var(--opacity-0\\.45)"
+  },
   "opacity.0.5": {
-    "value": "0.5",
+    "value": 0.5,
     "variable": "var(--opacity-0\\.5)"
   },
+  "opacity.0.55": {
+    "value": 0.55,
+    "variable": "var(--opacity-0\\.55)"
+  },
+  "opacity.0.6": {
+    "value": 0.6,
+    "variable": "var(--opacity-0\\.6)"
+  },
+  "opacity.0.65": {
+    "value": 0.65,
+    "variable": "var(--opacity-0\\.65)"
+  },
   "opacity.0.7": {
-    "value": "0.75",
+    "value": 0.7,
     "variable": "var(--opacity-0\\.7)"
   },
+  "opacity.0.75": {
+    "value": 0.75,
+    "variable": "var(--opacity-0\\.75)"
+  },
+  "opacity.0.8": {
+    "value": 0.8,
+    "variable": "var(--opacity-0\\.8)"
+  },
+  "opacity.0.85": {
+    "value": 0.85,
+    "variable": "var(--opacity-0\\.85)"
+  },
   "opacity.0.9": {
-    "value": "0.9",
+    "value": 0.9,
     "variable": "var(--opacity-0\\.9)"
   },
+  "opacity.0.95": {
+    "value": 0.95,
+    "variable": "var(--opacity-0\\.95)"
+  },
+  "opacity.disabled": {
+    "value": 0.6,
+    "variable": "var(--opacity-disabled)"
+  },
   "cursor.default": {
     "value": "default",
     "variable": "var(--cursor-default)"
@@ -1331,21 +947,25 @@ const tokens = {
     "value": "none",
     "variable": "var(--cursor-none)"
   },
-  "blurs.1": {
-    "value": "1px",
-    "variable": "var(--blurs-1)"
+  "cursor.inherit": {
+    "value": "inherit",
+    "variable": "var(--cursor-inherit)"
   },
-  "blurs.2": {
-    "value": "2px",
-    "variable": "var(--blurs-2)"
+  "cursor.grab": {
+    "value": "grab",
+    "variable": "var(--cursor-grab)"
   },
-  "blurs.4": {
-    "value": "4px",
-    "variable": "var(--blurs-4)"
+  "cursor.grabbing": {
+    "value": "grabbing",
+    "variable": "var(--cursor-grabbing)"
   },
-  "blurs..5": {
-    "value": "0.5px",
-    "variable": "var(--blurs-\\.5)"
+  "cursor.move": {
+    "value": "move",
+    "variable": "var(--cursor-move)"
+  },
+  "cursor.zoom-out": {
+    "value": "zoom-out",
+    "variable": "var(--cursor-zoom-out)"
   },
   "breakpoints.xs": {
     "value": "36em",
@@ -1367,94 +987,182 @@ const tokens = {
     "value": "88em",
     "variable": "var(--breakpoints-xl)"
   },
+  "colors.surface.canvas": {
+    "value": "var(--colors-surface-canvas)",
+    "variable": "var(--colors-surface-canvas)"
+  },
+  "colors.surface.default": {
+    "value": "var(--colors-surface-default)",
+    "variable": "var(--colors-surface-default)"
+  },
+  "colors.surface.sunken": {
+    "value": "var(--colors-surface-sunken)",
+    "variable": "var(--colors-surface-sunken)"
+  },
+  "colors.surface.sunken.hover": {
+    "value": "var(--colors-surface-sunken-hover)",
+    "variable": "var(--colors-surface-sunken-hover)"
+  },
+  "colors.surface.code": {
+    "value": "var(--colors-surface-code)",
+    "variable": "var(--colors-surface-code)"
+  },
+  "colors.surface.field": {
+    "value": "var(--colors-surface-field)",
+    "variable": "var(--colors-surface-field)"
+  },
+  "colors.surface.field.hover": {
+    "value": "var(--colors-surface-field-hover)",
+    "variable": "var(--colors-surface-field-hover)"
+  },
+  "colors.surface.hover": {
+    "value": "var(--colors-surface-hover)",
+    "variable": "var(--colors-surface-hover)"
+  },
+  "colors.surface.selected": {
+    "value": "var(--colors-surface-selected)",
+    "variable": "var(--colors-surface-selected)"
+  },
   "colors.text": {
-    "value": "var(--mantine-color-text)",
+    "value": "var(--colors-text)",
     "variable": "var(--colors-text)"
   },
+  "colors.text.default": {
+    "value": "var(--colors-text)",
+    "variable": "var(--colors-text-default)"
+  },
   "colors.text.bright": {
-    "value": "var(--mantine-color-bright)",
+    "value": "var(--colors-text-bright)",
     "variable": "var(--colors-text-bright)"
   },
   "colors.text.dimmed": {
-    "value": "var(--mantine-color-dimmed)",
+    "value": "var(--colors-text-dimmed)",
     "variable": "var(--colors-text-dimmed)"
   },
-  "colors.text.placeholder": {
-    "value": "var(--mantine-color-placeholder)",
-    "variable": "var(--colors-text-placeholder)"
+  "colors.text.non-essential": {
+    "value": "var(--colors-text-non-essential)",
+    "variable": "var(--colors-text-non-essential)"
+  },
+  "colors.text.display": {
+    "value": "var(--colors-text-display)",
+    "variable": "var(--colors-text-display)"
+  },
+  "colors.text.heading": {
+    "value": "var(--colors-text-heading)",
+    "variable": "var(--colors-text-heading)"
+  },
+  "colors.text.link": {
+    "value": "var(--colors-text-link)",
+    "variable": "var(--colors-text-link)"
+  },
+  "colors.text.on-primary": {
+    "value": "#ffffff",
+    "variable": "var(--colors-text-on-primary)"
+  },
+  "colors.text.on-inverse": {
+    "value": "var(--colors-text-on-inverse)",
+    "variable": "var(--colors-text-on-inverse)"
+  },
+  "colors.text.warning": {
+    "value": "var(--colors-text-warning)",
+    "variable": "var(--colors-text-warning)"
+  },
+  "colors.border.subtle": {
+    "value": "var(--colors-border-subtle)",
+    "variable": "var(--colors-border-subtle)"
   },
-  "colors.default": {
-    "value": "var(--mantine-color-default)",
-    "variable": "var(--colors-default)"
+  "colors.border.default": {
+    "value": "var(--colors-border-default)",
+    "variable": "var(--colors-border-default)"
   },
-  "colors.default.color": {
-    "value": "var(--mantine-color-default-color)",
-    "variable": "var(--colors-default-color)"
+  "colors.border.strong": {
+    "value": "var(--colors-border-strong)",
+    "variable": "var(--colors-border-strong)"
   },
-  "colors.default.border": {
-    "value": "var(--mantine-color-default-border)",
-    "variable": "var(--colors-default-border)"
+  "colors.border.focus": {
+    "value": "var(--colors-likec4-accent-6)",
+    "variable": "var(--colors-border-focus)"
   },
-  "colors.default.hover": {
-    "value": "var(--mantine-color-default-hover)",
-    "variable": "var(--colors-default-hover)"
+  "colors.border.outline": {
+    "value": "var(--colors-likec4-accent-7)",
+    "variable": "var(--colors-border-outline)"
+  },
+  "colors.disabled.body": {
+    "value": "var(--colors-disabled-body)",
+    "variable": "var(--colors-disabled-body)"
   },
   "colors.disabled.text": {
-    "value": "var(--mantine-color-disabled-color)",
+    "value": "var(--colors-disabled-text)",
     "variable": "var(--colors-disabled-text)"
   },
   "colors.disabled.border": {
-    "value": "var(--mantine-color-disabled-border)",
+    "value": "var(--colors-disabled-border)",
     "variable": "var(--colors-disabled-border)"
   },
-  "colors.disabled.body": {
-    "value": "var(--mantine-color-disabled)",
-    "variable": "var(--colors-disabled-body)"
+  "colors.highlight.body": {
+    "value": "var(--colors-highlight-body)",
+    "variable": "var(--colors-highlight-body)"
   },
-  "colors.surface.canvas": {
-    "value": "var(--colors-surface-canvas)",
-    "variable": "var(--colors-surface-canvas)"
+  "colors.highlight.text": {
+    "value": "#000000",
+    "variable": "var(--colors-highlight-text)"
   },
-  "colors.surface.default": {
-    "value": "var(--colors-surface-default)",
-    "variable": "var(--colors-surface-default)"
+  "colors.primary.body": {
+    "value": "var(--colors-likec4-accent-6)",
+    "variable": "var(--colors-primary-body)"
   },
-  "colors.surface.default.border": {
-    "value": "oklch(from var(--mantine-color-default-border) l c h / 50%)",
-    "variable": "var(--colors-surface-default-border)"
+  "colors.primary.body.hover": {
+    "value": "var(--colors-likec4-accent-5)",
+    "variable": "var(--colors-primary-body-hover)"
   },
-  "colors.surface.sunken": {
-    "value": "var(--colors-surface-sunken)",
-    "variable": "var(--colors-surface-sunken)"
+  "colors.primary.body.focused": {
+    "value": "var(--colors-likec4-accent-7)",
+    "variable": "var(--colors-primary-body-focused)"
   },
-  "colors.surface.sunken.border": {
-    "value": "oklch(from var(--mantine-color-default-border) l c h / 70%)",
-    "variable": "var(--colors-surface-sunken-border)"
+  "colors.primary.body.light": {
+    "value": "var(--colors-primary-body-light)",
+    "variable": "var(--colors-primary-body-light)"
   },
-  "colors.surface.sunken.hover": {
-    "value": "var(--colors-surface-sunken-hover)",
-    "variable": "var(--colors-surface-sunken-hover)"
+  "colors.primary.body.lightHover": {
+    "value": "var(--colors-primary-body-light-hover)",
+    "variable": "var(--colors-primary-body-light-hover)"
   },
-  "colors.body": {
-    "value": "var(--colors-surface-canvas)",
-    "variable": "var(--colors-body)"
+  "colors.primary.text": {
+    "value": "#ffffff",
+    "variable": "var(--colors-primary-text)"
+  },
+  "colors.primary.text.light": {
+    "value": "var(--colors-primary-text-light)",
+    "variable": "var(--colors-primary-text-light)"
+  },
+  "colors.primary.border": {
+    "value": "var(--colors-likec4-accent-6)",
+    "variable": "var(--colors-primary-border)"
+  },
+  "colors.primary.border.hover": {
+    "value": "var(--colors-likec4-accent-5)",
+    "variable": "var(--colors-primary-border-hover)"
+  },
+  "colors.primary.border.focused": {
+    "value": "var(--colors-likec4-accent-7)",
+    "variable": "var(--colors-primary-border-focused)"
+  },
+  "colors.warning.body": {
+    "value": "var(--colors-warning-body)",
+    "variable": "var(--colors-warning-body)"
+  },
+  "colors.warning.text": {
+    "value": "#000000",
+    "variable": "var(--colors-warning-text)"
   },
   "colors.diagram.background": {
-    "value": "var(--mantine-color-body)",
+    "value": "var(--colors-surface-canvas)",
     "variable": "var(--colors-diagram-background)"
   },
   "colors.diagram.background.pattern": {
     "value": "var(--colors-diagram-background-pattern)",
     "variable": "var(--colors-diagram-background-pattern)"
   },
-  "colors.likec4.background": {
-    "value": "var(--mantine-color-body)",
-    "variable": "var(--colors-likec4-background)"
-  },
-  "colors.likec4.background.pattern": {
-    "value": "var(--colors-likec4-background-pattern)",
-    "variable": "var(--colors-likec4-background-pattern)"
-  },
   "colors.likec4.mixColor": {
     "value": "var(--colors-likec4-mix-color)",
     "variable": "var(--colors-likec4-mix-color)"
@@ -1484,7 +1192,7 @@ const tokens = {
     "variable": "var(--colors-likec4-panel-border)"
   },
   "colors.likec4.panel.text": {
-    "value": "oklch(from var(--mantine-color-text) l c h / 85%)",
+    "value": "color-mix(in srgb, var(--colors-text-default) 85%, transparent)",
     "variable": "var(--colors-likec4-panel-text)"
   },
   "colors.likec4.panel.text.dimmed": {
@@ -1492,7 +1200,7 @@ const tokens = {
     "variable": "var(--colors-likec4-panel-text-dimmed)"
   },
   "colors.likec4.panel.action": {
-    "value": "oklch(from var(--mantine-color-text) l c h / 90%)",
+    "value": "color-mix(in srgb, var(--colors-text-default) 90%, transparent)",
     "variable": "var(--colors-likec4-panel-action)"
   },
   "colors.likec4.panel.action.disabled": {
@@ -1500,7 +1208,7 @@ const tokens = {
     "variable": "var(--colors-likec4-panel-action-disabled)"
   },
   "colors.likec4.panel.action.hover": {
-    "value": "var(--mantine-color-bright)",
+    "value": "var(--colors-text-bright)",
     "variable": "var(--colors-likec4-panel-action-hover)"
   },
   "colors.likec4.panel.action.bg": {
@@ -1512,7 +1220,7 @@ const tokens = {
     "variable": "var(--colors-likec4-panel-action-bg-hover)"
   },
   "colors.likec4.panel.action.warning": {
-    "value": "var(--mantine-color-orange-6)",
+    "value": "#fd7e14",
     "variable": "var(--colors-likec4-panel-action-warning)"
   },
   "colors.likec4.panel.action.warning.hover": {
@@ -1544,19 +1252,31 @@ const tokens = {
     "variable": "var(--colors-likec4-overlay-body)"
   },
   "colors.likec4.overlay.border": {
-    "value": "oklch(from var(--mantine-color-default-border) l c h / 50%)",
+    "value": "color-mix(in srgb, var(--colors-border-default) 50%, transparent)",
     "variable": "var(--colors-likec4-overlay-border)"
   },
+  "colors.likec4.walkthrough.parallelFrame": {
+    "value": "var(--colors-likec4-walkthrough-parallel-frame)",
+    "variable": "var(--colors-likec4-walkthrough-parallel-frame)"
+  },
+  "colors.likec4.compare.manual": {
+    "value": "var(--colors-likec4-compare-manual)",
+    "variable": "var(--colors-likec4-compare-manual)"
+  },
+  "colors.likec4.compare.outline": {
+    "value": "var(--colors-likec4-compare-outline)",
+    "variable": "var(--colors-likec4-compare-outline)"
+  },
   "colors.likec4.compare.latest": {
-    "value": "var(--mantine-color-green-6)",
+    "value": "#40c057",
     "variable": "var(--colors-likec4-compare-latest)"
   },
   "colors.subflow.opt": {
-    "value": "oklch(from var(--mantine-color-indigo-8) l c h / 8%)",
+    "value": "oklch(from #3b5bdb l c h / 8%)",
     "variable": "var(--colors-subflow-opt)"
   },
   "colors.subflow.opt.hovered": {
-    "value": "oklch(from var(--mantine-color-indigo-8) l c h / 13%)",
+    "value": "oklch(from #3b5bdb l c h / 13%)",
     "variable": "var(--colors-subflow-opt-hovered)"
   },
   "colors.subflow.opt.text": {
@@ -1564,11 +1284,11 @@ const tokens = {
     "variable": "var(--colors-subflow-opt-text)"
   },
   "colors.subflow.opt.border": {
-    "value": "oklch(from var(--mantine-color-indigo-7) l c h / 65%)",
+    "value": "oklch(from #4263eb l c h / 65%)",
     "variable": "var(--colors-subflow-opt-border)"
   },
   "colors.subflow.opt.label": {
-    "value": "oklch(from var(--mantine-color-indigo-7) l c h / 20%)",
+    "value": "oklch(from #4263eb l c h / 20%)",
     "variable": "var(--colors-subflow-opt-label)"
   },
   "colors.subflow.loop": {
@@ -1588,11 +1308,11 @@ const tokens = {
     "variable": "var(--colors-subflow-loop-border)"
   },
   "colors.subflow.loop.header": {
-    "value": "oklch(from var(--mantine-color-teal-8) l c h / 40%)",
+    "value": "oklch(from #099268 l c h / 40%)",
     "variable": "var(--colors-subflow-loop-header)"
   },
   "colors.subflow.loop.label": {
-    "value": "oklch(from var(--mantine-color-teal-8) l c h / 20%)",
+    "value": "oklch(from #099268 l c h / 20%)",
     "variable": "var(--colors-subflow-loop-label)"
   },
   "colors.subflow.try": {
@@ -1616,7 +1336,7 @@ const tokens = {
     "variable": "var(--colors-subflow-try-header)"
   },
   "colors.subflow.try.label": {
-    "value": "oklch(from var(--mantine-color-yellow-8) l c h / 20%)",
+    "value": "oklch(from #f08c00 l c h / 20%)",
     "variable": "var(--colors-subflow-try-label)"
   },
   "colors.subflow.break": {
@@ -1632,7 +1352,7 @@ const tokens = {
     "variable": "var(--colors-subflow-break-text)"
   },
   "colors.subflow.break.border": {
-    "value": "oklch(from var(--mantine-color-red-7) l c h / 65%)",
+    "value": "oklch(from #f03e3e l c h / 65%)",
     "variable": "var(--colors-subflow-break-border)"
   },
   "colors.subflow.break.header": {
@@ -1640,15 +1360,15 @@ const tokens = {
     "variable": "var(--colors-subflow-break-header)"
   },
   "colors.subflow.break.label": {
-    "value": "oklch(from var(--mantine-color-red-8) l c h / 25%)",
+    "value": "oklch(from #e03131 l c h / 25%)",
     "variable": "var(--colors-subflow-break-label)"
   },
   "colors.subflow.par": {
-    "value": "oklch(from var(--mantine-color-grape-8) l c h / 8%)",
+    "value": "oklch(from #9c36b5 l c h / 8%)",
     "variable": "var(--colors-subflow-par)"
   },
   "colors.subflow.par.hovered": {
-    "value": "oklch(from var(--mantine-color-grape-8) l c h / 13%)",
+    "value": "oklch(from #9c36b5 l c h / 13%)",
     "variable": "var(--colors-subflow-par-hovered)"
   },
   "colors.subflow.par.text": {
@@ -1656,15 +1376,15 @@ const tokens = {
     "variable": "var(--colors-subflow-par-text)"
   },
   "colors.subflow.par.border": {
-    "value": "oklch(from var(--mantine-color-grape-7) l c h / 65%)",
+    "value": "oklch(from #ae3ec9 l c h / 65%)",
     "variable": "var(--colors-subflow-par-border)"
   },
   "colors.subflow.par.header": {
-    "value": "oklch(from var(--mantine-color-grape-8) l c h / 40%)",
+    "value": "oklch(from #9c36b5 l c h / 40%)",
     "variable": "var(--colors-subflow-par-header)"
   },
   "colors.subflow.par.label": {
-    "value": "oklch(from var(--mantine-color-grape-7) l c h / 20%)",
+    "value": "oklch(from #ae3ec9 l c h / 20%)",
     "variable": "var(--colors-subflow-par-label)"
   },
   "colors.subflow.alt": {
@@ -1676,7 +1396,7 @@ const tokens = {
     "variable": "var(--colors-subflow-alt-hovered)"
   },
   "colors.subflow.alt.header": {
-    "value": "oklch(from var(--mantine-color-violet-8) l c h / 50%)",
+    "value": "oklch(from #6741d9 l c h / 50%)",
     "variable": "var(--colors-subflow-alt-header)"
   },
   "colors.subflow.alt.text": {
@@ -1684,11 +1404,11 @@ const tokens = {
     "variable": "var(--colors-subflow-alt-text)"
   },
   "colors.subflow.alt.border": {
-    "value": "oklch(from var(--mantine-color-violet-7) l c h / 65%)",
+    "value": "oklch(from #7048e8 l c h / 65%)",
     "variable": "var(--colors-subflow-alt-border)"
   },
   "colors.subflow.alt.label": {
-    "value": "oklch(from var(--mantine-color-violet-7) l c h / 30%)",
+    "value": "oklch(from #7048e8 l c h / 30%)",
     "variable": "var(--colors-subflow-alt-label)"
   },
   "colors.amber.1": {
@@ -2527,18 +2247,6 @@ const tokens = {
     "value": "calc(var(--spacing-likec4-xl) * -1)",
     "variable": "var(--spacing-likec4-xl)"
   },
-  "colors.likec4.walkthrough.parallelFrame": {
-    "value": "var(--colors-likec4-walkthrough-parallel-frame)",
-    "variable": "var(--colors-likec4-walkthrough-parallel-frame)"
-  },
-  "colors.likec4.compare.manual": {
-    "value": "var(--colors-likec4-compare-manual)",
-    "variable": "var(--colors-likec4-compare-manual)"
-  },
-  "colors.likec4.compare.manual.outline": {
-    "value": "var(--colors-likec4-compare-manual-outline)",
-    "variable": "var(--colors-likec4-compare-manual-outline)"
-  },
   "colors.colorPalette.opt": {
     "value": "var(--colors-color-palette-opt)",
     "variable": "var(--colors-color-palette-opt)"