@likec4/styles 1.42.1 → 1.44.0

package/dist/preset.mjs

@@ -3972,26 +3972,6 @@ const animationStyles = defineAnimationStyles({
     }
   }
 });
-const root = ".likec4-root";
-const radixColors = [
-  "yellow",
-  "orange",
-  "amber",
-  "tomato",
-  "red",
-  "ruby",
-  "crimson",
-  "pink",
-  "pink",
-  "purple",
-  "violet",
-  "indigo",
-  "blue",
-  "teal",
-  "grass",
-  "lime"
-];
-const iconSize$1 = "--likec4-icon-size";
 const breakpoints = {
   xs: "36em",
   sm: "48em",
@@ -4768,6 +4748,57 @@ const paletteGlobalVars = {
   "--likec4-palette-relation-label": "#C6C6C6",
   "--likec4-palette-relation-label-bg": "#18191b"
 };
+const mantine = {
+  colors: {
+    text: "var(--mantine-color-text)",
+    body: "var(--mantine-color-body)",
+    defaultBorder: "var(--mantine-color-default-border)",
+    dimmed: "var(--mantine-color-dimmed)",
+    dark: {
+      "4": "var(--mantine-color-dark-4)",
+      "6": "var(--mantine-color-dark-6)",
+      "7": "var(--mantine-color-dark-7)",
+      "8": "var(--mantine-color-dark-8)"
+    },
+    gray: {
+      "1": "var(--mantine-color-gray-1)",
+      "2": "var(--mantine-color-gray-2)",
+      "4": "var(--mantine-color-gray-4)"
+    },
+    green: {
+      "6": "var(--mantine-color-green-6)"
+    },
+    orange: {
+      "1": "var(--mantine-color-orange-1)",
+      "3": "var(--mantine-color-orange-3)",
+      "5": "var(--mantine-color-orange-5)",
+      "6": "var(--mantine-color-orange-6)",
+      "7": "var(--mantine-color-orange-7)",
+      "8": "var(--mantine-color-orange-8)",
+      "9": "var(--mantine-color-orange-9)"
+    }
+  }
+};
+const DefaultTagColors = [
+  "tomato",
+  "grass",
+  "blue",
+  "ruby",
+  "orange",
+  "indigo",
+  "pink",
+  "teal",
+  "purple",
+  "amber",
+  "crimson",
+  "red",
+  "lime",
+  "yellow",
+  "violet"
+];
+const root = ".likec4-root";
+const radixColors = [...DefaultTagColors];
+const iconSize$1 = "--likec4-icon-size";
 const conditions = {
   extend: {
     ...conditions$1,
@@ -4797,6 +4828,7 @@ const conditions = {
     compoundTransparent: ":where([data-compound-transparent]) &",
     edgeActive: ':where([data-likec4-edge-active="true"]) &',
     whenHovered: ':where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &',
+    whenSelectable: ":where(.react-flow__node, .react-flow__edge):is(.selectable) &",
     whenSelected: ":where(.react-flow__node, .react-flow__edge):is(.selected) &",
     whenDimmed: ":where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &",
     whenFocused: ":where(.react-flow__node, .react-flow__edge):is(:focus-visible, :focus, :focus-within) &"
@@ -4964,28 +4996,49 @@ const layerStyles = defineLayerStyles({
       }
     },
     panel: {
-      description: "LikeC4 panel layer",
-      value: {
-        paddingBlock: "1",
-        paddingInline: "xs",
-        borderRadius: "0",
-        backgroundColor: "likec4.panel.bg",
-        border: "1px solid {colors.likec4.panel.border}",
-        "@/sm": {
-          boxShadow: "lg",
-          borderRadius: "md",
-          padding: "2xs"
-        },
-        _whenPanning: {
-          boxShadow: "none",
-          borderRadius: "0"
+      DEFAULT: {
+        description: "LikeC4 panel layer",
+        value: {
+          padding: "1",
+          borderRadius: "0",
+          backgroundColor: "likec4.panel.bg",
+          border: "1px solid {colors.likec4.panel.border}",
+          "@/sm": {
+            boxShadow: "lg",
+            borderRadius: "md",
+            paddingInline: "2"
+          },
+          _whenPanning: {
+            boxShadow: "none",
+            borderRadius: "0"
+          }
+        }
+      },
+      action: {
+        description: "LikeC4 panel action layer",
+        value: {
+          color: {
+            base: "likec4.panel.action",
+            _notDisabled: {
+              _hover: "likec4.panel.action.hover"
+            }
+          },
+          cursor: "pointer",
+          border: "transparent",
+          borderRadius: "sm",
+          backgroundColor: {
+            base: "likec4.panel.action.bg",
+            _notDisabled: {
+              _hover: "likec4.panel.action.bg.hover"
+            }
+          }
         }
       }
     },
     dropdown: {
       description: "LikeC4 dropdown layer",
       value: {
-        padding: "xxs",
+        padding: "2",
         backgroundColor: "likec4.dropdown.bg",
         border: "1px solid {colors.likec4.dropdown.border}",
         boxShadow: "lg",
@@ -5085,8 +5138,8 @@ const actionBtn = defineRecipe({
     variant: "filled"
   },
   staticCss: [{
-    size: ["md"],
-    radius: ["md"],
+    size: ["*"],
+    radius: ["*"],
     variant: ["*"],
     conditions: ["*"]
   }]
@@ -5188,7 +5241,7 @@ const compoundNode = defineRecipe({
       // 6px
       left: "2.5",
       top: "0.5",
-      right: "[30px]",
+      right: "30px",
       width: "auto",
       minHeight: "30px",
       [`:where(.react-flow__node.draggable) &`]: {
@@ -6043,10 +6096,10 @@ const navigationPanelActionIcon = defineRecipe({
   description: "ActionIcon for navigation panel",
   base: {
     color: {
-      base: "likec4.panel.action-icon.text",
-      _disabled: "likec4.panel.action-icon.text.disabled",
+      base: "likec4.panel.action",
+      _disabled: "likec4.panel.action.disabled",
       _notDisabled: {
-        _hover: "likec4.panel.action-icon.text.hover"
+        _hover: "likec4.panel.action.hover"
       }
     },
     _disabled: {
@@ -6057,24 +6110,44 @@ const navigationPanelActionIcon = defineRecipe({
     variant: {
       "default": {
         backgroundColor: {
-          base: "[transparent]",
+          base: "transparent",
           _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
+            _hover: "likec4.panel.action.bg.hover"
           }
         }
       },
       "filled": {
         backgroundColor: {
-          base: "likec4.panel.action-icon.bg",
+          base: "likec4.panel.action.bg",
           _notDisabled: {
-            _hover: "likec4.panel.action-icon.bg.hover"
+            _hover: "likec4.panel.action.bg.hover"
           }
         }
       }
+    },
+    type: {
+      "default": {},
+      "warning": {
+        color: {
+          base: "likec4.panel.action.warning",
+          _hover: "likec4.panel.action.warning.hover"
+        }
+      }
     }
   },
+  compoundVariants: [{
+    type: "warning",
+    variant: "filled",
+    css: {
+      backgroundColor: {
+        base: "likec4.panel.action.warning.bg",
+        _hover: "likec4.panel.action.warning.bg.hover"
+      }
+    }
+  }],
   defaultVariants: {
-    variant: "default"
+    variant: "default",
+    type: "default"
   },
   staticCss: [{
     variant: ["*"],
@@ -6206,19 +6279,22 @@ const recipes = {
   navigationPanelActionIcon,
   overlay
 };
+function mixTransparent(color, percentage = 50) {
+  return `color-mix(in oklab, ${color} ${percentage}%, transparent ${100 - percentage}%)`;
+}
 const semanticTokens = defineSemanticTokens({
   colors: {
     likec4: {
       background: {
         DEFAULT: {
           description: "Background color",
-          value: "var(--mantine-color-body)"
+          value: mantine.colors.body
         },
         pattern: {
           description: "Background pattern color",
           value: {
-            _dark: "{colors.mantine.colors.dark[4]/70}",
-            _light: "{colors.mantine.colors.gray[4]}"
+            _dark: mixTransparent(mantine.colors.dark[4], 70),
+            _light: mantine.colors.gray[4]
           }
         }
       },
@@ -6246,8 +6322,8 @@ const semanticTokens = defineSemanticTokens({
           DEFAULT: {
             description: "LikeC4 panel background color",
             value: {
-              base: `{colors.mantine.colors.body}`,
-              _dark: `{colors.mantine.colors.dark[6]}`
+              base: mantine.colors.body,
+              _dark: mantine.colors.dark[6]
             }
           }
         },
@@ -6255,37 +6331,74 @@ const semanticTokens = defineSemanticTokens({
           description: "LikeC4 panel border color",
           value: {
             base: "transparent",
-            _light: `{colors.mantine.colors.defaultBorder/30}`
+            _light: mixTransparent(mantine.colors.defaultBorder, 30)
           }
         },
-        "action-icon": {
-          text: {
-            DEFAULT: {
-              description: "LikeC4 action icon text color",
-              value: "color-mix(in srgb, var(--mantine-color-text) 80%, transparent)"
-            },
-            hover: {
-              description: "LikeC4 action icon text color on hover",
-              value: "var(--mantine-color-bright)"
-            },
-            disabled: {
-              description: "LikeC4 action icon text color when disabled",
-              value: "var(--mantine-color-dimmed)"
-            }
+        text: {
+          DEFAULT: {
+            description: "LikeC4 panel text color",
+            value: mixTransparent(mantine.colors.text, 85)
+          },
+          dimmed: {
+            description: "LikeC4 panel dimmed text color",
+            value: mantine.colors.dimmed
+          }
+        },
+        action: {
+          DEFAULT: {
+            description: "LikeC4 panel action text color (Links/Icons)",
+            value: mixTransparent(mantine.colors.text, 90)
+          },
+          disabled: {
+            description: "LikeC4 action icon text color when disabled",
+            value: mantine.colors.dimmed
+          },
+          hover: {
+            description: "LikeC4 panel action text color on hover",
+            value: "var(--mantine-color-bright)"
           },
           bg: {
             DEFAULT: {
               description: "LikeC4 action icon background color",
               value: {
-                base: "{colors.mantine.colors.gray[1]}",
-                _dark: "{colors.mantine.colors.dark[7]/70}"
+                base: mantine.colors.gray[1],
+                _dark: mixTransparent(mantine.colors.dark[7], 70)
               }
             },
             hover: {
               description: "LikeC4 action icon background color on hover",
               value: {
-                base: "{colors.mantine.colors.gray[2]}",
-                _dark: "{colors.mantine.colors.dark[8]}"
+                base: mantine.colors.gray[2],
+                _dark: mantine.colors.dark[8]
+              }
+            }
+          },
+          warning: {
+            DEFAULT: {
+              description: "LikeC4 action icon text color",
+              value: mantine.colors.orange[6]
+            },
+            hover: {
+              description: "LikeC4 action icon text color on hover",
+              value: {
+                base: mantine.colors.orange[7],
+                _dark: mantine.colors.orange[5]
+              }
+            },
+            bg: {
+              DEFAULT: {
+                description: "LikeC4 action icon background color",
+                value: {
+                  base: mixTransparent(mantine.colors.orange[1], 90),
+                  _dark: mixTransparent(mantine.colors.orange[9], 10)
+                }
+              },
+              hover: {
+                description: "LikeC4 action icon background color on hover",
+                value: {
+                  base: mixTransparent(mantine.colors.orange[3], 70),
+                  _dark: mixTransparent(mantine.colors.orange[9], 20)
+                }
               }
             }
           }
@@ -6297,7 +6410,7 @@ const semanticTokens = defineSemanticTokens({
             description: "LikeC4 dropdown background color",
             value: {
               base: `#FFF`,
-              _dark: `{colors.mantine.colors.dark[6]}`
+              _dark: mantine.colors.dark[6]
             }
           }
         },
@@ -6319,12 +6432,33 @@ const semanticTokens = defineSemanticTokens({
         body: {
           DEFAULT: {
             description: "LikeC4 overlay body color",
-            value: `var(--mantine-color-body)`
+            value: mantine.colors.body
           }
         },
         border: {
           description: "LikeC4 overlay border color",
-          value: "{colors.mantine.colors.defaultBorder/50}"
+          value: mixTransparent(mantine.colors.defaultBorder, 50)
+        }
+      },
+      compare: {
+        manual: {
+          DEFAULT: {
+            description: "LikeC4 Compare color for manual changes",
+            value: {
+              _light: mantine.colors.orange[8],
+              _dark: mantine.colors.orange[6]
+            }
+          },
+          outline: {
+            value: {
+              _light: mantine.colors.orange[8],
+              _dark: mantine.colors.orange[6]
+            }
+          }
+        },
+        latest: {
+          description: "LikeC4 Compare color for latest changes",
+          value: mantine.colors.green[6]
         }
       }
     }
@@ -6335,7 +6469,6 @@ const edgeLabel = defineSlotRecipe({
   slots: ["root", "stepNumber", "labelContents", "labelText", "labelTechnology"],
   base: {
     root: {
-      pointerEvents: "all",
       fontFamily: "likec4.relation",
       paddingBlock: "1",
       paddingInline: "1.5",
@@ -6394,6 +6527,18 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   variants: {
+    pointerEvents: {
+      none: {
+        root: {
+          pointerEvents: "none"
+        }
+      },
+      all: {
+        root: {
+          pointerEvents: "all"
+        }
+      }
+    },
     cursor: {
       pointer: {
         root: {
@@ -6431,12 +6576,15 @@ const edgeLabel = defineSlotRecipe({
     }
   },
   defaultVariants: {
+    pointerEvents: "all",
     isStepEdge: false,
     cursor: "default"
   },
   staticCss: [{
     conditions: ["*"],
-    isStepEdge: ["*"]
+    isStepEdge: ["*"],
+    cursor: ["*"],
+    pointerEvents: ["*"]
   }]
 });
 const navigationLink = defineSlotRecipe({
@@ -6547,6 +6695,29 @@ const textStyles = defineTextStyles({
     }
   },
   likec4: {
+    panel: {
+      DEFAULT: {
+        description: "Text style for panel content",
+        value: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          color: "likec4.panel.text"
+        }
+      },
+      action: {
+        description: "Text style for panel action items",
+        value: {
+          fontSize: "0.875rem",
+          lineHeight: "1.25rem",
+          fontWeight: 500,
+          color: {
+            base: "likec4.panel.action",
+            _hover: "likec4.panel.action.hover"
+          }
+        }
+      }
+    },
     node: {
       primary: {
         description: "Primary text, usually a title or name",
@@ -6581,10 +6752,18 @@ const tokens = defineTokens({
       value: "1"
     }
   },
+  sizes: {
+    "100%": {
+      value: "100%"
+    },
+    full: {
+      value: "100%"
+    }
+  },
   borders: {
     none: { value: "none" },
     transparent: { value: "0px solid transparent" },
-    default: { value: "1px solid {colors.mantine.colors.defaultBorder}" }
+    default: { value: `1px solid ${mantine.colors.defaultBorder}` }
   },
   spacing: {
     ...tokens$1.spacing,
@@ -6710,6 +6889,14 @@ const tokens = defineTokens({
     // For fill: none
     none: { value: "none" }
   },
+  fontWeights: {
+    normal: {
+      value: "400"
+    },
+    medium: {
+      value: "500"
+    }
+  },
   fonts: {
     mono: {
       value: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`
@@ -6764,6 +6951,25 @@ const tokens = defineTokens({
     xl: {
       value: "0 1px 3px rgb(0 0 0/5%), 0 36px 28px -7px rgb(0 0 0/5%), 0 17px 17px -7px rgb(0 0 0/4%)"
     }
+  },
+  zIndex: {
+    "-1": {
+      value: "-1"
+    },
+    "0": {
+      value: "0"
+    },
+    "1": {
+      value: "1"
+    },
+    likec4: {
+      panel: {
+        value: "100"
+      },
+      dropdown: {
+        value: "200"
+      }
+    }
   }
 });
 const durationValues = [

package/dist/recipes/edge-label.d.ts

@@ -4,6 +4,10 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface EdgeLabelVariant {
   /**
+ * @default "all"
+ */
+pointerEvents: "none" | "all"
+/**
  * @default "default"
  */
 cursor: "pointer" | "default"

package/dist/recipes/edge-label.mjs

@@ -2,6 +2,7 @@ import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mj
 import { createRecipe } from './create-recipe.mjs';
 
 const edgeLabelDefaultVariants = {
+  "pointerEvents": "all",
   "isStepEdge": false,
   "cursor": "default"
 }
@@ -36,6 +37,7 @@ const edgeLabelFn = memo((props = {}) => {
 })
 
 const edgeLabelVariantKeys = [
+  "pointerEvents",
   "cursor",
   "isStepEdge"
 ]
@@ -48,6 +50,10 @@ export const edgeLabel = /* @__PURE__ */ Object.assign(edgeLabelFn, {
   classNameMap: {},
   variantKeys: edgeLabelVariantKeys,
   variantMap: {
+  "pointerEvents": [
+    "none",
+    "all"
+  ],
   "cursor": [
     "pointer",
     "default"

package/dist/recipes/navigation-panel-action-icon.d.ts

@@ -7,6 +7,10 @@ interface NavigationPanelActionIconVariant {
  * @default "default"
  */
 variant: "default" | "filled"
+/**
+ * @default "default"
+ */
+type: "default" | "warning"
 }
 
 type NavigationPanelActionIconVariantMap = {
@@ -16,7 +20,7 @@ type NavigationPanelActionIconVariantMap = {
 
 
 export type NavigationPanelActionIconVariantProps = {
-  [key in keyof NavigationPanelActionIconVariant]?: ConditionalValue<NavigationPanelActionIconVariant[key]> | undefined
+  [key in keyof NavigationPanelActionIconVariant]?: NavigationPanelActionIconVariant[key] | undefined
 }
 
 export interface NavigationPanelActionIconRecipe {

package/dist/recipes/navigation-panel-action-icon.mjs

@@ -2,13 +2,29 @@ import { memo, splitProps } from '../helpers.mjs';
 import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
 const navigationPanelActionIconFn = /* @__PURE__ */ createRecipe('likec4-navigation-panel-icon', {
-  "variant": "default"
-}, [])
+  "variant": "default",
+  "type": "default"
+}, [
+  {
+    "type": "warning",
+    "variant": "filled",
+    "css": {
+      "backgroundColor": {
+        "base": "likec4.panel.action.warning.bg",
+        "_hover": "likec4.panel.action.warning.bg.hover"
+      }
+    }
+  }
+])
 
 const navigationPanelActionIconVariantMap = {
   "variant": [
     "default",
     "filled"
+  ],
+  "type": [
+    "default",
+    "warning"
   ]
 }