@likec4/diagram 1.18.0 → 1.19.0

package/src/overlays/relationships-of/xyflow/RelationshipEdge.tsx

@@ -1,14 +1,14 @@
 import { ActionIcon, Box, Group, Stack, Text, ThemeIcon, Tooltip as MantineTooltip } from '@mantine/core'
 import { IconBoxMultipleFilled, IconZoomScan } from '@tabler/icons-react'
-import { BaseEdge, EdgeLabelRenderer, type EdgeProps, getBezierPath } from '@xyflow/react'
+import { type EdgeProps, BaseEdge, EdgeLabelRenderer, getBezierPath } from '@xyflow/react'
 import clsx from 'clsx'
 import { only } from 'remeda'
 import { useDiagramState } from '../../../hooks/useDiagramState'
 import { stopPropagation } from '../../../xyflow/utils'
 import { useOverlayDialog } from '../../OverlayContext'
-import type { XYFlowTypes } from '../_types'
+import * as css from '../../shared/xyflow/RelationshipEdge.css'
+import type { RelationshipsOfFlowTypes } from '../_types'
 import { ZIndexes } from '../use-layouted-relationships'
-import * as css from './styles.css'
 
 const Tooltip = MantineTooltip.withProps({
   color: 'dark',
@@ -18,20 +18,22 @@ const Tooltip = MantineTooltip.withProps({
   withinPortal: false,
   label: '',
   children: null,
-  offset: 4
+  offset: 4,
 })
 
 export function RelationshipEdge({
   data,
   label,
+  // Exclude the following props from the rest
+  animated: _animated,
   ...props
-}: EdgeProps<XYFlowTypes.Edge>) {
+}: EdgeProps<RelationshipsOfFlowTypes.Edge>) {
   const {
     viewId,
-    onNavigateTo
+    onNavigateTo,
   } = useDiagramState(s => ({
     viewId: s.view.id,
-    onNavigateTo: s.onNavigateTo
+    onNavigateTo: s.onNavigateTo,
   }))
   const overlay = useOverlayDialog()
   const [edgePath, labelX, labelY] = getBezierPath(props)
@@ -45,7 +47,7 @@ export function RelationshipEdge({
         className={css.edgeContainer}
         data-edge-dimmed={data.dimmed}
         data-edge-hovered={data.hovered}
-        data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
+        data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
       >
         <BaseEdge
           path={edgePath}
@@ -59,19 +61,19 @@ export function RelationshipEdge({
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
             maxWidth: Math.abs(props.targetX - props.sourceX - 70),
-            zIndex: ZIndexes.max
+            zIndex: ZIndexes.max,
           }}
           className={clsx([
             css.edgeLabel,
-            'nodrag nopan'
+            'nodrag nopan',
           ])}
           data-edge-dimmed={data.dimmed}
           data-edge-hovered={data.hovered}
-          data-likec4-color={data.includedInCurrentView ? 'gray' : 'amber'}
-          // {...data.includedInCurrentView === false && { 'data-likec4-color': 'amber' }}
+          data-likec4-color={data.existsInCurrentView ? 'gray' : 'amber'}
+          // {...data.existsInCurrentView === false && { 'data-likec4-color': 'amber' }}
         >
           {label && (
-            <Tooltip label="Not included in current view" disabled={data.includedInCurrentView} color={'orange'}>
+            <Tooltip label="Not included in current view" disabled={data.existsInCurrentView} color={'orange'}>
               <Group gap={6} wrap="nowrap">
                 {isMultiRelation && (
                   <ThemeIcon size={'sm'} variant="transparent" color="orange">
@@ -81,7 +83,7 @@ export function RelationshipEdge({
                 <Text
                   fw={isMultiRelation ? '500' : '400'}
                   style={{
-                    whiteSpace: isMultiRelation ? 'nowrap' : undefined
+                    whiteSpace: isMultiRelation ? 'nowrap' : undefined,
                   }}
                   component={'div'}
                   className={css.edgeLabelText}

package/src/overlays/shared/xyflow/RelationshipEdge.css.ts

@@ -0,0 +1,60 @@
+import { style } from '@vanilla-extract/css'
+import { mantine, transitions, vars, whereDark, xyvars } from '../../../theme-vars'
+import { mixColor } from '../../Overlays.css'
+
+const DimmedTransitionDelay = '400ms'
+
+export const edgeContainer = style({
+  opacity: 1,
+  transition: transitions.fast,
+  vars: {
+    [xyvars.edge.stroke]: vars.relation.lineColor,
+    [xyvars.edge.strokeSelected]: `color-mix(in srgb, ${vars.relation.lineColor}, ${mixColor} 35%)`,
+    [xyvars.edge.labelColor]: `color-mix(in srgb, ${vars.relation.labelColor}, rgba(255 255 255 / 0.85) 50%)`,
+    [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 20%)`
+  },
+  selectors: {
+    [`&[data-edge-dimmed='true']`]: {
+      opacity: 0.2,
+      transitionDelay: DimmedTransitionDelay
+    },
+    [`&[data-edge-dimmed='immediate']`]: {
+      opacity: 0.2
+    },
+    [`${whereDark} &`]: {
+      vars: {
+        [xyvars.edge.labelBgColor]: `color-mix(in srgb, ${vars.relation.labelBgColor}, transparent 50%)`
+      }
+    }
+  }
+})
+
+export const edgeLabel = style([edgeContainer, {
+  padding: '2px 5px',
+  fontFamily: vars.likec4.font,
+  position: 'absolute',
+  cursor: 'pointer',
+  width: 'fit-content',
+  color: xyvars.edge.labelColor,
+  backgroundColor: xyvars.edge.labelBgColor,
+  borderRadius: 4,
+  // everything inside EdgeLabelRenderer has no pointer events by default
+  // if you have an interactive element, set pointer-events: all
+  pointerEvents: 'all',
+  textWrap: 'pretty',
+  whiteSpace: 'preserve-breaks'
+}])
+
+export const edgeLabelText = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.md,
+  lineHeight: mantine.lineHeights.xs
+})
+
+export const edgeLabelTechnology = style({
+  textAlign: 'center',
+  whiteSpaceCollapse: 'preserve-breaks',
+  fontSize: mantine.fontSizes.sm,
+  lineHeight: 1
+})

package/src/overlays/shared/xyflow/_types.ts

@@ -0,0 +1,87 @@
+import type { AbstractRelation, ComputedNode, Fqn, ViewId } from '@likec4/core'
+import type { Edge as ReactFlowEdge, Node as ReactFlowNode } from '@xyflow/react'
+import type { SetRequired } from 'type-fest'
+
+export namespace SharedFlowTypes {
+  export type EmptyNodeData = {
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean
+    /**
+     * Whether the node is currently leaving the overlay
+     */
+    leaving?: boolean
+    /**
+     * Whether the node is currently entering the overlay
+     * @default true
+     */
+    entering?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
+  }
+
+  export type NonEmptyNodeData = EmptyNodeData & {
+    /**
+     * The node's fully qualified name
+     */
+    fqn: Fqn
+  }
+
+  export type OverlayNodeData = NonEmptyNodeData & {
+    /**
+     * The ComputedNode backing this node
+     */
+    element: Pick<ComputedNode, 'color' | 'title' | 'description' | 'shape' | 'kind'>
+    /**
+     * The node's incoming and outgoing ports
+     */
+    ports: {
+      in: string[]
+      out: string[]
+    }
+    /**
+     * The id of the view that should be navigated to when clicking the navigate button
+     */
+    navigateTo: ViewId | null
+    /**
+     * The node's visual depth on the screen, 1 being the highest
+     */
+    depth?: number
+  }
+
+  export type ElementNode = SetRequired<ReactFlowNode<OverlayNodeData, 'element'>, 'type'>
+
+  export type CompoundNode = SetRequired<ReactFlowNode<OverlayNodeData, 'compound'>, 'type'>
+
+  export type NonEmptyNode = ElementNode | CompoundNode
+
+  export type EmptyNode = SetRequired<ReactFlowNode<EmptyNodeData, 'empty'>, 'type'>
+
+  export type Node = NonEmptyNode | EmptyNode
+
+  export type EdgeData = {
+    /**
+     * The model's relations represented by this edge
+     */
+    relations: [AbstractRelation, ...AbstractRelation[]]
+    /**
+     * Whether the cursor is hovering over the node
+     */
+    hovered?: boolean
+    /**
+     * Whether the node is dimmed
+     * 'immediate' means that the node is dimmed without delay
+     */
+    dimmed?: 'immediate' | boolean
+    /**
+     * The id of the view that should be navigated to when clicking the edge
+     */
+    navigateTo?: ViewId | null
+  }
+
+  export type Edge = SetRequired<ReactFlowEdge<EdgeData, 'relation'>, 'data' | 'type'>
+}

package/src/state/diagram-to-xyflow.ts

@@ -1,10 +1,9 @@
 import { type DiagramEdge, DiagramNode, type DiagramView, ElementKind, type Fqn } from '@likec4/core'
 import { nonNullable, whereOperatorAsPredicate } from '@likec4/core'
 import { hasAtLeast } from 'remeda'
-import type { UnionToIntersection } from 'type-fest'
 import type { WhereOperator } from '../LikeC4Diagram.props'
 import { ZIndexes } from '../xyflow/const'
-import type { XYFlowEdge, XYFlowNode } from '../xyflow/types'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
 // const nodeZIndex = (node: DiagramNode) => node.level - (node.children.length > 0 ? 1 : 0)
 
@@ -16,12 +15,12 @@ export function diagramViewToXYFlowData(
     selectable: boolean
   }
 ): {
-  xynodes: XYFlowNode[]
-  xyedges: XYFlowEdge[]
+  xynodes: DiagramFlowTypes.Node[]
+  xyedges: DiagramFlowTypes.Edge[]
 } {
   const isDynamicView = view.__ === 'dynamic',
-    xynodes = [] as XYFlowNode[],
-    xyedges = [] as XYFlowEdge[],
+    xynodes = [] as DiagramFlowTypes.Node[],
+    xyedges = [] as DiagramFlowTypes.Edge[],
     nodeLookup = new Map<Fqn, DiagramNode>()
 
   const traverse = view.nodes.reduce(
@@ -72,7 +71,7 @@ export function diagramViewToXYFlowData(
 
     const id = ns + node.id
 
-    const base: Omit<UnionToIntersection<XYFlowNode>, 'data'> = {
+    const base: Omit<DiagramFlowTypes.Node, 'data' | 'type'> = {
       id,
       draggable: opts.draggable,
       selectable: opts.selectable && node.kind !== ElementKind.Group,

package/src/state/diagramStore.layout.ts

@@ -1,11 +1,10 @@
 import { nonexhaustive } from '@likec4/core'
-import type { InternalNode } from '@xyflow/react'
 import { getNodeDimensions } from '@xyflow/system'
 import { hasAtLeast } from 'remeda'
 import type { DiagramState } from '../hooks'
-import type { XYFlowNode } from '../xyflow/types'
 import { createLayoutConstraints } from '../xyflow/useLayoutConstraints'
 import { type Aligner, getLinearAligner, GridAligner, type GridAlignmentMode, type LinearAlignmentMode, type NodeRect } from './aligners'
+import type { DiagramFlowTypes } from '../xyflow/types'
 
 export type AlignmentMode = LinearAlignmentMode | GridAlignmentMode
 
@@ -40,7 +39,7 @@ export function align(get: () => DiagramState) {
   }
 }
 
-function toNodeRect(node: InternalNode<XYFlowNode>): NodeRect {
+function toNodeRect(node: DiagramFlowTypes.InternalNode): NodeRect {
   return {
     ...node.internals.positionAbsolute,
     id: node.id,
@@ -64,4 +63,4 @@ function getAligner(mode: AlignmentMode): Aligner {
     default:
       nonexhaustive(mode)
   }
-}
+}

package/src/state/diagramStore.ts

@@ -42,9 +42,9 @@ import type {
   LikeC4DiagramEventHandlers,
   WhereOperator
 } from '../LikeC4Diagram.props'
-import { type Vector, vector } from '../utils/vector'
+import { type Vector, vector, VectorImpl } from '../utils/vector'
 import { MinZoom } from '../xyflow/const'
-import type { XYFlowEdge, XYFlowInstance, XYFlowNode } from '../xyflow/types'
+import type { DiagramFlowTypes } from '../xyflow/types'
 import { bezierControlPoints, isInside, isSamePoint, toDomPrecision } from '../xyflow/utils'
 import { diagramViewToXYFlowData } from './diagram-to-xyflow'
 import { align, type AlignmentMode } from './diagramStore.layout'
@@ -78,7 +78,7 @@ export type DiagramInitialState = {
   // If Dynamic View
   enableDynamicViewWalkthrough: boolean
 
-  xyflow: XYFlowInstance
+  xyflow: DiagramFlowTypes.XYFlowInstance
   xystore: XYStoreApi
 
   // Diagram Container, for Mantine Portal
@@ -94,8 +94,8 @@ export type DiagramState = Simplify<
     readonly storeDevId: string
 
     // Internal state
-    xynodes: XYFlowNode[]
-    xyedges: XYFlowEdge[]
+    xynodes: DiagramFlowTypes.Node[]
+    xyedges: DiagramFlowTypes.Edge[]
     viewSyncDebounceTimeout: number | null
     viewportChanged: boolean
 
@@ -125,7 +125,6 @@ export type DiagramState = Simplify<
     lastClickedNodeId: string | null
     lastClickedEdgeId: string | null
     focusedNodeId: string | null
-    hoveredNodeId: string | null
     hoveredEdgeId: string | null
 
     // id's of nodes / edges that
@@ -151,7 +150,6 @@ export type DiagramState = Simplify<
      */
     focusOnNode: (nodeId: string | false) => void
 
-    setHoveredNode: (nodeId: string | null) => void
     setHoveredEdge: (edgeId: string | null) => void
 
     setLastClickedNode: (nodeId: string | null) => void
@@ -176,15 +174,15 @@ export type DiagramState = Simplify<
     goForward: () => void
 
     nextDynamicStep: (increment?: number) => void
-    activateWalkthrough: (step: EdgeId | XYFlowEdge) => void
+    activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => void
     stopWalkthrough: () => void
 
     openOverlay: (overlay: NonNullable<DiagramState['activeOverlay']>) => void
     closeOverlay: () => void
 
-    onInit: (xyflow: XYFlowInstance) => void
-    onNodesChange: OnNodesChange<XYFlowNode>
-    onEdgesChange: OnEdgesChange<XYFlowEdge>
+    onInit: (xyflow: DiagramFlowTypes.XYFlowInstance) => void
+    onNodesChange: OnNodesChange<DiagramFlowTypes.Node>
+    onEdgesChange: OnEdgesChange<DiagramFlowTypes.Edge>
 
     highlightByElementNotation: (notation: ElementNotation, onlyOfKind?: NodeKind) => void
 
@@ -209,7 +207,6 @@ const DEFAULT_PROPS: Except<
   activeOverlay: null,
   activeWalkthrough: null,
   focusedNodeId: null,
-  hoveredNodeId: null,
   hoveredEdgeId: null,
   lastClickedNodeId: null,
   lastClickedEdgeId: null,
@@ -285,7 +282,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               nodesDraggable,
               nodesSelectable,
               hoveredEdgeId,
-              hoveredNodeId,
               xyedges,
               xynodes
             } = get()
@@ -304,9 +300,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               if (lastClickedNodeId && !nodeIds.has(lastClickedNodeId)) {
                 lastClickedNodeId = null
               }
-              if (hoveredNodeId && !nodeIds.has(hoveredNodeId)) {
-                hoveredNodeId = null
-              }
               if (focusedNodeId && !nodeIds.has(focusedNodeId)) {
                 focusedNodeId = null
                 dimmed = EmptyStringSet
@@ -385,7 +378,6 @@ export function createDiagramStore(props: DiagramInitialState) {
               lastClickedEdgeId = null
               lastClickedNodeId = null
               hoveredEdgeId = null
-              hoveredNodeId = null
               focusedNodeId = null
               activeWalkthrough = null
               activeOverlay = null
@@ -417,14 +409,14 @@ export function createDiagramStore(props: DiagramInitialState) {
                 return {
                   ...existing,
                   ...update
-                } as XYFlowNode
+                } as DiagramFlowTypes.Node
               }
               return update
             })
             // Merge with existing edges, but only if the view is the same
             // and the edges have no layout drift
             if (isSameView && !nextView.hasLayoutDrift) {
-              update.xyedges = update.xyedges.map((update): XYFlowEdge => {
+              update.xyedges = update.xyedges.map((update): DiagramFlowTypes.Edge => {
                 const existing = xyedges.find(n => n.id === update.id)
                 if (existing) {
                   if (
@@ -460,7 +452,6 @@ export function createDiagramStore(props: DiagramInitialState) {
                 lastClickedEdgeId,
                 focusedNodeId,
                 hoveredEdgeId,
-                hoveredNodeId,
                 navigationHistory,
                 navigationHistoryIndex,
                 dimmed,
@@ -518,12 +509,6 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          setHoveredNode: (nodeId) => {
-            if (nodeId !== get().hoveredNodeId) {
-              set({ hoveredNodeId: nodeId })
-            }
-          },
-
           setHoveredEdge: (edgeId) => {
             if (edgeId !== get().hoveredEdgeId) {
               set({ hoveredEdgeId: edgeId })
@@ -919,7 +904,7 @@ export function createDiagramStore(props: DiagramInitialState) {
             }
           },
 
-          activateWalkthrough: (step: EdgeId | XYFlowEdge) => {
+          activateWalkthrough: (step: EdgeId | DiagramFlowTypes.Edge) => {
             const stepId = typeof step === 'string' ? step : step.data.edge.id
             invariant(isStepEdgeId(stepId), `stepId ${stepId} is not a step edge id`)
             let {
@@ -949,7 +934,7 @@ export function createDiagramStore(props: DiagramInitialState) {
                 )
                 .map(({ id }) => id)
             )
-            const selected = [] as XYFlowNode[]
+            const selected = [] as DiagramFlowTypes.Node[]
             for (const n of xyflow.getNodes()) {
               if (n.id === edge.source || n.id === edge.target) {
                 selected.push(n)
@@ -1035,7 +1020,7 @@ export function createDiagramStore(props: DiagramInitialState) {
 
             scheduleSaveManualLayout()
 
-            function getNodeCenter(node: XYFlowNode, nodes: XYFlowNode[]) {
+            function getNodeCenter(node: DiagramFlowTypes.Node, nodes: DiagramFlowTypes.Node[]) {
               const dimensions = vector({ x: node.width || 0, y: node.height || 0 })
               let position = vector(node.position)
                 .add(dimensions.mul(0.5))
@@ -1055,7 +1040,7 @@ export function createDiagramStore(props: DiagramInitialState) {
               return position
             }
 
-            function getControlPointForEdge(edge: XYFlowEdge): XYPoint[] {
+            function getControlPointForEdge(edge: DiagramFlowTypes.Edge): XYPoint[] {
               const source = xynodes.find(x => x.id == edge.source)
               const target = xynodes.find(x => x.id == edge.target)
               if (!source || !target) {
@@ -1065,18 +1050,31 @@ export function createDiagramStore(props: DiagramInitialState) {
               const sourceCenter = getNodeCenter(source, xynodes)
               const targetCenter = getNodeCenter(target, xynodes)
 
-              if (sourceCenter && targetCenter) {
-                const sourceToTargetVector = targetCenter.sub(sourceCenter)
-                const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
-                const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+              if (!sourceCenter || !targetCenter) {
+                return []
+              }
+
+              // Edge is a loop
+              if(source == target) {
+                const loopSize = 80                
+                const centerOfTopBoundary = new VectorImpl(0, source.height || 0)
+                  .mul(-0.5)
+                  .add(sourceCenter)
 
-                return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
+                return [
+                  centerOfTopBoundary.add(new VectorImpl(-loopSize / 2.5, -loopSize)),
+                  centerOfTopBoundary.add(new VectorImpl(loopSize / 2.5, -loopSize))
+                ]
               }
 
-              return []
+              const sourceToTargetVector = targetCenter.sub(sourceCenter)
+              const sourceBorderPoint = getBorderPointOnVector(source, sourceCenter, sourceToTargetVector)
+              const targetBorderPoint = getBorderPointOnVector(target, targetCenter, sourceToTargetVector.mul(-1))
+
+              return [sourceBorderPoint.add(targetBorderPoint.sub(sourceBorderPoint).mul(0.3))]
             }
 
-            function getBorderPointOnVector(node: XYFlowNode, nodeCenter: Vector, v: Vector) {
+            function getBorderPointOnVector(node: DiagramFlowTypes.Node, nodeCenter: Vector, v: Vector) {
               const xScale = (node.width || 0) / 2 / v.x
               const yScale = (node.height || 0) / 2 / v.y
 

package/src/theme-vars.css.ts

@@ -0,0 +1,81 @@
+import { createGlobalThemeContract } from '@vanilla-extract/css'
+
+export const vars = createGlobalThemeContract({
+  safariAnimationHook: 'safari-animation-hook',
+  default: {
+    font: 'default-font-family',
+  },
+  likec4: {
+    font: 'font-family',
+    background: {
+      color: 'background-color',
+      pattern: {
+        color: 'background-pattern-color',
+      },
+    },
+  },
+  compound: {
+    font: 'compound-font-family',
+    titleColor: 'compound-title-color',
+  },
+  element: {
+    font: 'element-font-family',
+    fill: 'element-fill',
+    stroke: 'element-stroke',
+    hiContrast: 'element-hiContrast',
+    loContrast: 'element-loContrast',
+  },
+  relation: {
+    lineColor: 'relation-lineColor',
+    labelColor: 'relation-labelColor',
+    labelBgColor: 'relation-labelBg',
+  },
+  optionsPanel: {
+    top: 'options-webview-top',
+    right: 'options-webview-right',
+  },
+  navigationPanel: {
+    top: 'navigation-webview-top',
+    left: 'navigation-webview-left',
+  },
+}, (value) => `likec4-${value}`)
+
+export const xyvars = createGlobalThemeContract({
+  background: {
+    color: 'background-color',
+    pattern: {
+      color: 'background-pattern-color',
+      // dots: 'background-pattern-dots-color',
+      // lines: 'background-pattern-lines-color',
+      // cross: 'background-pattern-cross-color'
+    },
+  },
+  edge: {
+    stroke: 'edge-stroke',
+    strokeSelected: 'edge-stroke-selected',
+    labelColor: 'edge-label-color',
+    labelBgColor: 'edge-label-background-color',
+    strokeWidth: 'edge-stroke-width',
+  },
+  node: {
+    color: 'node-color',
+    border: 'node-border',
+    backgroundColor: 'node-background-color',
+    groupBackgroundColor: 'node-group-background-color',
+    boxshadowHover: 'node-boxshadow-hover',
+    boxshadowSelected: 'node-boxshadow-selected',
+    borderRadius: 'node-border-radius',
+  },
+}, (value) => `xy-${value}`)
+
+export const whereLight = ':where([data-mantine-color-scheme="light"])'
+export const whereDark = ':where([data-mantine-color-scheme="dark"])'
+
+export const easings = {
+  out: 'cubic-bezier(0, 0, 0.40, 1)',
+  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)',
+}
+
+export const transitions = {
+  fast: `all 130ms ${easings.inOut}`,
+}

package/src/theme-vars.ts

@@ -1,85 +1,12 @@
 import { themeToVars } from '@mantine/vanilla-extract'
-import { createGlobalThemeContract } from '@vanilla-extract/css'
 
-export const vars = createGlobalThemeContract({
-  safariAnimationHook: 'safari-animation-hook',
-  default: {
-    font: 'default-font-family'
-  },
-  likec4: {
-    font: 'font-family',
-    background: {
-      color: 'background-color',
-      pattern: {
-        color: 'background-pattern-color'
-      }
-    }
-  },
-  compound: {
-    font: 'compound-font-family',
-    titleColor: 'compound-title-color'
-  },
-  element: {
-    font: 'element-font-family',
-    fill: 'element-fill',
-    stroke: 'element-stroke',
-    hiContrast: 'element-hiContrast',
-    loContrast: 'element-loContrast'
-  },
-  relation: {
-    lineColor: 'relation-lineColor',
-    labelColor: 'relation-labelColor',
-    labelBgColor: 'relation-labelBg'
-  },
-  optionsPanel: {
-    top: 'options-webview-top',
-    right: 'options-webview-right'
-  },
-  navigationPanel: {
-    top: 'navigation-webview-top',
-    left: 'navigation-webview-left'
-  }
-}, (value) => `likec4-${value}`)
+export {
+  easings,
+  transitions,
+  vars,
+  whereDark,
+  whereLight,
+  xyvars,
+} from './theme-vars.css'
 
-export const xyvars = createGlobalThemeContract({
-  background: {
-    color: 'background-color',
-    pattern: {
-      color: 'background-pattern-color'
-      // dots: 'background-pattern-dots-color',
-      // lines: 'background-pattern-lines-color',
-      // cross: 'background-pattern-cross-color'
-    }
-  },
-  edge: {
-    stroke: 'edge-stroke',
-    strokeSelected: 'edge-stroke-selected',
-    labelColor: 'edge-label-color',
-    labelBgColor: 'edge-label-background-color',
-    strokeWidth: 'edge-stroke-width'
-  },
-  node: {
-    color: 'node-color',
-    border: 'node-border',
-    backgroundColor: 'node-background-color',
-    groupBackgroundColor: 'node-group-background-color',
-    boxshadowHover: 'node-boxshadow-hover',
-    boxshadowSelected: 'node-boxshadow-selected',
-    borderRadius: 'node-border-radius'
-  }
-}, (value) => `xy-${value}`)
-
-export const whereLight = ':where([data-mantine-color-scheme="light"])'
-export const whereDark = ':where([data-mantine-color-scheme="dark"])'
-
-export const easings = {
-  out: 'cubic-bezier(0, 0, 0.40, 1)',
-  inOut: 'cubic-bezier(0.50, 0, 0.2, 1)'
-}
-
-export const transitions = {
-  fast: `all 130ms ${easings.inOut}`
-}
-
-// we need only variables names
 export const mantine = themeToVars({})