@likec4/styles 1.40.0 → 1.42.0

package/dist/preset.mjs

@@ -4774,9 +4774,9 @@ const paletteGlobalVars = {
   "--likec4-palette-stroke": "#2563eb",
   "--likec4-palette-hiContrast": "#eff6ff",
   "--likec4-palette-loContrast": "#bfdbfe",
-  "--likec4-palette-relation-stroke": "#3b82f6",
-  "--likec4-palette-relation-label": "#60a5fa",
-  "--likec4-palette-relation-label-bg": "#172554"
+  "--likec4-palette-relation-stroke": "#6E6E6E",
+  "--likec4-palette-relation-label": "#C6C6C6",
+  "--likec4-palette-relation-label-bg": "#18191b"
 };
 const conditions = {
   extend: {
@@ -5110,7 +5110,7 @@ const borderWidth = {
   var: "--_border-width",
   ref: "var(--_border-width)"
 };
-const borderRadius = {
+const borderRadius$1 = {
   var: "--_border-radius",
   ref: "var(--_border-radius)"
 };
@@ -5130,7 +5130,7 @@ const compoundColor = {
   var: "--_compound-color",
   ref: "var(--_compound-color)"
 };
-const parts$1 = defineParts({
+const parts$3 = defineParts({
   root: { selector: "&" },
   titleContainer: { selector: "& .likec4-compound-title-container" },
   title: { selector: "& .likec4-compound-title" },
@@ -5142,7 +5142,7 @@ const parts$1 = defineParts({
 const iconSize = "20px";
 const compoundNode = defineRecipe({
   className: "likec4-compound-node",
-  base: parts$1({
+  base: parts$3({
     root: {
       position: "relative",
       width: "100%",
@@ -5153,14 +5153,14 @@ const compoundNode = defineRecipe({
       backgroundClip: "padding-box",
       borderStyle: "solid",
       borderWidth: borderWidth.ref,
-      borderRadius: borderRadius.ref,
+      borderRadius: borderRadius$1.ref,
       boxSizing: "border-box",
       ["--likec4-palette-outline"]: {
         _light: "color-mix(in srgb, var(--likec4-palette-stroke) 80%, var(--likec4-palette-hiContrast))",
         _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))"
       },
       [borderWidth.var]: "3px",
-      [borderRadius.var]: "6px",
+      [borderRadius$1.var]: "6px",
       [compoundTransparency.var]: "100%",
       [borderTransparency.var]: "100%",
       [indicatorSpacing.var]: `calc(${borderWidth.ref} + 2px)`,
@@ -5175,7 +5175,7 @@ const compoundNode = defineRecipe({
         height: `[calc(100% + 2 * ${indicatorSpacing.ref})]`,
         borderStyle: "solid",
         borderWidth: `calc(${borderWidth.ref} + 1px)`,
-        borderRadius: `calc(${borderRadius.ref} + 4px)`,
+        borderRadius: `calc(${borderRadius$1.ref} + 4px)`,
         borderColor: "var(--likec4-palette-outline)",
         pointerEvents: "none",
         display: {
@@ -5283,7 +5283,7 @@ const compoundNode = defineRecipe({
   }),
   variants: {
     isTransparent: {
-      false: parts$1({
+      false: parts$3({
         root: {
           boxShadow: {
             _noReduceGraphics: "0 4px 10px 0.5px rgb(0 0 0/10%) , 0 2px 2px -1px rgb(0 0 0/40%)",
@@ -5294,7 +5294,7 @@ const compoundNode = defineRecipe({
           borderColor: "var(--likec4-palette-stroke)"
         }
       }),
-      true: parts$1({
+      true: parts$3({
         root: {
           backgroundColor: `[color-mix(in srgb, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)]`,
           borderColor: `[color-mix(in srgb, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)]`
@@ -5303,7 +5303,7 @@ const compoundNode = defineRecipe({
     },
     // When the compound node is too transparent, the text color should be inverted
     inverseColor: {
-      true: parts$1({
+      true: parts$3({
         root: {
           [compoundColor.var]: {
             base: "var(--likec4-palette-stroke)",
@@ -5326,22 +5326,22 @@ const compoundNode = defineRecipe({
       false: {}
     },
     borderStyle: {
-      solid: parts$1({
+      solid: parts$3({
         root: {
           borderStyle: "solid"
         }
       }),
-      dashed: parts$1({
+      dashed: parts$3({
         root: {
           borderStyle: "dashed"
         }
       }),
-      dotted: parts$1({
+      dotted: parts$3({
         root: {
           borderStyle: "dotted"
         }
       }),
-      none: parts$1({
+      none: parts$3({
         root: {
           // We still need to have a border for consistent internal coordinates
           // So we use a transparent border and extend background
@@ -5400,45 +5400,185 @@ const edgeActionBtn = defineRecipe({
     conditions: ["*"]
   }]
 });
-const varIconSize = `var(${iconSize$1})`;
-const elementNodeIcon = defineRecipe({
-  className: "likec4-element-node-icon",
-  description: "Element Icon displayed in diagram nodes",
-  base: {
-    flex: `0 0 ${varIconSize}`,
-    height: varIconSize,
-    width: varIconSize,
-    display: "flex",
-    alignSelf: "flex-start",
-    alignItems: "center",
-    justifyContent: "center",
-    mixBlendMode: {
-      base: "hard-light",
-      _reduceGraphicsOnPan: "normal"
-    },
-    "& svg, & img": {
-      width: "100%",
-      height: "auto",
+const parts$2 = defineParts({
+  root: { selector: "&" },
+  icon: { selector: "& [data-likec4-icon]" },
+  content: { selector: "& .likec4-element-node-content" },
+  title: { selector: "& [data-likec4-node-title]" },
+  description: { selector: "& [data-likec4-node-description]" },
+  technology: { selector: "& [data-likec4-node-technology]" }
+});
+const varIconSize = `var(${iconSize$1}, 48px)`;
+const textAlign = "__text-align";
+const varTextAlign = `var(${textAlign})`;
+const elementNodeData = defineRecipe({
+  className: "likec4-element-node-data",
+  jsx: ["ElementNodeData", "ElementNodeData.Root", "ElementTitle"],
+  base: parts$2({
+    root: {
+      position: "relative",
+      flex: "1",
+      height: "fit-content",
+      width: "fit-content",
       maxHeight: "100%",
+      maxWidth: "100%",
+      margin: "[0 auto]",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexDirection: "row",
+      paddingTop: "var(--likec4-spacing)",
+      paddingBottom: "var(--likec4-spacing)",
+      paddingLeft: "calc(var(--likec4-spacing) + 8px)",
+      paddingRight: "calc(var(--likec4-spacing) + 8px)",
+      overflow: "hidden",
       pointerEvents: "none",
-      filter: {
-        base: [
-          "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
-          "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
-          "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
-        ],
-        _reduceGraphicsOnPan: "none"
+      gap: "3",
+      _shapeQueue: {
+        paddingLeft: "46px",
+        paddingRight: "16px"
+      },
+      _shapeMobile: {
+        paddingLeft: "46px",
+        paddingRight: "16px"
+      },
+      _shapeCylinder: {
+        paddingTop: "30px"
+      },
+      _shapeStorage: {
+        paddingTop: "30px"
+      },
+      _shapeBrowser: {
+        paddingTop: "32px",
+        paddingBottom: "28px"
+      },
+      _shapeSizeXs: {
+        [iconSize$1]: "24px"
+      },
+      _shapeSizeSm: {
+        [iconSize$1]: "36px"
+      },
+      _shapeSizeMd: {
+        [iconSize$1]: "60px"
+      },
+      _shapeSizeLg: {
+        [iconSize$1]: "82px",
+        gap: "4"
+      },
+      _shapeSizeXl: {
+        [iconSize$1]: "90px",
+        gap: "4"
+      },
+      [textAlign]: "center",
+      // When node has icon
+      "&:has([data-likec4-icon])": {
+        [textAlign]: "left",
+        gap: "4",
+        "& .likec4-element-node-content": {
+          minWidth: `calc(50% + var(${iconSize$1}))`,
+          alignItems: "flex-start"
+        }
       }
     },
-    "& img": {
-      objectFit: "contain"
+    icon: {
+      flex: `0 0 ${varIconSize}`,
+      height: varIconSize,
+      width: varIconSize,
+      display: "flex",
+      alignSelf: "flex-start",
+      alignItems: "center",
+      justifyContent: "center",
+      mixBlendMode: {
+        base: "hard-light",
+        _reduceGraphicsOnPan: "normal"
+      },
+      "& svg, & img": {
+        width: "100%",
+        height: "auto",
+        maxHeight: "100%",
+        pointerEvents: "none",
+        filter: {
+          base: [
+            "drop-shadow(0 0 3px rgb(0 0 0 / 12%))",
+            "drop-shadow(0 1px 8px rgb(0 0 0 / 8%))",
+            "drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))"
+          ],
+          _reduceGraphicsOnPan: "none"
+        }
+      },
+      "& img": {
+        objectFit: "contain"
+      }
+    },
+    content: {
+      height: "fit-content",
+      width: "fit-content",
+      maxHeight: "100%",
+      maxWidth: "100%",
+      flex: "0 1 auto",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "center",
+      flexWrap: "nowrap",
+      overflow: "hidden",
+      gap: "2",
+      "&:has([data-likec4-node-description]):has([data-likec4-node-technology])": {
+        gap: "1.5"
+      }
+    },
+    title: {
+      textStyle: "likec4.node.primary",
+      flex: "0 0 auto",
+      textAlign: varTextAlign,
+      color: "var(--likec4-palette-hiContrast)"
+    },
+    description: {
+      flexGrow: "0",
+      flexShrink: "1",
+      textStyle: "likec4.node.secondary",
+      color: "var(--likec4-palette-loContrast)",
+      textAlign: varTextAlign,
+      textOverflow: "ellipsis",
+      overflow: "hidden",
+      _shapeSizeXs: {
+        display: "none"
+      },
+      _smallZoom: {
+        display: "none"
+      },
+      "& a": {
+        pointerEvents: "all"
+      }
+    },
+    technology: {
+      flex: "0 0 auto",
+      textStyle: "likec4.node.secondary",
+      color: "var(--likec4-palette-loContrast)",
+      fontSize: `calc(var(--likec4-text-size) * 0.635)`,
+      lineHeight: 1.125,
+      textAlign: varTextAlign,
+      textWrap: "balance",
+      opacity: 0.92,
+      _whenHovered: {
+        opacity: 1
+      },
+      _shapeSizeXs: {
+        display: "none"
+      },
+      _shapeSizeSm: {
+        display: "none"
+      },
+      _smallZoom: {
+        display: "none"
+      }
     }
-  },
+  }),
   staticCss: [{
     conditions: ["*"]
   }]
 });
-const parts = defineParts({
+const parts$1 = defineParts({
   root: { selector: "&" },
   outline: { selector: "& .likec4-shape-outline" },
   multipleHtml: { selector: "& .likec4-shape-multiple" },
@@ -5447,7 +5587,7 @@ const parts = defineParts({
 const elementShapeRecipe = defineRecipe({
   description: "Recipe for Diagram node shape",
   className: "likec4-element-shape",
-  base: parts({
+  base: parts$1({
     root: {
       top: "0",
       left: "0",
@@ -5481,7 +5621,7 @@ const elementShapeRecipe = defineRecipe({
   }),
   variants: {
     shapetype: {
-      html: parts({
+      html: parts$1({
         root: {
           backgroundColor: "var(--likec4-palette-fill)",
           borderRadius: "[6px]",
@@ -5509,14 +5649,14 @@ const elementShapeRecipe = defineRecipe({
         multipleHtml: {
           position: "absolute",
           content: '" "',
-          top: "[14px]",
-          left: "[14px]",
-          width: "[calc(100% - 6px)]",
-          height: "[calc(100% - 6px)]",
+          top: 16,
+          left: 16,
+          width: "calc(100% - 6px)",
+          height: "calc(100% - 6px)",
           backgroundColor: "var(--likec4-palette-fill)",
-          borderRadius: "[6px]",
+          borderRadius: "6px",
           zIndex: -1,
-          filter: "brightness(0.65)",
+          filter: "brightness(0.5) !important",
           visibility: {
             base: "visible",
             _smallZoom: "hidden",
@@ -5526,7 +5666,7 @@ const elementShapeRecipe = defineRecipe({
           },
           transition: "fast",
           _whenHovered: {
-            transform: "translate(-10px, -10px)"
+            transform: "translate(-14px, -14px)"
           }
         },
         outline: {
@@ -5543,7 +5683,7 @@ const elementShapeRecipe = defineRecipe({
           animationStyle: "indicator"
         }
       }),
-      svg: parts({
+      svg: parts$1({
         root: {
           fill: "var(--likec4-palette-fill)",
           stroke: "var(--likec4-palette-stroke)",
@@ -5584,11 +5724,11 @@ const elementShapeRecipe = defineRecipe({
             _shapeStorage: "50% 100%"
           },
           transform: {
-            base: "translate(14px, 14px) perspective(300px) translateZ(-8px)",
-            _whenHovered: "translate(2px, 2px) perspective(300px) translateZ(-8px)"
+            base: "translate(14px, 14px) perspective(200px) translateZ(-4px)",
+            _whenHovered: "translate(2px, 2px) perspective(200px) translateZ(-4px)"
           },
           transition: "fast",
-          filter: "brightness(0.65) !important",
+          filter: "brightness(0.5) !important",
           stroke: "none",
           display: {
             _smallZoom: "none",
@@ -5666,7 +5806,10 @@ const likec4tag = defineRecipe({
 });
 const markdownBlock = defineRecipe({
   className: "likec4-markdown-block",
-  jsx: ["MarkdownBlock"],
+  jsx: [
+    "MarkdownBlock",
+    "Markdown"
+  ],
   description: "Block with Markdown content",
   base: {
     "--text-fz": "1rem",
@@ -5953,16 +6096,130 @@ const navigationPanelActionIcon = defineRecipe({
     conditions: ["*"]
   }]
 });
+const backdropBlur = "--_blur";
+const backdropOpacity = "--_opacity";
+const level = "--_level";
+const offset = "--_offset";
+const inset = "--_inset";
+const borderRadius = "--_border-radius";
+const parts = defineParts({
+  dialog: { selector: "&" },
+  body: { selector: "& .likec4-overlay-body" }
+});
+const overlay = defineRecipe({
+  description: "Recipe for Overlay Dialog",
+  className: "likec4-overlay",
+  base: parts({
+    dialog: {
+      boxSizing: "border-box",
+      margin: "0",
+      position: "fixed",
+      width: "100vw",
+      height: "100vh",
+      maxWidth: "100vw",
+      maxHeight: "100vh",
+      background: `likec4.overlay.border`,
+      shadow: "xl",
+      border: "transparent",
+      outline: "none",
+      borderRadius: `var(${borderRadius})`,
+      [backdropBlur]: "0px",
+      [level]: "0",
+      [offset]: "0px",
+      [inset]: "calc((1 + var(--_level) * 0.75) * var(--_offset))",
+      [backdropOpacity]: "0%",
+      [borderRadius]: "0px",
+      _backdrop: {
+        cursor: "zoom-out"
+      },
+      inset: "0",
+      padding: "0"
+    },
+    body: {
+      position: "relative",
+      containerName: "likec4-dialog",
+      containerType: "size",
+      border: `transparent`,
+      overflow: "hidden",
+      width: "100%",
+      height: "100%",
+      background: "likec4.overlay.body"
+    }
+  }),
+  variants: {
+    fullscreen: {
+      false: {
+        dialog: {
+          sm: {
+            inset: "[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]",
+            width: "calc(100vw - 2 * var(--_inset))",
+            height: "calc(100vh - var(--_offset) - var(--_inset))",
+            [borderRadius]: "6px",
+            padding: "1.5",
+            // 6px
+            [offset]: "1rem"
+          },
+          md: {
+            [offset]: "1rem"
+          },
+          lg: {
+            [offset]: "2rem"
+          },
+          xl: {
+            [offset]: "4rem"
+          }
+        },
+        body: {
+          sm: {
+            borderRadius: `calc(var(${borderRadius}) - 2px)`
+          }
+        }
+      },
+      true: {
+        dialog: {
+          inset: "0",
+          padding: "0"
+        }
+      }
+    },
+    withBackdrop: {
+      false: {
+        dialog: {
+          _backdrop: {
+            display: "none"
+          }
+        }
+      },
+      true: {
+        dialog: {
+          _backdrop: {
+            backdropFilter: `blur(var(${backdropBlur}))`,
+            background: `color-mix(in srgb, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    fullscreen: false,
+    withBackdrop: true
+  },
+  staticCss: [{
+    fullscreen: ["*"],
+    withBackdrop: ["*"]
+  }]
+});
 const recipes = {
   __proto__: null,
   actionBtn,
   compoundNode,
   edgeActionBtn,
-  elementNodeIcon,
+  elementNodeData,
   elementShapeRecipe,
   likec4tag,
   markdownBlock,
-  navigationPanelActionIcon
+  navigationPanelActionIcon,
+  overlay
 };
 const semanticTokens = defineSemanticTokens({
   colors: {
@@ -6070,6 +6327,27 @@ const semanticTokens = defineSemanticTokens({
           description: "LikeC4 dropdown border color",
           value: "{colors.likec4.panel.border}"
         }
+      },
+      overlay: {
+        backdrop: {
+          DEFAULT: {
+            description: "LikeC4 overlay backdrop color",
+            value: {
+              base: `rgb(34 34 34)`,
+              _light: `rgb(15 15 15)`
+            }
+          }
+        },
+        body: {
+          DEFAULT: {
+            description: "LikeC4 overlay body color",
+            value: `{colors.mantine.colors.body}`
+          }
+        },
+        border: {
+          description: "LikeC4 overlay border color",
+          value: "{colors.mantine.colors.defaultBorder/50}"
+        }
       }
     }
   }
@@ -6183,181 +6461,6 @@ const edgeLabel = defineSlotRecipe({
     isStepEdge: ["*"]
   }]
 });
-const title = {
-  textStyle: "likec4.node.primary",
-  flex: "0 0 auto",
-  textAlign: "center",
-  color: "var(--likec4-palette-hiContrast)"
-};
-const description = {
-  flexGrow: "0",
-  flexShrink: "1",
-  textStyle: "likec4.node.secondary",
-  color: "var(--likec4-palette-loContrast)",
-  textAlign: "center",
-  textOverflow: "ellipsis",
-  overflow: "hidden",
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  },
-  "& a": {
-    pointerEvents: "all"
-  }
-};
-const technology = {
-  flex: "0 0 auto",
-  textStyle: "likec4.node.secondary",
-  color: "var(--likec4-palette-loContrast)",
-  fontSize: `calc(var(--likec4-text-size) * 0.635)`,
-  lineHeight: 1.125,
-  textAlign: "center",
-  textWrap: "balance",
-  opacity: 0.92,
-  _whenHovered: {
-    opacity: 1
-  },
-  _shapeSizeXs: {
-    display: "none"
-  },
-  _shapeSizeSm: {
-    display: "none"
-  },
-  _smallZoom: {
-    display: "none"
-  }
-};
-const elementNodeData = defineSlotRecipe({
-  className: "likec4-el-node-data",
-  slots: ["root", "textContainer", "title", "description", "technology", "icon"],
-  base: {
-    root: {
-      position: "relative",
-      flex: "1",
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      margin: "[0 auto]",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexDirection: "row",
-      paddingTop: "var(--likec4-spacing)",
-      paddingBottom: "var(--likec4-spacing)",
-      paddingLeft: "calc(var(--likec4-spacing) + 8px)",
-      paddingRight: "calc(var(--likec4-spacing) + 8px)",
-      overflow: "hidden",
-      pointerEvents: "none",
-      gap: "3",
-      _shapeQueue: {
-        paddingLeft: "[46px]",
-        paddingRight: "[16px]"
-      },
-      _shapeMobile: {
-        paddingLeft: "[46px]",
-        paddingRight: "[16px]"
-      },
-      _shapeCylinder: {
-        paddingTop: "[30px]"
-      },
-      _shapeStorage: {
-        paddingTop: "[30px]"
-      },
-      _shapeBrowser: {
-        paddingTop: "[32px]",
-        paddingBottom: "[28px]"
-      },
-      _shapeSizeXs: {
-        [iconSize$1]: "24px"
-      },
-      _shapeSizeSm: {
-        [iconSize$1]: "36px"
-      },
-      _shapeSizeMd: {
-        [iconSize$1]: "60px"
-      },
-      _shapeSizeLg: {
-        [iconSize$1]: "82px",
-        gap: "4"
-      },
-      _shapeSizeXl: {
-        [iconSize$1]: "90px",
-        gap: "4"
-      }
-    },
-    textContainer: {
-      height: "fit-content",
-      width: "fit-content",
-      maxHeight: "100%",
-      maxWidth: "100%",
-      flex: "0 1 auto",
-      display: "flex",
-      flexDirection: "column",
-      alignItems: "stretch",
-      justifyContent: "center",
-      flexWrap: "nowrap",
-      overflow: "hidden",
-      gap: "8px"
-    },
-    title,
-    description,
-    technology
-  },
-  variants: {
-    hasIcon: {
-      false: {},
-      true: {
-        root: {
-          gap: "16px"
-        },
-        textContainer: {
-          minWidth: `calc(50% + var(${iconSize$1}))`,
-          alignItems: "flex-start"
-        },
-        title: {
-          textAlign: "left"
-        },
-        description: {
-          textAlign: "left"
-        },
-        technology: {
-          textAlign: "left"
-        }
-      }
-    },
-    hasDescription: {
-      false: {},
-      true: {}
-    },
-    hasTechnology: {
-      false: {},
-      true: {}
-    }
-  },
-  compoundVariants: [
-    {
-      hasDescription: true,
-      hasTechnology: true,
-      css: {
-        textContainer: {
-          gap: "6px"
-        }
-      }
-    }
-  ],
-  defaultVariants: {
-    hasIcon: false
-  },
-  staticCss: [{
-    hasIcon: ["*"],
-    hasDescription: ["*"],
-    hasTechnology: ["*"],
-    conditions: ["*"]
-  }]
-});
 const navigationLink = defineSlotRecipe({
   className: "likec4-navlink",
   description: "Navigation Link (classes for Mantine NavLink)",
@@ -6426,7 +6529,6 @@ const navigationLink = defineSlotRecipe({
 const slotRecipes = {
   __proto__: null,
   edgeLabel,
-  elementNodeData,
   navigationLink
 };
 const textStyles = defineTextStyles({