@likec4/styles 1.44.0 → 1.45.0

package/dist/jsx/create-style-context.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
 import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
-import type { JsxFactoryOptions, ComponentProps } from '../types/jsx';
+import type { JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';
 import type { ComponentType, ElementType } from 'react'
 
 interface UnstyledProps {
@@ -19,11 +19,11 @@ type SlotRecipe = SvaFn | SlotRecipeFn
 type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
 interface WithProviderOptions<P = {}> {
-  defaultProps?: Partial<P> | undefined
+  defaultProps?: (Partial<P> & DataAttrs) | undefined
 }
 
 type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
 >
 
 type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -31,7 +31,7 @@ type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Com
 >
 
 type StyleContextConsumer<T extends ElementType> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 >
 
 export interface StyleContext<R extends SlotRecipe> {

package/dist/jsx/create-style-context.mjs

@@ -5,9 +5,29 @@ import { styled } from './factory.mjs';
 import { getDisplayName } from './factory-helper.mjs';
 import { createContext, useContext, createElement, forwardRef } from 'react'
 
+function createSafeContext(contextName) {
+  const Context = createContext(undefined)
+  const useStyleContext = (componentName, slot) => {
+    const context = useContext(Context)
+    if (context === undefined) {
+      const componentInfo = componentName ? `Component "${componentName}"` : 'A component'
+      const slotInfo = slot ? ` (slot: "${slot}")` : ''
+      
+      throw new Error(
+        `${componentInfo}${slotInfo} cannot access ${contextName} because it's missing its Provider.`
+      )
+    }
+    return context
+  }
+  return [Context, useStyleContext]
+}
+
 export function createStyleContext(recipe) {
-  const StyleContext = createContext({})
   const isConfigRecipe = '__recipe__' in recipe
+  const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+  const contextName = recipeName ? `createStyleContext("${recipeName}")` : 'createStyleContext'
+  
+  const [StyleContext, useStyleContext] = createSafeContext(contextName)
   const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
   const getResolvedProps = (props, slotStyles) => {
@@ -71,9 +91,10 @@ export function createStyleContext(recipe) {
 
   const withContext = (Component, slot, options) => {
     const StyledComponent = styled(Component, {}, options)
+    const componentName = getDisplayName(Component)
     
     const WithContext = forwardRef((props, ref) => {
-      const slotStyles = useContext(StyleContext)
+      const slotStyles = useStyleContext(componentName, slot)
 
       const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
       const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -84,7 +105,6 @@ export function createStyleContext(recipe) {
       })
     })
     
-    const componentName = getDisplayName(Component)
     WithContext.displayName = `withContext(${componentName})`
     
     return WithContext

package/dist/preset.mjs

@@ -3935,11 +3935,11 @@ function createPreset(options) {
 const keyframes = defineKeyframes({
   "indicatorOpacity": {
     "0%": {
-      opacity: 0.9,
+      opacity: 0.8,
       strokeOpacity: 0.8
     },
     "100%": {
-      opacity: 0.6,
+      opacity: 0.4,
       strokeOpacity: 0.4
     }
   },
@@ -4750,12 +4750,16 @@ const paletteGlobalVars = {
 };
 const mantine = {
   colors: {
+    white: "var(--mantine-color-white)",
+    black: "var(--mantine-color-black)",
     text: "var(--mantine-color-text)",
     body: "var(--mantine-color-body)",
     defaultBorder: "var(--mantine-color-default-border)",
     dimmed: "var(--mantine-color-dimmed)",
     dark: {
+      "3": "var(--mantine-color-dark-3)",
       "4": "var(--mantine-color-dark-4)",
+      "5": "var(--mantine-color-dark-5)",
       "6": "var(--mantine-color-dark-6)",
       "7": "var(--mantine-color-dark-7)",
       "8": "var(--mantine-color-dark-8)"
@@ -4763,11 +4767,16 @@ const mantine = {
     gray: {
       "1": "var(--mantine-color-gray-1)",
       "2": "var(--mantine-color-gray-2)",
+      "3": "var(--mantine-color-gray-3)",
       "4": "var(--mantine-color-gray-4)"
     },
     green: {
       "6": "var(--mantine-color-green-6)"
     },
+    yellow: {
+      "2": "var(--mantine-color-yellow-2)",
+      "5": "var(--mantine-color-yellow-5)"
+    },
     orange: {
       "1": "var(--mantine-color-orange-1)",
       "3": "var(--mantine-color-orange-3)",
@@ -4827,9 +4836,9 @@ const conditions = {
     smallZoom: ':where([data-likec4-zoom-small="true"]) &',
     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) &",
+    whenHovered: ':where(.react-flow__node:has([data-likec4-hovered="true"]), .react-flow__edge:has([data-likec4-hovered="true"]), .likec4-edge-container[data-likec4-hovered="true"]) &',
+    whenSelectable: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selectable) &",
+    whenSelected: ":where(.react-flow__node, .react-flow__edge, .likec4-edge-container):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) &"
     // likec4Color: ':where([data-likec4-color]) &',
@@ -4872,14 +4881,28 @@ const globalCss = {
       width: "100%",
       height: "100%",
       border: "0px solid transparent",
+      background: "transparent",
       containerName: "likec4-root",
       containerType: "size",
+      _print: {
+        "& .react-flow__background": {
+          display: "none"
+        },
+        "& .react-flow": {
+          background: "transparent !important",
+          "--xy-background-color": "transparent !important"
+        },
+        "& *": {
+          colorAdjust: "exact!",
+          printColorAdjust: "exact!"
+        }
+      },
       "& .mantine-ActionIcon-icon .tabler-icon": {
         width: "75%",
         height: "75%"
       },
       "& .react-flow": {
-        contain: "paint",
+        contain: "paint layout",
         "--xy-background-color": "var(--colors-likec4-background)",
         "--xy-background-pattern-color": "var(--colors-likec4-background-pattern, var(--colors-likec4-background))",
         "&:is(.not-initialized)": {
@@ -4912,11 +4935,11 @@ const globalCss = {
         "--xy-edge-label-color": "var(--likec4-palette-relation-label)",
         "--xy-edge-label-background-color": "var(--likec4-palette-relation-label-bg)",
         _dark: {
-          "--xy-edge-label-background-color": "color-mix(in srgb, var(--likec4-palette-relation-label-bg) 50%, transparent)"
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 50%, transparent)"
         },
         _light: {
-          "--xy-edge-label-color": "color-mix(in srgb, var(--likec4-palette-relation-label), rgba(255 255 255 / 0.85) 40%)",
-          "--xy-edge-label-background-color": "color-mix(in srgb, var(--likec4-palette-relation-label-bg) 60%, transparent)"
+          "--xy-edge-label-color": "color-mix(in oklab, var(--likec4-palette-relation-label), rgba(255 255 255 / 0.85) 40%)",
+          "--xy-edge-label-background-color": "color-mix(in oklab, var(--likec4-palette-relation-label-bg) 60%, transparent)"
         },
         '&:is([data-likec4-hovered="true"], [data-edge-active="true"])': {
           "--xy-edge-stroke-width": 4,
@@ -4946,19 +4969,22 @@ const globalCss = {
         "& :where(.react-flow__edges, .react-flow__edgelabel-renderer) > :where(svg, .likec4-edge-label-container)": {
           mixBlendMode: {
             _dark: "plus-lighter",
-            _light: "screen"
+            _light: "screen",
+            _print: "normal!"
           }
         },
         "&:has(.react-flow__node-seq-parallel) :where(.react-flow__edges > svg)": {
           mixBlendMode: {
             // _dark: 'plus-lighter',
-            _light: "color-burn"
+            _light: "color-burn",
+            _print: "normal!"
           }
         },
         "& .react-flow__node-seq-parallel": {
           mixBlendMode: {
             _dark: "luminosity",
-            _light: "color-burn"
+            _light: "color-burn",
+            _print: "normal!"
           }
         }
       },
@@ -5074,18 +5100,20 @@ const actionBtn = defineRecipe({
   className: "action-btn",
   description: "Action Button within Diagram Node (Bottom-Center)",
   base: {
-    pointerEvents: "all",
-    cursor: "pointer",
     color: "var(--actionbtn-color)",
     opacity: 0.75,
     "--actionbtn-color": "var(--likec4-palette-loContrast)",
     "--actionbtn-color-hovered": "var(--likec4-palette-loContrast)",
     "--actionbtn-color-hovered-btn": "var(--likec4-palette-hiContrast)",
-    "--actionbtn-bg-idle": `color-mix(in srgb , var(--likec4-palette-fill),  transparent 99%)`,
-    "--actionbtn-bg-hovered": `color-mix(in srgb , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
-    "--actionbtn-bg-hovered-btn": `color-mix(in srgb , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
+    "--actionbtn-bg-idle": `color-mix(in oklab , var(--likec4-palette-fill),  transparent 99%)`,
+    "--actionbtn-bg-hovered": `color-mix(in oklab , var(--likec4-palette-fill) 65%, var(--likec4-palette-stroke))`,
+    "--actionbtn-bg-hovered-btn": `color-mix(in oklab , var(--likec4-palette-fill) 50%, var(--likec4-palette-stroke))`,
     "--ai-bg": `var(--actionbtn-bg-idle)`,
     background: `var(--ai-bg)`,
+    _whenSelectable: {
+      pointerEvents: "all",
+      cursor: "pointer"
+    },
     _whenHovered: {
       opacity: 1,
       color: "var(--actionbtn-color-hovered)",
@@ -5104,6 +5132,9 @@ const actionBtn = defineRecipe({
     },
     "& *": {
       pointerEvents: "none"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {
@@ -5194,17 +5225,17 @@ const compoundNode = defineRecipe({
       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))"
+        base: "oklab(from var(--likec4-palette-stroke) calc(l - 0.05) a b)",
+        _dark: "oklab(from var(--likec4-palette-stroke) calc(l + 0.2) a b)"
       },
       [borderWidth.var]: "3px",
       [borderRadius$1.var]: "6px",
       [compoundTransparency.var]: "100%",
       [borderTransparency.var]: "100%",
-      [indicatorSpacing.var]: `calc(${borderWidth.ref} + 2px)`,
+      [indicatorSpacing.var]: `calc(${borderWidth.ref} + 1px)`,
       [compoundColor.var]: "var(--likec4-palette-loContrast)",
       color: compoundColor.ref,
-      _after: {
+      _before: {
         position: "absolute",
         content: '" "',
         top: `[calc(-1 * ${indicatorSpacing.ref})]`,
@@ -5221,7 +5252,7 @@ const compoundNode = defineRecipe({
           _whenFocused: "block",
           _whenSelected: "block"
         },
-        animationStyle: "indicatorOpacity",
+        animationStyle: "indicator",
         animationPlayState: {
           base: "paused",
           _whenFocused: "running",
@@ -5268,7 +5299,8 @@ const compoundNode = defineRecipe({
       justifyContent: "center",
       mixBlendMode: {
         base: "hard-light",
-        _reduceGraphicsOnPan: "normal"
+        _reduceGraphicsOnPan: "normal",
+        _print: "normal!"
       },
       [`& svg, & img`]: {
         width: "100%",
@@ -5291,7 +5323,7 @@ const compoundNode = defineRecipe({
     actionBtn: {
       "--actionbtn-color": compoundColor.ref,
       "--actionbtn-color-hovered": compoundColor.ref,
-      "--actionbtn-color-hovered-btn": `color-mix(in srgb, ${compoundColor.ref} 80%, #fff)`,
+      "--actionbtn-color-hovered-btn": `color-mix(in oklab, ${compoundColor.ref} 80%, #fff)`,
       opacity: {
         base: 0.6,
         _whenHovered: 0.75,
@@ -5300,6 +5332,9 @@ const compoundNode = defineRecipe({
       },
       _noReduceGraphics: {
         transition: "fast"
+      },
+      _print: {
+        display: "none"
       }
     },
     navigationBtn: {
@@ -5308,6 +5343,9 @@ const compoundNode = defineRecipe({
       left: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     },
     detailsBtn: {
@@ -5316,6 +5354,9 @@ const compoundNode = defineRecipe({
       right: "0.5",
       _smallZoom: {
         display: "none"
+      },
+      _print: {
+        display: "none"
       }
     }
   }),
@@ -5334,8 +5375,8 @@ const compoundNode = defineRecipe({
       }),
       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)]`
+          backgroundColor: `color-mix(in oklab, var(--likec4-palette-fill) ${compoundTransparency.ref}, transparent)`,
+          borderColor: `color-mix(in oklab, var(--likec4-palette-stroke) ${borderTransparency.ref}, transparent)`
         }
       })
     },
@@ -5345,7 +5386,7 @@ const compoundNode = defineRecipe({
         root: {
           [compoundColor.var]: {
             base: "var(--likec4-palette-stroke)",
-            _dark: "[color-mix(in srgb, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]"
+            _dark: "[color-mix(in oklab, var(--likec4-palette-loContrast) 60%, var(--likec4-palette-fill))]"
           }
         },
         actionBtn: {
@@ -5411,7 +5452,7 @@ const edgeActionBtn = defineRecipe({
     translate: "auto",
     // '--ai-bg': 'var(--xy-edge-label-background-color)',
     "--ai-bg": "transparent",
-    "--ai-hover": `color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
+    "--ai-hover": `color-mix(in oklab , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)`,
     "--ai-size": `var(--ai-size-sm)`,
     "--ai-radius": `{radii.sm}`,
     _hover: {
@@ -5430,6 +5471,9 @@ const edgeActionBtn = defineRecipe({
       width: "80%",
       height: "80%",
       strokeWidth: "2"
+    },
+    _print: {
+      display: "none"
     }
   },
   variants: {},
@@ -5635,9 +5679,10 @@ const elementShapeRecipe = defineRecipe({
       pointerEvents: "none",
       overflow: "visible",
       ["--likec4-palette-outline"]: {
-        _light: "color-mix(in srgb, var(--likec4-palette-stroke) 60%, var(--likec4-palette-hiContrast))",
-        _dark: "color-mix(in srgb, var(--likec4-palette-stroke) 30%, var(--likec4-palette-loContrast))"
-      }
+        base: "oklab(from var(--likec4-palette-stroke) calc(l - 0.05) a b)",
+        _dark: "oklab(from var(--likec4-palette-stroke) calc(l + 0.2) a b)"
+      },
+      ["--likec4-outline-size"]: `4px`
     },
     outline: {
       visibility: {
@@ -5666,11 +5711,11 @@ const elementShapeRecipe = defineRecipe({
           boxShadow: {
             base: [
               "0 2px 1px 0 rgb(0 0 0 / 21%)",
-              "0 1px 1px 0 color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent)",
+              "0 1px 1px 0 color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent)",
               "0 5px 3px 0 rgb(0 0 0 / 10%)"
             ].join(","),
             _whenHovered: {
-              _light: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
+              base: `rgba(38, 57, 77, 95%) 0px 20px 30px -10px`,
               _dark: `rgba(10, 11, 16, 90%) 0px 20px 30px -10px`
             },
             _whenSelected: "none",
@@ -5681,8 +5726,7 @@ const elementShapeRecipe = defineRecipe({
             base: "background-color 120ms linear, box-shadow 130ms {easings.inOut}",
             _reduceGraphicsOnPan: "none"
           },
-          transitionDelay: "0ms",
-          ["--likec4-outline-size"]: `4px`
+          transitionDelay: "0ms"
         },
         multipleHtml: {
           position: "absolute",
@@ -5710,13 +5754,13 @@ const elementShapeRecipe = defineRecipe({
         outline: {
           position: "absolute",
           content: '" "',
-          top: `[calc(-1 * var(--likec4-outline-size))]`,
-          left: `[calc(-1 * var(--likec4-outline-size))]`,
-          width: `[calc(100% + 2 * var(--likec4-outline-size))]`,
-          height: `[calc(100% + 2 * var(--likec4-outline-size))]`,
+          top: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+          left: `[calc(-1 * var(--likec4-outline-size) - 1px)]`,
+          width: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
+          height: `[calc(100% + 2 * var(--likec4-outline-size) + 2px)]`,
           borderStyle: "solid",
           borderWidth: "var(--likec4-outline-size)",
-          borderRadius: "[10px]",
+          borderRadius: "11px",
           borderColor: "var(--likec4-palette-outline)",
           animationStyle: "indicator"
         }
@@ -5730,7 +5774,7 @@ const elementShapeRecipe = defineRecipe({
           filter: {
             base: [
               "drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21))",
-              "drop-shadow(0 1px 1px color-mix(in srgb, var(--likec4-palette-stroke) 40%, transparent))",
+              "drop-shadow(0 1px 1px color-mix(in oklab, var(--likec4-palette-stroke) 40%, transparent))",
               "drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1))"
             ].join("\n"),
             _whenHovered: [
@@ -5751,7 +5795,7 @@ const elementShapeRecipe = defineRecipe({
             fill: "var(--likec4-palette-stroke)"
           },
           '& [data-likec4-fill="mix-stroke"]': {
-            fill: "[color-mix(in srgb, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
+            fill: "[color-mix(in oklab, var(--likec4-palette-stroke) 90%, var(--likec4-palette-fill))]"
           }
         },
         multipleSvg: {
@@ -5781,7 +5825,7 @@ const elementShapeRecipe = defineRecipe({
         outline: {
           stroke: "var(--likec4-palette-outline)",
           fill: "[none]",
-          strokeWidth: 8,
+          strokeWidth: 3,
           strokeOpacity: 0.8,
           animationStyle: "indicator"
         }
@@ -5829,7 +5873,10 @@ const likec4tag = defineRecipe({
           filter: "invert(1) grayscale(1) brightness(1.3) contrast(1000)",
           background: "inherit",
           backgroundClip: "text",
-          mixBlendMode: "plus-lighter"
+          mixBlendMode: {
+            base: "plus-lighter",
+            _print: "normal!"
+          }
         }
       }
     }
@@ -5856,12 +5903,12 @@ const markdownBlock = defineRecipe({
     "--typography-spacing": "calc(0.75 * var(--text-fz-md))",
     "--text-fw-headings": "600",
     "--code-background": {
-      _light: "var(--mantine-color-gray-2)",
-      _dark: "var(--mantine-color-dark-8)"
+      base: mantine.colors.gray[2],
+      _dark: mantine.colors.dark[8]
     },
     "--code-color": {
-      _light: "var(--mantine-color-black)",
-      _dark: "var(--mantine-color-white)"
+      base: mantine.colors.black,
+      _dark: mantine.colors.white
     },
     fontSize: "var(--text-fz-md)",
     lineHeight: "var(--mantine-line-height)",
@@ -5923,12 +5970,10 @@ const markdownBlock = defineRecipe({
     },
     "& :where(mark)": {
       fontSize: "var(--text-fz-md)",
-      _light: {
-        backgroundColor: "mantine.colors.yellow[2]",
-        color: "inherit"
-      },
+      backgroundColor: mantine.colors.yellow[2],
+      color: "inherit",
       _dark: {
-        backgroundColor: "mantine.colors.yellow[5]",
+        backgroundColor: mantine.colors.yellow[5],
         color: "var(--mantine-color-black)"
       }
     },
@@ -5947,8 +5992,8 @@ const markdownBlock = defineRecipe({
       border: "none",
       borderBottom: "1px solid",
       borderColor: {
-        _light: "mantine.colors.gray[3]",
-        _dark: "mantine.colors.dark[3]"
+        base: mantine.colors.gray[3],
+        _dark: mantine.colors.dark[3]
       }
     },
     "& :where(pre)": {
@@ -6032,8 +6077,8 @@ const markdownBlock = defineRecipe({
       borderRadius: "var(--mantine-radius-sm)",
       padding: "xs",
       backgroundColor: {
-        _light: "var(--mantine-color-gray-1)",
-        _dark: "var(--mantine-color-dark-5)"
+        base: mantine.colors.gray[1],
+        _dark: mantine.colors.dark[5]
       },
       "&:not(:first-child)": {
         marginTop: "var(--typography-spacing)"
@@ -6046,15 +6091,18 @@ const markdownBlock = defineRecipe({
      */
     uselikec4palette: {
       true: {
-        "--code-background": "color-mix(in srgb , var(--likec4-palette-stroke) 70%, transparent)",
+        "--code-background": "color-mix(in oklab , var(--likec4-palette-stroke) 70%, transparent)",
         "--code-color": "var(--likec4-palette-loContrast)",
         "--typography-spacing": "calc(0.5 * var(--text-fz-md))",
         "& :where(a)": {
           color: "var(--likec4-palette-fill)/45",
-          mixBlendMode: "difference"
+          mixBlendMode: {
+            base: "difference",
+            _print: "normal!"
+          }
         },
         "& :where(strong)": {
-          color: `color-mix(in srgb , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
+          color: `color-mix(in oklab , var(--likec4-palette-hiContrast) 50%,  var(--likec4-palette-loContrast))`
         },
         "& :where(blockquote)": {
           padding: "xxs",
@@ -6252,7 +6300,7 @@ const overlay = defineRecipe({
         dialog: {
           _backdrop: {
             backdropFilter: `blur(var(${backdropBlur}))`,
-            background: `color-mix(in srgb, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
+            background: `color-mix(in oklab, {colors.likec4.overlay.backdrop} var(${backdropOpacity}), transparent)`
           }
         }
       }
@@ -6498,12 +6546,12 @@ const edgeLabel = defineSlotRecipe({
         borderRadius: "4px",
         minWidth: "24px"
       },
-      background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
+      background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 10%)]`,
       fontVariantNumeric: "tabular-nums",
       // _dark: {
       [':where([data-likec4-color="gray"]) &']: {
         _dark: {
-          background: `[color-mix(in srgb, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
+          background: `[color-mix(in oklab, var(--likec4-palette-relation-label-bg), {colors.likec4.mixColor} 15%)]`
         }
       }
     },

package/dist/types/conditions.d.ts

@@ -256,11 +256,11 @@ export interface Conditions {
 	"_compoundTransparent": string
 	/** `:where([data-likec4-edge-active="true"]) &` */
 	"_edgeActive": string
-	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &` */
+	/** `:where(.react-flow__node:has([data-likec4-hovered="true"]), .react-flow__edge:has([data-likec4-hovered="true"]), .likec4-edge-container[data-likec4-hovered="true"]) &` */
 	"_whenHovered": string
-	/** `:where(.react-flow__node, .react-flow__edge):is(.selectable) &` */
+	/** `:where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selectable) &` */
 	"_whenSelectable": string
-	/** `:where(.react-flow__node, .react-flow__edge):is(.selected) &` */
+	/** `:where(.react-flow__node, .react-flow__edge, .likec4-edge-container):is(.selected) &` */
 	"_whenSelected": string
 	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &` */
 	"_whenDimmed": string

package/dist/types/jsx.d.ts

@@ -7,6 +7,8 @@ interface Dict {
   [k: string]: unknown
 }
 
+export type DataAttrs = Record<`data-${string}`, unknown>
+
 export interface UnstyledProps {
   /**
    * Whether to remove recipe styles
@@ -36,7 +38,7 @@ interface RecipeFn {
 
 export interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: Partial<TProps>
+  defaultProps?: Partial<TProps> & DataAttrs
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.44.0",
+  "version": "1.45.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -71,8 +71,8 @@
     "./dev": "./dev.ts"
   },
   "peerDependencies": {
-    "@pandacss/dev": "^1.4.3",
-    "@pandacss/types": "^1.4.3",
+    "@pandacss/dev": "^1.5.1",
+    "@pandacss/types": "^1.5.1",
     "react": "^18.x || ^19.x",
     "@types/react": "^18.x || ^19.x"
   },
@@ -89,18 +89,18 @@
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
-    "@pandacss/dev": "^1.4.3",
-    "@pandacss/types": "^1.4.3",
+    "@pandacss/dev": "^1.5.1",
+    "@pandacss/types": "^1.5.1",
     "@types/picomatch": "^4.0.2",
-    "@types/react": "19.2.2",
-    "@types/react-dom": "19.2.2",
+    "@types/react": "19.2.6",
+    "@types/react-dom": "19.2.3",
     "postcss": "8.5.6",
     "nano-spawn": "^1.0.3",
     "unbuild": "3.5.0",
     "typescript": "5.9.3",
-    "@likec4/style-preset": "1.44.0",
-    "@likec4/tsconfig": "1.44.0",
-    "@likec4/devops": "1.42.0"
+    "@likec4/style-preset": "1.45.0",
+    "@likec4/devops": "1.42.0",
+    "@likec4/tsconfig": "1.45.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",