@likec4/styles 1.27.0

package/preset.mjs

@@ -0,0 +1,2746 @@
+import { defineRecipe, defineSemanticTokens, defineTextStyles, defineTokens, defineUtility, definePreset } from '@pandacss/dev';
+
+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: {
+      xs: {
+        value: "calc(0.625rem * var(--mantine-scale))"
+      },
+      sm: {
+        value: "calc(0.75rem * var(--mantine-scale))"
+      },
+      md: {
+        value: "calc(1rem * var(--mantine-scale))"
+      },
+      lg: {
+        value: "calc(1.25rem * var(--mantine-scale))"
+      },
+      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"
+        }
+      }
+    },
+    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)"
+      }
+    },
+    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.750rem"
+        },
+        sm: {
+          description: "LikeC4 style text size: sm",
+          value: "0.875rem"
+        },
+        md: {
+          description: "LikeC4 style text size: md",
+          value: "1.19rem"
+        },
+        lg: {
+          description: "LikeC4 style text size: lg",
+          value: "1.50rem"
+        },
+        xl: {
+          description: "LikeC4 style text size: xl",
+          value: "2.00rem"
+        }
+      }
+    },
+    lineHeights: {
+      xs: {
+        value: "1.4"
+      },
+      sm: {
+        value: "1.45"
+      },
+      md: {
+        value: "1.55"
+      },
+      lg: {
+        value: "1.6"
+      },
+      xl: {
+        value: "1.65"
+      }
+    },
+    colors: {
+      mantine: {
+        colors: {
+          primary: {
+            DEFAULT: {
+              value: "var(--mantine-primary-color-6)"
+            },
+            filled: {
+              value: "var(--mantine-primary-color-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-primary-color-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-primary-color-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-primary-color-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-primary-color-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-primary-color-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-primary-color-outline-hover)"
+            }
+          },
+          "primary[0]": {
+            value: "var(--mantine-primary-color-0)"
+          },
+          "primary[1]": {
+            value: "var(--mantine-primary-color-1)"
+          },
+          "primary[2]": {
+            value: "var(--mantine-primary-color-2)"
+          },
+          "primary[3]": {
+            value: "var(--mantine-primary-color-3)"
+          },
+          "primary[4]": {
+            value: "var(--mantine-primary-color-4)"
+          },
+          "primary[5]": {
+            value: "var(--mantine-primary-color-5)"
+          },
+          "primary[6]": {
+            value: "var(--mantine-primary-color-6)"
+          },
+          "primary[7]": {
+            value: "var(--mantine-primary-color-7)"
+          },
+          "primary[8]": {
+            value: "var(--mantine-primary-color-8)"
+          },
+          "primary[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: {
+              value: "var(--mantine-color-gray-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-gray-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-gray-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-gray-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-gray-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-gray-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-gray-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-gray-outline-hover)"
+            }
+          },
+          "gray[0]": {
+            value: "var(--mantine-color-gray-0)"
+          },
+          "gray[1]": {
+            value: "var(--mantine-color-gray-1)"
+          },
+          "gray[2]": {
+            value: "var(--mantine-color-gray-2)"
+          },
+          "gray[3]": {
+            value: "var(--mantine-color-gray-3)"
+          },
+          "gray[4]": {
+            value: "var(--mantine-color-gray-4)"
+          },
+          "gray[5]": {
+            value: "var(--mantine-color-gray-5)"
+          },
+          "gray[6]": {
+            value: "var(--mantine-color-gray-6)"
+          },
+          "gray[7]": {
+            value: "var(--mantine-color-gray-7)"
+          },
+          "gray[8]": {
+            value: "var(--mantine-color-gray-8)"
+          },
+          "gray[9]": {
+            value: "var(--mantine-color-gray-9)"
+          },
+          dark: {
+            DEFAULT: {
+              value: "var(--mantine-color-dark-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-dark-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-dark-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-dark-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-dark-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-dark-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-dark-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-dark-outline-hover)"
+            }
+          },
+          "dark[0]": {
+            value: "var(--mantine-color-dark-0)"
+          },
+          "dark[1]": {
+            value: "var(--mantine-color-dark-1)"
+          },
+          "dark[2]": {
+            value: "var(--mantine-color-dark-2)"
+          },
+          "dark[3]": {
+            value: "var(--mantine-color-dark-3)"
+          },
+          "dark[4]": {
+            value: "var(--mantine-color-dark-4)"
+          },
+          "dark[5]": {
+            value: "var(--mantine-color-dark-5)"
+          },
+          "dark[6]": {
+            value: "var(--mantine-color-dark-6)"
+          },
+          "dark[7]": {
+            value: "var(--mantine-color-dark-7)"
+          },
+          "dark[8]": {
+            value: "var(--mantine-color-dark-8)"
+          },
+          "dark[9]": {
+            value: "var(--mantine-color-dark-9)"
+          },
+          orange: {
+            DEFAULT: {
+              value: "var(--mantine-color-orange-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-orange-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-orange-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-orange-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-orange-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-orange-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-orange-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-orange-outline-hover)"
+            }
+          },
+          "orange[0]": {
+            value: "var(--mantine-color-orange-0)"
+          },
+          "orange[1]": {
+            value: "var(--mantine-color-orange-1)"
+          },
+          "orange[2]": {
+            value: "var(--mantine-color-orange-2)"
+          },
+          "orange[3]": {
+            value: "var(--mantine-color-orange-3)"
+          },
+          "orange[4]": {
+            value: "var(--mantine-color-orange-4)"
+          },
+          "orange[5]": {
+            value: "var(--mantine-color-orange-5)"
+          },
+          "orange[6]": {
+            value: "var(--mantine-color-orange-6)"
+          },
+          "orange[7]": {
+            value: "var(--mantine-color-orange-7)"
+          },
+          "orange[8]": {
+            value: "var(--mantine-color-orange-8)"
+          },
+          "orange[9]": {
+            value: "var(--mantine-color-orange-9)"
+          },
+          teal: {
+            DEFAULT: {
+              value: "var(--mantine-color-teal-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-teal-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-teal-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-teal-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-teal-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-teal-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-teal-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-teal-outline-hover)"
+            }
+          },
+          "teal[0]": {
+            value: "var(--mantine-color-teal-0)"
+          },
+          "teal[1]": {
+            value: "var(--mantine-color-teal-1)"
+          },
+          "teal[2]": {
+            value: "var(--mantine-color-teal-2)"
+          },
+          "teal[3]": {
+            value: "var(--mantine-color-teal-3)"
+          },
+          "teal[4]": {
+            value: "var(--mantine-color-teal-4)"
+          },
+          "teal[5]": {
+            value: "var(--mantine-color-teal-5)"
+          },
+          "teal[6]": {
+            value: "var(--mantine-color-teal-6)"
+          },
+          "teal[7]": {
+            value: "var(--mantine-color-teal-7)"
+          },
+          "teal[8]": {
+            value: "var(--mantine-color-teal-8)"
+          },
+          "teal[9]": {
+            value: "var(--mantine-color-teal-9)"
+          },
+          red: {
+            DEFAULT: {
+              value: "var(--mantine-color-red-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-red-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-red-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-red-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-red-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-red-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-red-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-red-outline-hover)"
+            }
+          },
+          "red[0]": {
+            value: "var(--mantine-color-red-0)"
+          },
+          "red[1]": {
+            value: "var(--mantine-color-red-1)"
+          },
+          "red[2]": {
+            value: "var(--mantine-color-red-2)"
+          },
+          "red[3]": {
+            value: "var(--mantine-color-red-3)"
+          },
+          "red[4]": {
+            value: "var(--mantine-color-red-4)"
+          },
+          "red[5]": {
+            value: "var(--mantine-color-red-5)"
+          },
+          "red[6]": {
+            value: "var(--mantine-color-red-6)"
+          },
+          "red[7]": {
+            value: "var(--mantine-color-red-7)"
+          },
+          "red[8]": {
+            value: "var(--mantine-color-red-8)"
+          },
+          "red[9]": {
+            value: "var(--mantine-color-red-9)"
+          },
+          green: {
+            DEFAULT: {
+              value: "var(--mantine-color-green-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-green-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-green-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-green-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-green-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-green-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-green-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-green-outline-hover)"
+            }
+          },
+          "green[0]": {
+            value: "var(--mantine-color-green-0)"
+          },
+          "green[1]": {
+            value: "var(--mantine-color-green-1)"
+          },
+          "green[2]": {
+            value: "var(--mantine-color-green-2)"
+          },
+          "green[3]": {
+            value: "var(--mantine-color-green-3)"
+          },
+          "green[4]": {
+            value: "var(--mantine-color-green-4)"
+          },
+          "green[5]": {
+            value: "var(--mantine-color-green-5)"
+          },
+          "green[6]": {
+            value: "var(--mantine-color-green-6)"
+          },
+          "green[7]": {
+            value: "var(--mantine-color-green-7)"
+          },
+          "green[8]": {
+            value: "var(--mantine-color-green-8)"
+          },
+          "green[9]": {
+            value: "var(--mantine-color-green-9)"
+          },
+          yellow: {
+            DEFAULT: {
+              value: "var(--mantine-color-yellow-6)"
+            },
+            filled: {
+              value: "var(--mantine-color-yellow-filled)"
+            },
+            filledHover: {
+              value: "var(--mantine-color-yellow-filled-hover)"
+            },
+            light: {
+              value: "var(--mantine-color-yellow-light)"
+            },
+            lightHover: {
+              value: "var(--mantine-color-yellow-light-hover)"
+            },
+            lightColor: {
+              value: "var(--mantine-color-yellow-light-color)"
+            },
+            outline: {
+              value: "var(--mantine-color-yellow-outline)"
+            },
+            outlineHover: {
+              value: "var(--mantine-color-yellow-outline-hover)"
+            }
+          },
+          "yellow[0]": {
+            value: "var(--mantine-color-yellow-0)"
+          },
+          "yellow[1]": {
+            value: "var(--mantine-color-yellow-1)"
+          },
+          "yellow[2]": {
+            value: "var(--mantine-color-yellow-2)"
+          },
+          "yellow[3]": {
+            value: "var(--mantine-color-yellow-3)"
+          },
+          "yellow[4]": {
+            value: "var(--mantine-color-yellow-4)"
+          },
+          "yellow[5]": {
+            value: "var(--mantine-color-yellow-5)"
+          },
+          "yellow[6]": {
+            value: "var(--mantine-color-yellow-6)"
+          },
+          "yellow[7]": {
+            value: "var(--mantine-color-yellow-7)"
+          },
+          "yellow[8]": {
+            value: "var(--mantine-color-yellow-8)"
+          },
+          "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: {
+        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]}"
+            }
+          }
+        },
+        amber: {
+          element: {
+            fill: {
+              value: "#A35829"
+            },
+            stroke: {
+              value: "#7E451D"
+            },
+            hiContrast: {
+              value: "#FFE0C2"
+            },
+            loContrast: {
+              value: "#f9b27c"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#b45309"
+              },
+              selected: {
+                value: {
+                  _light: "#994708",
+                  _dark: "#cb8753"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#FFE0C2"
+              },
+              bg: {
+                value: "#78350f"
+              }
+            }
+          }
+        },
+        blue: {
+          element: {
+            fill: {
+              value: "#3b82f6"
+            },
+            stroke: {
+              value: "#2563eb"
+            },
+            hiContrast: {
+              value: "#eff6ff"
+            },
+            loContrast: {
+              value: "#bfdbfe"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#3b82f6"
+              },
+              selected: {
+                value: {
+                  _light: "#326fd1",
+                  _dark: "#76a8f9"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#60a5fa"
+              },
+              bg: {
+                value: "#172554"
+              }
+            }
+          }
+        },
+        gray: {
+          element: {
+            fill: {
+              value: "#737373"
+            },
+            stroke: {
+              value: "#525252"
+            },
+            hiContrast: {
+              value: "#fafafa"
+            },
+            loContrast: {
+              value: "#d4d4d4"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#6E6E6E"
+              },
+              selected: {
+                value: {
+                  _light: "#5e5e5e",
+                  _dark: "#9a9a9a"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#C6C6C6"
+              },
+              bg: {
+                value: "#18191b"
+              }
+            }
+          }
+        },
+        slate: {
+          element: {
+            fill: {
+              value: "#64748b"
+            },
+            stroke: {
+              value: "#475569"
+            },
+            hiContrast: {
+              value: "#f8fafc"
+            },
+            loContrast: {
+              value: "#cbd5e1"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#64748b"
+              },
+              selected: {
+                value: {
+                  _light: "#556376",
+                  _dark: "#939eae"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#cbd5e1"
+              },
+              bg: {
+                value: "#0f172a"
+              }
+            }
+          }
+        },
+        green: {
+          element: {
+            fill: {
+              value: "#428a4f"
+            },
+            stroke: {
+              value: "#2d5d39"
+            },
+            hiContrast: {
+              value: "#f8fafc"
+            },
+            loContrast: {
+              value: "#c2f0c2"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#15803d"
+              },
+              selected: {
+                value: {
+                  _light: "#126d34",
+                  _dark: "#5ba677"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#22c55e"
+              },
+              bg: {
+                value: "#052e16"
+              }
+            }
+          }
+        },
+        indigo: {
+          element: {
+            fill: {
+              value: "#6366f1"
+            },
+            stroke: {
+              value: "#4f46e5"
+            },
+            hiContrast: {
+              value: "#eef2ff"
+            },
+            loContrast: {
+              value: "#c7d2fe"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#6366f1"
+              },
+              selected: {
+                value: {
+                  _light: "#5457cd",
+                  _dark: "#9294f5"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#818cf8"
+              },
+              bg: {
+                value: "#1e1b4b"
+              }
+            }
+          }
+        },
+        muted: {
+          element: {
+            fill: {
+              value: "#64748b"
+            },
+            stroke: {
+              value: "#475569"
+            },
+            hiContrast: {
+              value: "#f8fafc"
+            },
+            loContrast: {
+              value: "#cbd5e1"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#64748b"
+              },
+              selected: {
+                value: {
+                  _light: "#556376",
+                  _dark: "#939eae"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#cbd5e1"
+              },
+              bg: {
+                value: "#0f172a"
+              }
+            }
+          }
+        },
+        primary: {
+          element: {
+            fill: {
+              value: "#3b82f6"
+            },
+            stroke: {
+              value: "#2563eb"
+            },
+            hiContrast: {
+              value: "#eff6ff"
+            },
+            loContrast: {
+              value: "#bfdbfe"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#3b82f6"
+              },
+              selected: {
+                value: {
+                  _light: "#326fd1",
+                  _dark: "#76a8f9"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#60a5fa"
+              },
+              bg: {
+                value: "#172554"
+              }
+            }
+          }
+        },
+        red: {
+          element: {
+            fill: {
+              value: "#AC4D39"
+            },
+            stroke: {
+              value: "#853A2D"
+            },
+            hiContrast: {
+              value: "#FBD3CB"
+            },
+            loContrast: {
+              value: "#f5b2a3"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#AC4D39"
+              },
+              selected: {
+                value: {
+                  _light: "#924130",
+                  _dark: "#c58274"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#f5b2a3"
+              },
+              bg: {
+                value: "#b91c1c"
+              }
+            }
+          }
+        },
+        secondary: {
+          element: {
+            fill: {
+              value: "#0284c7"
+            },
+            stroke: {
+              value: "#0369a1"
+            },
+            hiContrast: {
+              value: "#f0f9ff"
+            },
+            loContrast: {
+              value: "#B6ECF7"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#0ea5e9"
+              },
+              selected: {
+                value: {
+                  _light: "#0c8cc6",
+                  _dark: "#56c0f0"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#38bdf8"
+              },
+              bg: {
+                value: "#082f49"
+              }
+            }
+          }
+        },
+        sky: {
+          element: {
+            fill: {
+              value: "#0284c7"
+            },
+            stroke: {
+              value: "#0369a1"
+            },
+            hiContrast: {
+              value: "#f0f9ff"
+            },
+            loContrast: {
+              value: "#B6ECF7"
+            }
+          },
+          relation: {
+            stroke: {
+              DEFAULT: {
+                value: "#0ea5e9"
+              },
+              selected: {
+                value: {
+                  _light: "#0c8cc6",
+                  _dark: "#56c0f0"
+                }
+              }
+            },
+            label: {
+              DEFAULT: {
+                value: "#38bdf8"
+              },
+              bg: {
+                value: "#082f49"
+              }
+            }
+          }
+        },
+        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"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+};
+
+const conditions = {
+  extend: {
+    light: '[data-mantine-color-scheme="light"] &',
+    dark: '[data-mantine-color-scheme="dark"] &',
+    // This is used to hide certain elements when the diagram is in reduced graphics mode (large)
+    reduceGraphics: [
+      ".likec4-root:is([data-likec4-reduced-graphics])",
+      " &"
+    ].join(""),
+    // This is used to improve performance when the diagram is in reduced graphics mode
+    // and the user is panning around the diagram
+    reduceGraphicsOnPan: [
+      ".likec4-root:is(",
+      "[data-likec4-reduced-graphics]",
+      "[data-likec4-diagram-panning]",
+      ") &"
+    ].join(""),
+    noReduceGraphics: [
+      ".likec4-root:not(",
+      "[data-likec4-reduced-graphics]",
+      ") &"
+    ].join(""),
+    whenPanning: ":is(.likec4-root[data-likec4-diagram-panning]) &",
+    smallZoom: ":where([data-likec4-zoom-small]) &",
+    compoundTransparent: ":where([data-compound-transparent]) &",
+    edgeActive: ':where([data-likec4-edge-active="true"]) &',
+    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) &",
+    // likec4Color: ':where([data-likec4-color]) &',
+    ...conditions$1
+  }
+};
+
+const actionBtn = defineRecipe({
+  className: "action-btn",
+  description: "The styles for the Action Buttons",
+  base: {
+    pointerEvents: "all",
+    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})`,
+    "--ai-bg": `var(--actionbtn-bg-idle)`,
+    background: `var(--ai-bg)`,
+    _whenHovered: {
+      opacity: 1,
+      color: "var(--actionbtn-color-hovered)",
+      "--ai-bg": `var(--actionbtn-bg-hovered)`
+    },
+    _hover: {
+      color: "var(--actionbtn-color-hovered-btn)",
+      "--ai-bg": `var(--actionbtn-bg-hovered-btn)`
+    },
+    _whenPanning: {
+      display: "none"
+    },
+    _smallZoom: {
+      display: "none"
+    }
+  },
+  variants: {
+    variant: {
+      transparent: {
+        "--actionbtn-bg-hovered": `var(--actionbtn-bg-idle)`
+      },
+      filled: {
+        boxShadow: {
+          base: "1px 1px 3px 0px transparent",
+          _whenHovered: "1px 1px 3px 0px rgba(0, 0, 0, 0.2)",
+          _reduceGraphics: "none"
+        }
+      }
+    },
+    size: {
+      sm: {
+        ["--ai-size"]: `var(--ai-size-sm)`
+      },
+      md: {
+        ["--ai-size"]: `var(--ai-size-md)`
+      }
+    },
+    radius: {
+      sm: { "--ai-radius": `var(--mantine-radius-sm)` },
+      md: { "--ai-radius": `var(--mantine-radius-md)` }
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    radius: "md",
+    variant: "filled"
+  },
+  staticCss: [{
+    size: ["md"],
+    radius: ["md"],
+    variant: ["*"],
+    conditions: ["whenHovered", "hover", "reducedGraphics"]
+  }]
+});
+
+const semanticTokens = defineSemanticTokens({
+  fontSizes: {
+    likec4: {
+      textSize: {
+        description: "LikeC4 text size",
+        value: "{fontSizes.likec4.md}"
+      }
+    }
+  },
+  colors: {
+    likec4: {
+      mixColor: {
+        description: "Color to be used in color-mix",
+        value: {
+          _dark: "white",
+          _light: "black"
+        }
+      },
+      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}" }
+        },
+        label: {
+          DEFAULT: { value: "{colors.likec4.gray.relation.label}" },
+          bg: { value: "{colors.likec4.gray.relation.label.bg}" }
+        }
+      }
+    }
+  }
+});
+
+const textStyles = defineTextStyles({
+  likec4: {
+    node: {
+      primary: {
+        description: "Primary text, usually a title or name",
+        value: {
+          fontFamily: "var(--likec4-element-font, {fonts.likec4})",
+          fontWeight: "500",
+          fontSize: "[var(--likec4-text-size)]",
+          lineHeight: "1.15",
+          textWrap: "balance",
+          whiteSpace: "preserve-breaks"
+        }
+      },
+      secondary: {
+        description: "Secondary text, usually a description or technology",
+        value: {
+          fontFamily: "var(--likec4-element-font, {fonts.likec4})",
+          fontWeight: "400",
+          fontSize: `[calc(var(--likec4-text-size) * 0.74)]`,
+          lineHeight: "1.2",
+          textWrap: "pretty",
+          whiteSpace: "preserve-breaks"
+        }
+      }
+    }
+  }
+});
+
+const tokens = defineTokens({
+  lineHeights: {
+    "1": {
+      value: "1"
+    }
+  },
+  borders: {
+    none: { value: "none" },
+    transparent: { value: "0px solid transparent" },
+    default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
+  },
+  spacing: {
+    "0": {
+      value: "0px"
+    },
+    "2": {
+      value: "2px"
+    },
+    "4": {
+      value: "4px"
+    },
+    "micro": {
+      value: "4px"
+    },
+    "2xs": {
+      value: "8px"
+    },
+    "8": {
+      value: "8px"
+    }
+  },
+  colors: {
+    // For typesafety, otherwise wrap with []
+    transparent: { value: "transparent" }
+  },
+  fonts: {
+    body: {
+      value: "var(--likec4-app-font, var(--likec4-app-font-default))"
+    },
+    likec4: {
+      DEFAULT: {
+        value: "var(--likec4-app-font, var(--likec4-app-font-default))"
+      },
+      element: {
+        value: "var(--likec4-element-font, {fonts.likec4})"
+      },
+      compound: {
+        value: "var(--likec4-compound-font, {fonts.likec4})"
+      },
+      relation: {
+        value: "var(--likec4-relation-font, {fonts.likec4})"
+      }
+    }
+  },
+  easings: {
+    default: { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+    in: { value: "cubic-bezier(0.4, 0, 1, 1)" },
+    out: { value: "cubic-bezier(0, 0, 0.40, 1)" },
+    inOut: { value: "cubic-bezier(0.50, 0, 0.2, 1)" }
+  },
+  durations: {
+    fastest: { value: "50ms" },
+    faster: { value: "100ms" },
+    fast: { value: "130ms" },
+    normal: { value: "170ms" },
+    slow: { value: "300ms" },
+    slower: { value: "400ms" },
+    slowest: { value: "500ms" }
+  }
+});
+
+const theme = {
+  ...theme$1,
+  extend: {
+    textStyles,
+    tokens,
+    semanticTokens,
+    recipes: {
+      actionBtn
+    },
+    keyframes: {
+      "indicatorStrokeOpacity": {
+        "0%": {
+          strokeOpacity: 0.8
+        },
+        "100%": {
+          strokeOpacity: 0.4
+        }
+      },
+      "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 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`);
+    }
+    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 root = ".likec4-root";
+const rootNotReduced = `${root}:not([data-likec4-reduced-graphics]):not([data-likec4-diagram-panning])`;
+const nodeOrEdge = `:where(.react-flow__node, .react-flow__edge, .likec4-edge-label-container)`;
+const index = definePreset({
+  name: "likec4",
+  // Whether to use css reset
+  // presets: [
+  //   PandaPreset as any,
+  // ],
+  globalVars: {
+    "--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"
+    }
+    // '--xy-edge-stroke': {},
+  },
+  globalCss: {
+    // '@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-default)",
+      "--mantine-font-family-headings": "var(--likec4-app-font-default)"
+    },
+    [`${root}`]: {
+      overflow: "hidden",
+      position: "relative",
+      width: "100%",
+      height: "100%",
+      padding: 0,
+      margin: 0,
+      boxSizing: "border-box",
+      border: "0px solid transparent"
+      // ['--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"'`,
+      // ['--mantine-font-family']: 'var(--likec4-app-font-default)',
+    },
+    [`${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: "800ms",
+      transitionDelay: "200ms"
+    },
+    [`[data-mantine-color-scheme="dark"] ${rootNotReduced} .react-flow__edges > svg`]: {
+      mixBlendMode: "plus-lighter"
+    },
+    ...globalCss
+  },
+  staticCss: {
+    extend: {
+      themes: ["light", "dark"],
+      css: [{
+        properties: {
+          color: [
+            "likec4.palette.hiContrast",
+            "likec4.palette.loContrast"
+          ],
+          likec4Palette: [...themeColors, ...compoundColors],
+          likec4RelationPalette: themeColors
+        }
+      }]
+    }
+  },
+  conditions,
+  utilities: {
+    extend: {
+      transition: {
+        values: ["fast"],
+        className: "transition-fast",
+        transform(value, { token }) {
+          if (value !== "fast") {
+            return {
+              transition: value
+            };
+          }
+          return {
+            transition: `all ${token("durations.fast")}  ${token("easings.inOut")}`
+          };
+        }
+      },
+      likec4Palette,
+      likec4RelationPalette
+    }
+  },
+  theme
+});
+
+export { index as default };