@likec4/diagram 1.30.0 → 1.31.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +324 -5
- package/bundle/chunk-BBzMXzCg.js +21383 -0
- package/bundle/custom.js +62 -0
- package/bundle/index.js +17459 -38163
- package/dist/LikeC4CustomColors.js +2 -2
- package/dist/LikeC4Diagram.d.ts +1 -1
- package/dist/LikeC4Diagram.js +4 -2
- package/dist/LikeC4Diagram.props.d.ts +6 -1
- package/dist/LikeC4ModelProvider.d.ts +3 -3
- package/dist/LikeC4ModelProvider.js +0 -1
- package/dist/StaticLikeC4Diagram.d.ts +1 -1
- package/dist/base/BaseXYFlow.js +3 -3
- package/dist/base/primitives/compound/CompoundActionButton.d.ts +3 -2
- package/dist/base/primitives/compound/CompoundDetailsButton.d.ts +3 -2
- package/dist/base/primitives/compound/CompoundNodeContainer.d.ts +7 -3
- package/dist/base/primitives/compound/CompoundNodeContainer.js +3 -2
- package/dist/base/primitives/customEdge.d.ts +2 -35
- package/dist/base/primitives/customEdge.js +2 -2
- package/dist/base/primitives/customNode.d.ts +2 -2
- package/dist/base/primitives/customNode.js +9 -2
- package/dist/base/primitives/edge/EdgeContainer.js +0 -1
- package/dist/base/primitives/edge/EdgeLabel.js +0 -1
- package/dist/base/primitives/edge/EdgeLabelContainer.js +0 -2
- package/dist/base/primitives/edge/EdgePath.js +2 -2
- package/dist/base/primitives/element/ElementNodeContainer.d.ts +24 -22
- package/dist/base/primitives/element/ElementNodeContainer.js +66 -68
- package/dist/base/primitives/element/ElementShape.d.ts +8 -4
- package/dist/base/primitives/element/ElementShape.js +4 -3
- package/dist/base/primitives/element/ElementTitle.css.d.ts +1 -1
- package/dist/base/primitives/element/ElementTitle.js +0 -1
- package/dist/base/types.d.ts +5 -5
- package/dist/bundle/LikeC4View.js +6 -3
- package/dist/bundle/LikeC4View.props.d.ts +5 -1
- package/dist/bundle/ReactLikeC4.js +1 -2
- package/dist/bundle/ShadowRoot.js +3 -3
- package/dist/bundle/custom.d.ts +1 -0
- package/dist/bundle/index.d.ts +3 -1
- package/dist/bundle/index.js +9 -0
- package/dist/bundle/styles.css.js +5 -5
- package/dist/components/SearchControl.js +2 -2
- package/dist/context/ControlsCustomLayout.js +0 -1
- package/dist/context/DiagramEventHandlers.js +5 -5
- package/dist/context/DiagramFeatures.d.ts +2 -4
- package/dist/context/DiagramFeatures.js +15 -16
- package/dist/context/EnsureMantine.js +9 -4
- package/dist/context/FramerMotionConfig.js +0 -1
- package/dist/context/IconRenderer.js +7 -7
- package/dist/context/ReduceGraphics.js +6 -6
- package/dist/context/RootContainer.js +5 -5
- package/dist/context/index.d.ts +1 -1
- package/dist/custom/components.d.ts +5 -0
- package/dist/custom/customNodes.d.ts +218 -0
- package/dist/custom/hooks.d.ts +10 -0
- package/dist/custom/index.d.ts +4 -0
- package/dist/hooks/safeContext.js +3 -3
- package/dist/hooks/useCurrentViewId.d.ts +5 -1
- package/dist/hooks/useCurrentViewId.js +1 -2
- package/dist/hooks/useDiagram.d.ts +14 -12544
- package/dist/hooks/useDiagram.js +3 -5
- package/dist/hooks/useMantinePortalProps.js +2 -2
- package/dist/hooks/useSetState.js +3 -3
- package/dist/hooks/useUpdateEffect.js +0 -1
- package/dist/hooks/useXYFlow.d.ts +64 -64
- package/dist/hooks/useXYFlow.js +2 -2
- package/dist/index.d.ts +2 -4
- package/dist/index.js +8 -3
- package/dist/likec4diagram/DiagramUI.js +2 -2
- package/dist/likec4diagram/DiagramXYFlow.d.ts +1 -1
- package/dist/likec4diagram/DiagramXYFlow.js +25 -7
- package/dist/likec4diagram/custom/edges/NotePopover.js +2 -2
- package/dist/likec4diagram/custom/edges/RelationshipEdge.d.ts +9 -13
- package/dist/likec4diagram/custom/edges/RelationshipEdge.js +8 -8
- package/dist/likec4diagram/custom/edges/RelationshipsDropdownMenu.js +14 -12
- package/dist/likec4diagram/custom/index.d.ts +15 -19
- package/dist/likec4diagram/custom/index.js +3 -3
- package/dist/likec4diagram/custom/nodes/CompoundActions.js +2 -2
- package/dist/likec4diagram/custom/nodes/ElementActions.d.ts +27 -4
- package/dist/likec4diagram/custom/nodes/ElementActions.js +67 -53
- package/dist/likec4diagram/custom/nodes/index.d.ts +8 -0
- package/dist/likec4diagram/custom/nodes/nodes.d.ts +10 -0
- package/dist/likec4diagram/custom/nodes/{nodeTypes.js → nodes.js} +39 -39
- package/dist/likec4diagram/custom/nodes/toolbar/ColorButton.js +2 -2
- package/dist/likec4diagram/custom/nodes/toolbar/CompoundToolbar.js +6 -7
- package/dist/likec4diagram/custom/nodes/toolbar/ElementToolbar.js +3 -3
- package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.d.ts +3 -2
- package/dist/likec4diagram/custom/nodes/toolbar/Toolbar.js +2 -2
- package/dist/likec4diagram/custom/nodes/toolbar/_shared.d.ts +2 -2
- package/dist/likec4diagram/custom/nodes/toolbar/_shared.js +2 -2
- package/dist/likec4diagram/types.d.ts +15 -7
- package/dist/likec4diagram/ui/controls/ChangeAutoLayoutButton.js +4 -4
- package/dist/likec4diagram/ui/controls/Controls.js +2 -2
- package/dist/likec4diagram/ui/diagram-title/DiagramTitlePanel.js +2 -2
- package/dist/likec4diagram/ui/notation/NotationPanel.js +6 -8
- package/dist/likec4diagram/ui/search/ElementsColumn.js +6 -7
- package/dist/likec4diagram/ui/search/LikeC4Search.js +3 -3
- package/dist/likec4diagram/ui/search/SearchInput.js +0 -1
- package/dist/likec4diagram/ui/search/_shared.css.d.ts +1 -1
- package/dist/likec4diagram/ui/search/state.js +3 -4
- package/dist/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.js +4 -4
- package/dist/likec4diagram/useLayoutConstraints.js +3 -4
- package/dist/likec4diagram/useViewToNodesEdges.js +2 -0
- package/dist/likec4model/LikeC4ModelContext.d.ts +2 -2
- package/dist/likec4model/LikeC4ModelContext.js +2 -2
- package/dist/likec4model/useLikeC4ElementsTree.d.ts +1 -1
- package/dist/likec4model/useLikeC4ElementsTree.js +3 -3
- package/dist/likec4model/useLikeC4Model.d.ts +1 -1
- package/dist/likec4model/useLikeC4Model.js +2 -2
- package/dist/overlays/Overlays.d.ts +2 -3
- package/dist/overlays/Overlays.js +5 -6
- package/dist/overlays/element-details/ElementDetailsCard.css.js +13 -9
- package/dist/overlays/element-details/ElementDetailsCard.js +98 -105
- package/dist/overlays/element-details/TabPanelDeployments.js +4 -4
- package/dist/overlays/element-details/TabPanelRelationships.js +2 -2
- package/dist/overlays/element-details/TabPanelStructure.js +3 -3
- package/dist/overlays/element-details/actor.d.ts +6905 -19690
- package/dist/overlays/element-details/actor.js +0 -2
- package/dist/overlays/element-details/actorContext.js +3 -3
- package/dist/overlays/overlay/Overlay.d.ts +11 -1
- package/dist/overlays/overlay/Overlay.js +8 -8
- package/dist/overlays/overlaysActor.d.ts +4 -2
- package/dist/overlays/overlaysActor.js +2 -1
- package/dist/overlays/relationship-details/RelationshipDetails.d.ts +4 -8
- package/dist/overlays/relationship-details/RelationshipDetails.js +12 -12
- package/dist/overlays/relationship-details/SelectEdge.js +2 -3
- package/dist/overlays/relationship-details/_types.d.ts +6 -5
- package/dist/overlays/relationship-details/actor.d.ts +3 -3
- package/dist/overlays/relationship-details/compute.js +3 -3
- package/dist/overlays/relationship-details/custom/edgeTypes.d.ts +4 -8
- package/dist/overlays/relationship-details/custom/edgeTypes.js +2 -2
- package/dist/overlays/relationship-details/custom/nodeTypes.d.ts +3 -31
- package/dist/overlays/relationship-details/hooks.d.ts +27 -27
- package/dist/overlays/relationship-details/hooks.js +4 -4
- package/dist/overlays/relationship-details/layout.js +2 -3
- package/dist/overlays/relationships-browser/RelationshipsBrowser.d.ts +4 -8
- package/dist/overlays/relationships-browser/RelationshipsBrowser.js +8 -8
- package/dist/overlays/relationships-browser/SelectElement.js +5 -5
- package/dist/overlays/relationships-browser/_types.d.ts +6 -5
- package/dist/overlays/relationships-browser/actor.d.ts +63 -428
- package/dist/overlays/relationships-browser/custom/edgeTypes.d.ts +4 -8
- package/dist/overlays/relationships-browser/custom/edgeTypes.js +2 -2
- package/dist/overlays/relationships-browser/custom/nodeTypes.d.ts +10 -14
- package/dist/overlays/relationships-browser/custom/nodeTypes.js +1 -2
- package/dist/overlays/relationships-browser/hooks.d.ts +4 -61
- package/dist/overlays/relationships-browser/hooks.js +4 -4
- package/dist/overlays/relationships-browser/layout.js +3 -4
- package/dist/state/DiagramActorProvider.js +3 -3
- package/dist/state/diagram-machine.d.ts +186 -10369
- package/dist/state/diagram-machine.js +2 -1
- package/dist/state/hotkeyActor.d.ts +4 -2
- package/dist/state/syncManualLayoutActor.d.ts +14 -3
- package/dist/state/syncManualLayoutActor.js +2 -1
- package/dist/state/types.d.ts +5 -4
- package/dist/state/utils.d.ts +1 -1
- package/dist/styles-font.css +1 -0
- package/dist/styles-min.css +1 -0
- package/dist/styles-xyflow.css +1 -0
- package/dist/styles.css +1 -0
- package/dist/styles.css2.js +3 -0
- package/package.json +46 -21
- package/panda.buildinfo.json +979 -0
- package/src/LikeC4Diagram.props.ts +7 -1
- package/src/LikeC4Diagram.tsx +2 -0
- package/src/LikeC4ModelProvider.tsx +3 -3
- package/src/StaticLikeC4Diagram.tsx +1 -0
- package/src/base/Background.tsx +0 -4
- package/src/base/primitives/compound/CompoundActionButton.tsx +7 -4
- package/src/base/primitives/compound/CompoundDetailsButton.tsx +7 -4
- package/src/base/primitives/compound/CompoundNodeContainer.tsx +8 -7
- package/src/base/primitives/customEdge.ts +1 -1
- package/src/base/primitives/{customNode.ts → customNode.tsx} +11 -3
- package/src/base/primitives/element/ElementNodeContainer.tsx +87 -80
- package/src/base/primitives/element/ElementShape.tsx +11 -10
- package/src/base/types.ts +28 -33
- package/src/bundle/LikeC4View.props.ts +6 -1
- package/src/bundle/LikeC4View.tsx +3 -0
- package/src/bundle/ReactLikeC4.tsx +1 -1
- package/src/bundle/custom.ts +1 -0
- package/src/bundle/index.ts +20 -1
- package/src/bundle/styles.css.ts +1 -1
- package/src/components/SearchControl.tsx +1 -1
- package/src/context/DiagramFeatures.tsx +12 -8
- package/src/context/EnsureMantine.tsx +13 -3
- package/src/context/IconRenderer.tsx +1 -1
- package/src/context/ReduceGraphics.tsx +6 -6
- package/src/context/index.ts +0 -1
- package/src/custom/components.ts +47 -0
- package/src/custom/customNodes.tsx +244 -0
- package/src/custom/hooks.ts +35 -0
- package/src/custom/index.ts +5 -0
- package/src/hooks/useCurrentViewId.ts +9 -1
- package/src/hooks/useDiagram.ts +30 -9
- package/src/index.ts +4 -8
- package/src/likec4diagram/DiagramXYFlow.tsx +28 -5
- package/src/likec4diagram/custom/edges/RelationshipEdge.tsx +1 -1
- package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx +9 -7
- package/src/likec4diagram/custom/{index.tsx → index.ts} +2 -2
- package/src/likec4diagram/custom/nodes/CompoundActions.tsx +2 -2
- package/src/likec4diagram/custom/nodes/ElementActions.tsx +100 -57
- package/src/likec4diagram/custom/nodes/index.ts +17 -0
- package/src/likec4diagram/custom/nodes/{nodeTypes.tsx → nodes.tsx} +52 -36
- package/src/likec4diagram/custom/nodes/toolbar/CompoundToolbar.tsx +3 -4
- package/src/likec4diagram/custom/nodes/toolbar/ElementToolbar.tsx +3 -3
- package/src/likec4diagram/custom/nodes/toolbar/Toolbar.tsx +5 -4
- package/src/likec4diagram/types.ts +19 -9
- package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.tsx +1 -1
- package/src/likec4diagram/ui/notation/NotationPanel.tsx +1 -2
- package/src/likec4diagram/ui/search/ElementsColumn.tsx +2 -4
- package/src/likec4diagram/ui/walkthrough/DynamicViewWalkthrough.tsx +1 -1
- package/src/likec4diagram/useViewToNodesEdges.ts +2 -0
- package/src/likec4model/LikeC4ModelContext.ts +2 -2
- package/src/likec4model/useLikeC4ElementsTree.ts +3 -1
- package/src/likec4model/useLikeC4Model.ts +1 -1
- package/src/overlays/Overlays.tsx +2 -3
- package/src/overlays/element-details/ElementDetailsCard.css.ts +14 -22
- package/src/overlays/element-details/ElementDetailsCard.tsx +18 -16
- package/src/overlays/overlay/Overlay.tsx +3 -4
- package/src/overlays/overlaysActor.ts +4 -3
- package/src/overlays/relationship-details/RelationshipDetails.tsx +1 -1
- package/src/overlays/relationship-details/SelectEdge.tsx +0 -2
- package/src/overlays/relationship-details/_types.ts +16 -13
- package/src/overlays/relationship-details/custom/edgeTypes.tsx +2 -2
- package/src/overlays/relationships-browser/_types.ts +18 -15
- package/src/overlays/relationships-browser/actor.ts +2 -2
- package/src/overlays/relationships-browser/custom/edgeTypes.tsx +2 -2
- package/src/overlays/relationships-browser/custom/nodeTypes.tsx +1 -2
- package/src/state/DiagramActorProvider.tsx +2 -2
- package/src/state/diagram-machine.ts +13 -8
- package/src/state/hotkeyActor.ts +4 -2
- package/src/state/syncManualLayoutActor.ts +9 -3
- package/src/state/types.ts +9 -3
- package/src/state/utils.ts +3 -3
- package/src/styles-min.css +2 -0
- package/src/styles-xyflow.css +1 -0
- package/dist/_virtual/_commonjsHelpers.js +0 -5
- package/dist/_virtual/default-map.js +0 -7
- package/dist/_virtual/index.js +0 -5
- package/dist/_virtual/index2.js +0 -3
- package/dist/_virtual/react.production.js +0 -3
- package/dist/_virtual/set.js +0 -5
- package/dist/_virtual/set2.js +0 -3
- package/dist/base/xyflowMachine.d.ts +0 -212
- package/dist/likec4diagram/custom/nodes/nodeTypes.d.ts +0 -8
- package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/default-map.js +0 -172
- package/dist/node_modules/.pnpm/mnemonist@0.40.3_patch_hash_5c12abb43fcff6fd81e53021b89075d53249640d165a2556cc1e58d71201a13a/node_modules/mnemonist/set.js +0 -369
- package/dist/node_modules/.pnpm/react@19.1.0/node_modules/react/cjs/react.production.js +0 -556
- package/dist/node_modules/.pnpm/react@19.1.0/node_modules/react/index.js +0 -15
- package/dist/packages/core/src/compute-view/relationships-view/compute.js +0 -123
- package/dist/packages/core/src/compute-view/relationships-view/utils.js +0 -68
- package/dist/packages/core/src/errors/index.js +0 -15
- package/dist/packages/core/src/model/connection/model/ConnectionModel.js +0 -121
- package/dist/packages/core/src/model/connection/model/find.js +0 -39
- package/dist/packages/core/src/model/connection/ops.js +0 -7
- package/dist/packages/core/src/utils/const.js +0 -3
- package/dist/packages/core/src/utils/fqn.js +0 -51
- package/dist/packages/core/src/utils/guards.js +0 -7
- package/dist/packages/core/src/utils/iterable/filter.js +0 -21
- package/dist/packages/core/src/utils/iterable/find.js +0 -21
- package/dist/packages/core/src/utils/iterable/map.js +0 -18
- package/dist/packages/core/src/utils/iterable/some.js +0 -21
- package/dist/packages/core/src/utils/iterable/to.js +0 -14
- package/dist/packages/core/src/utils/set.js +0 -48
- package/dist/packages/core/src/utils/string-hash.js +0 -13
- package/dist/styles.css.js +0 -3
- package/src/base/xyflowMachine.ts +0 -75
- /package/dist/{bundle/font.css.js → styles-font.css2.js} +0 -0
- /package/src/{bundle/font.css → styles-font.css} +0 -0
|
@@ -0,0 +1,979 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": "0.53.6",
|
|
3
|
+
"styles": {
|
|
4
|
+
"atomic": [
|
|
5
|
+
"background]___[value:dots",
|
|
6
|
+
"background]___[value:transparent",
|
|
7
|
+
"gap]___[value:20",
|
|
8
|
+
"background]___[value:transparent !important",
|
|
9
|
+
"--xy-background-color]___[value:transparent !important",
|
|
10
|
+
"--xy-background-color]___[value:{colors.mantine.colors.body}",
|
|
11
|
+
"--xy-background-pattern-color]___[value:{colors.mantine.colors.dark[5]}]___[cond:_dark",
|
|
12
|
+
"--xy-background-pattern-color]___[value:{colors.mantine.colors.gray[4]}]___[cond:_light",
|
|
13
|
+
"WebkitUserSelect]___[value:none]___[cond:& .react-flow__pane",
|
|
14
|
+
"display]___[value:none]___[cond:& .react-flow__attribution",
|
|
15
|
+
"position]___[value:absolute",
|
|
16
|
+
"top]___[value:5px",
|
|
17
|
+
"left]___[value:4px",
|
|
18
|
+
"display]___[value:none]___[cond:_smallZoom",
|
|
19
|
+
"stroke]___[value:2",
|
|
20
|
+
"top]___[value:[2px]",
|
|
21
|
+
"right]___[value:[2px]",
|
|
22
|
+
"opacity]___[value:0.75]___[cond:_whenHovered",
|
|
23
|
+
"opacity]___[value:1]___[cond:_hover",
|
|
24
|
+
"stroke]___[value:1.8",
|
|
25
|
+
"position]___[value:relative",
|
|
26
|
+
"width]___[value:100%",
|
|
27
|
+
"height]___[value:100%",
|
|
28
|
+
"padding]___[value:0",
|
|
29
|
+
"margin]___[value:0",
|
|
30
|
+
"border]___[value:transparent",
|
|
31
|
+
"pointerEvents]___[value:none",
|
|
32
|
+
"borderRadius]___[value:var(--_border-radius, 4px)]___[cond:_before",
|
|
33
|
+
"content]___[value:\" \"]___[cond:_before",
|
|
34
|
+
"position]___[value:absolute]___[cond:_before",
|
|
35
|
+
"top]___[value:0]___[cond:_before",
|
|
36
|
+
"left]___[value:0]___[cond:_before",
|
|
37
|
+
"width]___[value:100%]___[cond:_before",
|
|
38
|
+
"height]___[value:100%]___[cond:_before",
|
|
39
|
+
"border]___[value:transparent]___[cond:_before",
|
|
40
|
+
"background]___[value:likec4.palette.fill]___[cond:_before",
|
|
41
|
+
"backgroundClip]___[value:padding-box]___[cond:_before",
|
|
42
|
+
"transitionDelay]___[value:.075ms]___[cond:_before",
|
|
43
|
+
"transition]___[value:all {durations.slow} {easings.inOut}]___[cond:_noReduceGraphics<___>_before",
|
|
44
|
+
"transitionDelay]___[value:.2s]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
|
|
45
|
+
"transitionTimingFunction]___[value:in]___[cond:_noReduceGraphics<___>&[data-likec4-hovered='true']<___>_before",
|
|
46
|
+
"opacity]___[value:var(--_compound-opacity, 1)]___[cond:&:is([data-compound-transparent])<___>_before",
|
|
47
|
+
"borderWidth]___[value:calc(var(--_border-width, 2px) - 1px)]___[cond:&:is([data-compound-transparent])<___>_before",
|
|
48
|
+
"borderRadius]___[value:var(--_border-radius, 4px)",
|
|
49
|
+
"transition]___[value:all 250ms {easings.inOut}",
|
|
50
|
+
"cursor]___[value:default",
|
|
51
|
+
"top]___[value:0",
|
|
52
|
+
"left]___[value:0",
|
|
53
|
+
"borderStyle]___[value:dashed",
|
|
54
|
+
"borderWidth]___[value:[var(--_border-width, 2px)]",
|
|
55
|
+
"borderColor]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} var(--_border-opacity-percent, 100%), transparent)]",
|
|
56
|
+
"overflow]___[value:visible",
|
|
57
|
+
"visibility]___[value:hidden",
|
|
58
|
+
"visibility]___[value:visible]___[cond:_whenFocused",
|
|
59
|
+
"visibility]___[value:visible]___[cond:_whenSelected",
|
|
60
|
+
"display]___[value:none]___[cond:_whenPanning",
|
|
61
|
+
"stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 60%, {colors.likec4.palette.hiContrast})]",
|
|
62
|
+
"strokeWidth]___[value:4",
|
|
63
|
+
"fill]___[value:[none]",
|
|
64
|
+
"animationStyle]___[value:indicator",
|
|
65
|
+
"stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 80%, {colors.likec4.palette.hiContrast})]]___[cond:_light",
|
|
66
|
+
"boxShadow]___[value:0 4px 10px 0.5px rgba(0,0,0,0.1) , 0 2px 2px -1px rgba(0,0,0,0.4)]___[cond:_before<___>_noReduceGraphics",
|
|
67
|
+
"boxShadow]___[value:none]___[cond:_before<___>_whenSelected",
|
|
68
|
+
"boxShadow]___[value:none !important]___[cond:_before<___>_whenPanning",
|
|
69
|
+
"display]___[value:flex",
|
|
70
|
+
"alignItems]___[value:center",
|
|
71
|
+
"gap]___[value:6px",
|
|
72
|
+
"left]___[value:14px",
|
|
73
|
+
"top]___[value:4px",
|
|
74
|
+
"right]___[value:30px",
|
|
75
|
+
"width]___[value:auto",
|
|
76
|
+
"minHeight]___[value:30px",
|
|
77
|
+
"pointerEvents]___[value:all]___[cond::where(.react-flow__node.draggable) &",
|
|
78
|
+
"cursor]___[value:grab]___[cond::where(.react-flow__node.draggable) &",
|
|
79
|
+
"paddingLeft]___[value:22px]___[cond:.likec4-compound-node:has(.compound-action) &",
|
|
80
|
+
"flex]___[value:1",
|
|
81
|
+
"fontFamily]___[value:likec4.compound",
|
|
82
|
+
"fontWeight]___[value:600",
|
|
83
|
+
"fontSize]___[value:15px",
|
|
84
|
+
"textTransform]___[value:uppercase",
|
|
85
|
+
"letterSpacing]___[value:0.2px",
|
|
86
|
+
"color]___[value:likec4.palette.loContrast",
|
|
87
|
+
"color]___[value:[color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]]___[cond:[data-compound-title-inverse] &",
|
|
88
|
+
"color]___[value:likec4.palette.stroke]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
89
|
+
"flex]___[value:0 0 20px",
|
|
90
|
+
"height]___[value:20px",
|
|
91
|
+
"width]___[value:20px",
|
|
92
|
+
"justifyContent]___[value:center",
|
|
93
|
+
"mixBlendMode]___[value:hard-light",
|
|
94
|
+
"mixBlendMode]___[value:normal]___[cond:_reduceGraphicsOnPan",
|
|
95
|
+
"width]___[value:100%]___[cond:& svg, & img",
|
|
96
|
+
"height]___[value:auto]___[cond:& svg, & img",
|
|
97
|
+
"maxHeight]___[value:100%]___[cond:& svg, & img",
|
|
98
|
+
"pointerEvents]___[value:none]___[cond:& svg, & img",
|
|
99
|
+
"filter]___[value:drop-shadow(0 0 3px rgb(0 0 0 / 12%))]___[cond:& svg, & img",
|
|
100
|
+
"filter]___[value:drop-shadow(0 1px 8px rgb(0 0 0 / 8%))]___[cond:& svg, & img<___>xs",
|
|
101
|
+
"filter]___[value:drop-shadow(1px 1px 16px rgb(0 0 0 / 3%))]___[cond:& svg, & img<___>sm",
|
|
102
|
+
"filter]___[value:none]___[cond:& svg, & img<___>_reduceGraphicsOnPan",
|
|
103
|
+
"objectFit]___[value:contain]___[cond:& img",
|
|
104
|
+
"truncate]___[value:end",
|
|
105
|
+
"transitionDuration]___[value:normal",
|
|
106
|
+
"--actionbtn-color]___[value:color-mix(in srgb, {colors.likec4.palette.loContrast} 60%, {colors.likec4.palette.fill})]___[cond:[data-compound-title-inverse] &<___>_dark",
|
|
107
|
+
"--actionbtn-color]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
108
|
+
"--actionbtn-color-hovered]___[value:{colors.likec4.palette.stroke}]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
109
|
+
"--actionbtn-color-hovered-btn]___[value:{colors.likec4.palette.hiContrast}]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
110
|
+
"--actionbtn-bg-hovered]___[value:{colors.likec4.palette.fill/50}]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
111
|
+
"--actionbtn-bg-hovered-btn]___[value:{colors.likec4.palette.fill}]___[cond:[data-compound-title-inverse] &<___>_light",
|
|
112
|
+
"transitionDelay]___[value:0.2s",
|
|
113
|
+
"transitionDelay]___[value:0s]___[cond:_hover",
|
|
114
|
+
"likec4RelationPalette]___[value:gray",
|
|
115
|
+
"top]___[value:4",
|
|
116
|
+
"right]___[value:4",
|
|
117
|
+
"userSelect]___[value:all",
|
|
118
|
+
"textAlign]___[value:left",
|
|
119
|
+
"whiteSpaceCollapse]___[value:preserve-breaks",
|
|
120
|
+
"textWrap]___[value:pretty",
|
|
121
|
+
"lineHeight]___[value:1.25",
|
|
122
|
+
"--text-fz]___[value:{fontSizes.sm}",
|
|
123
|
+
"--text-fz]___[value:{fontSizes.md}]___[cond:md",
|
|
124
|
+
"pointerEvents]___[value:all",
|
|
125
|
+
"cursor]___[value:pointer",
|
|
126
|
+
"height]___[value:auto",
|
|
127
|
+
"background]___[value:[var(--xy-edge-label-background-color)]",
|
|
128
|
+
"color]___[value:[var(--xy-edge-label-color)]",
|
|
129
|
+
"border]___[value:0px solid transparent",
|
|
130
|
+
"borderRadius]___[value:4px",
|
|
131
|
+
"transform]___[value:var(--edge-translate)",
|
|
132
|
+
"transition]___[value:fast",
|
|
133
|
+
"transition]___[value:all 190ms {easings.inOut}]___[cond:&:is([data-likec4-hovered='true'])",
|
|
134
|
+
"transform]___[value:var(--edge-translate, translate(0px, 0px)) scale(1.12)]___[cond:&:is([data-likec4-hovered='true'])",
|
|
135
|
+
"transitionDelay]___[value:100ms]___[cond:&:is([data-likec4-hovered='true'])",
|
|
136
|
+
"mixBlendMode]___[value:plus-lighter]___[cond:_noReduceGraphics<___>_dark",
|
|
137
|
+
"mixBlendMode]___[value:screen]___[cond:_noReduceGraphics<___>_light",
|
|
138
|
+
"display]___[value:none]___[cond:_reduceGraphicsOnPan",
|
|
139
|
+
"fontFamily]___[value:likec4.relation",
|
|
140
|
+
"padding]___[value:3px 5px 5px 5px",
|
|
141
|
+
"flexDirection]___[value:column",
|
|
142
|
+
"width]___[value:max-content",
|
|
143
|
+
"maxWidth]___[value:100%",
|
|
144
|
+
"gap]___[value:4px",
|
|
145
|
+
"flexDirection]___[value:row",
|
|
146
|
+
"padding]___[value:0px",
|
|
147
|
+
"alignSelf]___[value:stretch",
|
|
148
|
+
"flex]___[value:0 0 auto",
|
|
149
|
+
"fontSize]___[value:14px",
|
|
150
|
+
"lineHeight]___[value:1",
|
|
151
|
+
"padding]___[value:5px 5px",
|
|
152
|
+
"textAlign]___[value:center",
|
|
153
|
+
"minWidth]___[value:22px",
|
|
154
|
+
"borderTopLeftRadius]___[value:4px",
|
|
155
|
+
"borderBottomLeftRadius]___[value:4px",
|
|
156
|
+
"background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 10%)]",
|
|
157
|
+
"fontVariantNumeric]___[value:tabular-nums",
|
|
158
|
+
"background]___[value:[color-mix(in srgb, {colors.likec4.relation.label.bg}, {colors.likec4.mixColor} 15%)]]___[cond::where([data-likec4-color=\"gray\"]) &<___>_dark",
|
|
159
|
+
"display]___[value:contents",
|
|
160
|
+
"display]___[value:none !important]___[cond:_empty",
|
|
161
|
+
"padding]___[value:2px 5px 4px 0px",
|
|
162
|
+
"lineHeight]___[value:1.185",
|
|
163
|
+
"padding]___[value:2px 6px 4px 0px",
|
|
164
|
+
"fontSize]___[value:11px",
|
|
165
|
+
"opacity]___[value:0.75",
|
|
166
|
+
"lineClamp]___[value:5",
|
|
167
|
+
"strokeOpacity]___[value:0",
|
|
168
|
+
"--xy-edge-stroke]___[value:{colors.likec4.relation.stroke}",
|
|
169
|
+
"--xy-edge-stroke-selected]___[value:{colors.likec4.relation.stroke.selected}",
|
|
170
|
+
"--xy-edge-label-color]___[value:{colors.likec4.relation.label}",
|
|
171
|
+
"--xy-edge-label-color]___[value:color-mix(in srgb, {colors.likec4.relation.label}, rgba(255 255 255 / 0.85) 40%)]___[cond:_light",
|
|
172
|
+
"--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/60}]___[cond:_light",
|
|
173
|
+
"--xy-edge-label-background-color]___[value:{colors.likec4.relation.label.bg/50}]___[cond:_dark",
|
|
174
|
+
"--xy-edge-stroke-width]___[value:3",
|
|
175
|
+
"--xy-edge-stroke]___[value:{colors.likec4.relation.stroke.selected}]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])",
|
|
176
|
+
"--xy-edge-stroke-width]___[value:4]___[cond:&:is([data-likec4-hovered='true'],[data-edge-active='true'])<___>_whenSelected",
|
|
177
|
+
"transition]___[value:none]___[cond:_reduceGraphics",
|
|
178
|
+
"strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 2)",
|
|
179
|
+
"strokeOpacity]___[value:0.08",
|
|
180
|
+
"transitionProperty]___[value:stroke-width, stroke-opacity",
|
|
181
|
+
"transitionDuration]___[value:fast",
|
|
182
|
+
"transitionTimingFunction]___[value:inOut",
|
|
183
|
+
"transitionTimingFunction]___[value:out]___[cond:_whenHovered",
|
|
184
|
+
"strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 4)]___[cond:_whenHovered",
|
|
185
|
+
"strokeOpacity]___[value:0.2]___[cond:_whenHovered",
|
|
186
|
+
"strokeWidth]___[value:calc(var(--xy-edge-stroke-width) + 6)]___[cond:_whenSelected",
|
|
187
|
+
"strokeOpacity]___[value:0.25]___[cond:_whenSelected",
|
|
188
|
+
"strokeOpacity]___[value:0.4]___[cond:_whenSelected<___>_whenHovered",
|
|
189
|
+
"fill]___[value:[var(--xy-edge-stroke)]",
|
|
190
|
+
"stroke]___[value:[var(--xy-edge-stroke)]",
|
|
191
|
+
"fill]___[value:[none!]",
|
|
192
|
+
"strokeDashoffset]___[value:10",
|
|
193
|
+
"transition]___[value:stroke 130ms ease-out,stroke-width 130ms ease-out]___[cond:_noReduceGraphics",
|
|
194
|
+
"animationStyle]___[value:xyedgeAnimated]___[cond:_whenHovered",
|
|
195
|
+
"animationDelay]___[value:450ms]___[cond:_whenHovered",
|
|
196
|
+
"animationStyle]___[value:xyedgeAnimated]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
|
|
197
|
+
"animationDelay]___[value:0ms]___[cond::where(.react-flow__edge.selected, [data-edge-active='true'], [data-edge-animated='true']) &",
|
|
198
|
+
"animationDirection]___[value:reverse]___[cond::where([data-edge-dir='back']) &",
|
|
199
|
+
"animationPlayState]___[value:paused]___[cond:_whenDimmed",
|
|
200
|
+
"animationName]___[value:none]___[cond:_smallZoom",
|
|
201
|
+
"strokeDasharray]___[value:none !important]___[cond:_whenPanning",
|
|
202
|
+
"animationName]___[value:none]___[cond:_whenPanning",
|
|
203
|
+
"--ai-bg]___[value:var(--xy-edge-label-background-color)",
|
|
204
|
+
"--ai-hover]___[value:color-mix(in srgb , var(--xy-edge-label-background-color), {colors.likec4.mixColor} 10%)",
|
|
205
|
+
"--ai-size]___[value:var(--ai-size-sm)",
|
|
206
|
+
"--ai-radius]___[value:var(--mantine-radius-sm)",
|
|
207
|
+
"translateY]___[value:1px]___[cond:_hover",
|
|
208
|
+
"scale]___[value:1.15]___[cond:_hover",
|
|
209
|
+
"translateY]___[value:-1px]___[cond:_active",
|
|
210
|
+
"scale]___[value:0.9]___[cond:_active",
|
|
211
|
+
"opacity]___[value:1]___[cond:_whenHovered",
|
|
212
|
+
"width]___[value:80%]___[cond:& .tabler-icon",
|
|
213
|
+
"height]___[value:80%]___[cond:& .tabler-icon",
|
|
214
|
+
"strokeWidth]___[value:2]___[cond:& .tabler-icon",
|
|
215
|
+
"top]___[value:calc(100% - 28px)",
|
|
216
|
+
"minHeight]___[value:28px",
|
|
217
|
+
"top]___[value:2",
|
|
218
|
+
"right]___[value:2",
|
|
219
|
+
"right]___[value:5px]___[cond:_shapeBrowser",
|
|
220
|
+
"top]___[value:14px]___[cond:_shapeCylinder",
|
|
221
|
+
"top]___[value:14px]___[cond:_shapeStorage",
|
|
222
|
+
"top]___[value:1px]___[cond:_shapeQueue",
|
|
223
|
+
"right]___[value:12px]___[cond:_shapeQueue",
|
|
224
|
+
"top]___[value:calc(100% - 4px)]___[cond:_before",
|
|
225
|
+
"height]___[value:24px]___[cond:_before",
|
|
226
|
+
"background]___[value:[transparent]]___[cond:_before",
|
|
227
|
+
"pointerEvents]___[value:all]___[cond:_before",
|
|
228
|
+
"outline]___[value:none]___[cond:_focusVisible",
|
|
229
|
+
"display]___[value:none]___[cond:_reduceGraphicsOnPan<___>_before",
|
|
230
|
+
"cursor]___[value:pointer]___[cond::where(.react-flow__node.selectable:not(.dragging)) &",
|
|
231
|
+
"visibility]___[value:hidden]___[cond:_smallZoom",
|
|
232
|
+
"stroke]___[value:likec4.palette.loContrast",
|
|
233
|
+
"strokeWidth]___[value:8",
|
|
234
|
+
"strokeOpacity]___[value:0.8",
|
|
235
|
+
"stroke]___[value:[color-mix(in srgb, {colors.likec4.palette.fill} 50%,rgb(121, 121, 121))]]___[cond:_light",
|
|
236
|
+
"visibility]___[value:visible]___[cond:_groupFocusVisible",
|
|
237
|
+
"animationStyle]___[value:indicator]___[cond:_whenSelected",
|
|
238
|
+
"fill]___[value:likec4.palette.fill",
|
|
239
|
+
"fill]___[value:likec4.palette.stroke",
|
|
240
|
+
"fill]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke} 90%, {colors.likec4.palette.fill})]",
|
|
241
|
+
"fill]___[value:likec4.palette.fill]___[cond:.shape-svg-multiple &",
|
|
242
|
+
"stroke]___[value:likec4.palette.stroke",
|
|
243
|
+
"transformOrigin]___[value:50% 50%",
|
|
244
|
+
"transformOrigin]___[value:75% 25%]___[cond:_shapeQueue",
|
|
245
|
+
"transformOrigin]___[value:50% 100%]___[cond:_shapeCylinder",
|
|
246
|
+
"transformOrigin]___[value:50% 100%]___[cond:_shapeStorage",
|
|
247
|
+
"transform]___[value:translate(14px, 14px) perspective(300px) translateZ(-8px)",
|
|
248
|
+
"filter]___[value:brightness(0.65) saturate(0.8)",
|
|
249
|
+
"stroke]___[value:[none]",
|
|
250
|
+
"display]___[value:none]___[cond:_whenSelected",
|
|
251
|
+
"display]___[value:none]___[cond:_whenFocused",
|
|
252
|
+
"transition]___[value:fill 120ms linear, filter 130ms {easings.inOut}",
|
|
253
|
+
"transitionDelay]___[value:0ms",
|
|
254
|
+
"filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.21)) drop-shadow(0 1px 1px color-mix(in srgb, {colors.likec4.palette.stroke} 40%, transparent)) drop-shadow(0 5px 3px rgba(0, 0, 0, 0.1)) ",
|
|
255
|
+
"filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond:_whenHovered",
|
|
256
|
+
"filter]___[value: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 3px rgba(0, 0, 0, 0.1)) drop-shadow(0 10px 10px rgba(0, 0, 0, 0.05)) ]___[cond::where([data-likec4-level='true']) &",
|
|
257
|
+
"filter]___[value:none]___[cond:_whenSelected",
|
|
258
|
+
"filter]___[value:none]___[cond:_smallZoom",
|
|
259
|
+
"transition]___[value:none]___[cond:_whenPanning",
|
|
260
|
+
"filter]___[value:none]___[cond:_whenPanning",
|
|
261
|
+
"textStyle]___[value:likec4.node.primary",
|
|
262
|
+
"color]___[value:likec4.palette.hiContrast",
|
|
263
|
+
"flex]___[value:0 1 auto",
|
|
264
|
+
"textStyle]___[value:likec4.node.secondary",
|
|
265
|
+
"textOverflow]___[value:ellipsis",
|
|
266
|
+
"overflow]___[value:hidden",
|
|
267
|
+
"display]___[value:none]___[cond:_shapeSizeXs",
|
|
268
|
+
"fontSize]___[value:calc(var(--likec4-text-size) * 0.635)",
|
|
269
|
+
"lineHeight]___[value:1.125",
|
|
270
|
+
"textWrap]___[value:balance",
|
|
271
|
+
"opacity]___[value:0.92",
|
|
272
|
+
"display]___[value:none]___[cond:_shapeSizeSm",
|
|
273
|
+
"flex]___[value:0 0 var(--icon-size)",
|
|
274
|
+
"height]___[value:var(--icon-size)",
|
|
275
|
+
"width]___[value:var(--icon-size)",
|
|
276
|
+
"alignSelf]___[value:flex-start",
|
|
277
|
+
"height]___[value:fit-content",
|
|
278
|
+
"width]___[value:fit-content",
|
|
279
|
+
"margin]___[value:0 auto",
|
|
280
|
+
"paddingTop]___[value:var(--likec4-spacing)",
|
|
281
|
+
"paddingBottom]___[value:var(--likec4-spacing)",
|
|
282
|
+
"paddingLeft]___[value:calc(var(--likec4-spacing) + 8px)",
|
|
283
|
+
"paddingRight]___[value:calc(var(--likec4-spacing) + 8px)",
|
|
284
|
+
"gap]___[value:12px",
|
|
285
|
+
"paddingLeft]___[value:46px]___[cond:_shapeQueue",
|
|
286
|
+
"paddingRight]___[value:16px]___[cond:_shapeQueue",
|
|
287
|
+
"paddingLeft]___[value:46px]___[cond:_shapeMobile",
|
|
288
|
+
"paddingRight]___[value:16px]___[cond:_shapeMobile",
|
|
289
|
+
"paddingTop]___[value:30px]___[cond:_shapeCylinder",
|
|
290
|
+
"paddingTop]___[value:30px]___[cond:_shapeStorage",
|
|
291
|
+
"paddingTop]___[value:32px]___[cond:_shapeBrowser",
|
|
292
|
+
"paddingBottom]___[value:28px]___[cond:_shapeBrowser",
|
|
293
|
+
"--icon-size]___[value:24px]___[cond:_shapeSizeXs",
|
|
294
|
+
"--icon-size]___[value:36px]___[cond:_shapeSizeSm",
|
|
295
|
+
"--icon-size]___[value:60px]___[cond:_shapeSizeMd",
|
|
296
|
+
"--icon-size]___[value:82px]___[cond:_shapeSizeLg",
|
|
297
|
+
"gap]___[value:16px]___[cond:_shapeSizeLg",
|
|
298
|
+
"--icon-size]___[value:90px]___[cond:_shapeSizeXl",
|
|
299
|
+
"gap]___[value:16px]___[cond:_shapeSizeXl",
|
|
300
|
+
"gap]___[value:16px",
|
|
301
|
+
"alignItems]___[value:stretch",
|
|
302
|
+
"flexWrap]___[value:nowrap",
|
|
303
|
+
"gap]___[value:8px",
|
|
304
|
+
"minWidth]___[value:calc(50% + var(--icon-size))",
|
|
305
|
+
"alignItems]___[value:flex-start",
|
|
306
|
+
"lineClamp]___[value:2",
|
|
307
|
+
"lineClamp]___[value:3",
|
|
308
|
+
"top]___[value:1rem",
|
|
309
|
+
"right]___[value:1rem",
|
|
310
|
+
"color]___[value:gray",
|
|
311
|
+
"--mantine-cursor-pointer]___[value:pointer",
|
|
312
|
+
"cursor]___[value:pointer]___[cond:& :where(.likec4-diagram, .likec4-compound-node, .likec4-element-node)",
|
|
313
|
+
"gap]___[value:micro",
|
|
314
|
+
"justifyContent]___[value:stretch",
|
|
315
|
+
"transitionProperty]___[value:all",
|
|
316
|
+
"border]___[value:1px dashed {colors.mantine.colors.defaultBorder}",
|
|
317
|
+
"borderRadius]___[value:sm",
|
|
318
|
+
"color]___[value:mantine.colors.gray[7]",
|
|
319
|
+
"color]___[value:mantine.colors.dark[1]]___[cond:_dark",
|
|
320
|
+
"transitionTimingFunction]___[value:out]___[cond:_hover",
|
|
321
|
+
"color]___[value:mantine.colors.defaultColor]___[cond:_hover",
|
|
322
|
+
"background]___[value:mantine.colors.defaultHover]___[cond:_hover",
|
|
323
|
+
"minHeight]___[value:22px",
|
|
324
|
+
"padding]___[value:2px 8px 2px 2px",
|
|
325
|
+
"padding]___[value:3px 16px 3px 3px",
|
|
326
|
+
"flex]___[value:1 1 100%",
|
|
327
|
+
"transition]___[value:transform 100ms {easings.inOut}",
|
|
328
|
+
"transitionTimingFunction]___[value:out]___[cond:_groupHover",
|
|
329
|
+
"transitionDelay]___[value:50ms]___[cond:_groupHover",
|
|
330
|
+
"transform]___[value:translateX(1px)]___[cond:_groupHover",
|
|
331
|
+
"flex]___[value:0",
|
|
332
|
+
"color]___[value:teal",
|
|
333
|
+
"truncate]___[value:true",
|
|
334
|
+
"height]___[value:30px",
|
|
335
|
+
"paddingLeft]___[value:sm",
|
|
336
|
+
"paddingRight]___[value:4px",
|
|
337
|
+
"border]___[value:1px solid",
|
|
338
|
+
"borderColor]___[value:mantine.colors.defaultBorder",
|
|
339
|
+
"borderColor]___[value:mantine.colors.gray[4]]___[cond:_light",
|
|
340
|
+
"borderColor]___[value:mantine.colors.dark[4]]___[cond:_dark",
|
|
341
|
+
"borderColor]___[value:mantine.colors.defaultBorder]___[cond:_hover",
|
|
342
|
+
"background]___[value:mantine.colors.default",
|
|
343
|
+
"background]___[value:mantine.colors.white]___[cond:_light",
|
|
344
|
+
"background]___[value:mantine.colors.dark[6]]___[cond:_dark",
|
|
345
|
+
"color]___[value:mantine.colors.text]___[cond:& .tabler-icon",
|
|
346
|
+
"transition]___[value:none !important]___[cond:_whenPanning",
|
|
347
|
+
"boxShadow]___[value:xs",
|
|
348
|
+
"boxShadow]___[value:sm]___[cond:_hover",
|
|
349
|
+
"boxShadow]___[value:none !important]___[cond:_whenPanning",
|
|
350
|
+
"fontSize]___[value:sm",
|
|
351
|
+
"fontWeight]___[value:500",
|
|
352
|
+
"paddingRight]___[value:10px",
|
|
353
|
+
"color]___[value:mantine.colors.placeholder",
|
|
354
|
+
"paddingRight]___[value:30px]___[cond:sm",
|
|
355
|
+
"paddingRight]___[value:50px]___[cond:md",
|
|
356
|
+
"padding]___[value:4px 7px",
|
|
357
|
+
"color]___[value:mantine.colors.gray[7]]___[cond:_light",
|
|
358
|
+
"borderColor]___[value:mantine.colors.gray[2]]___[cond:_light",
|
|
359
|
+
"color]___[value:mantine.colors.dark[0]]___[cond:_dark",
|
|
360
|
+
"borderColor]___[value:mantine.colors.dark[7]]___[cond:_dark",
|
|
361
|
+
"backgroundColor]___[value:mantine.colors.gray[2]/70]___[cond:_light",
|
|
362
|
+
"backgroundColor]___[value:mantine.colors.dark[8]/70]___[cond:_dark",
|
|
363
|
+
"backgroundColor]___[value:mantine.colors.gray[2]]___[cond:_groupHover<___>_light",
|
|
364
|
+
"backgroundColor]___[value:mantine.colors.dark[8]]___[cond:_groupHover<___>_dark",
|
|
365
|
+
"gap]___[value:xs",
|
|
366
|
+
"top]___[value:1",
|
|
367
|
+
"right]___[value:1",
|
|
368
|
+
"zIndex]___[value:9",
|
|
369
|
+
"offset]___[value:16",
|
|
370
|
+
"padding]___[value:xs",
|
|
371
|
+
"marginInline]___[value:auto",
|
|
372
|
+
"marginTop]___[value:2",
|
|
373
|
+
"padding]___[value:4",
|
|
374
|
+
"gap]___[value:0",
|
|
375
|
+
"overflowY]___[value:scroll",
|
|
376
|
+
"minWidth]___[value:250px",
|
|
377
|
+
"maxWidth]___[value:min(90vw, 500px)",
|
|
378
|
+
"gap]___[value:4",
|
|
379
|
+
"display]___[value:block",
|
|
380
|
+
"fontSize]___[value:xxs",
|
|
381
|
+
"whiteSpace]___[value:nowrap",
|
|
382
|
+
"padding]___[value:2px 4px",
|
|
383
|
+
"borderRadius]___[value:2",
|
|
384
|
+
"background]___[value:likec4.palette.fill/30",
|
|
385
|
+
"lineHeight]___[value:[1.11]",
|
|
386
|
+
"color]___[value:[color-mix(in srgb, {colors.likec4.palette.stroke}, {colors.likec4.mixColor} 60%)]]___[cond:_light",
|
|
387
|
+
"color]___[value:likec4.palette.loContrast]___[cond:_dark",
|
|
388
|
+
"fontSize]___[value:xs",
|
|
389
|
+
"opacity]___[value:0.65",
|
|
390
|
+
"position]___[value:bottom-start",
|
|
391
|
+
"top]___[value:5",
|
|
392
|
+
"right]___[value:6",
|
|
393
|
+
"gap]___[value:10px",
|
|
394
|
+
"gap]___[value:3",
|
|
395
|
+
"stroke]___[value:2.5",
|
|
396
|
+
"width]___[value:xs",
|
|
397
|
+
"mixBlendMode]___[value:normal",
|
|
398
|
+
"fill]___[value:likec4.relation.stroke",
|
|
399
|
+
"stroke]___[value:likec4.relation.stroke",
|
|
400
|
+
"fillOpacity]___[value:0.75",
|
|
401
|
+
"strokeWidth]___[value:1",
|
|
402
|
+
"cursor]___[value:grab",
|
|
403
|
+
"pointerEvents]___[value:auto",
|
|
404
|
+
"fillOpacity]___[value:1]___[cond:_hover",
|
|
405
|
+
"stroke]___[value:mantine.colors.primary.filledHover]___[cond:_hover",
|
|
406
|
+
"strokeWidth]___[value:10]___[cond:_hover",
|
|
407
|
+
"transition]___[value:stroke 100ms ease-out, stroke-width 100ms ease-out]___[cond:_hover",
|
|
408
|
+
"visibility]___[value:visible]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
|
|
409
|
+
"transition]___[value:fill-opacity 150ms ease-out, stroke 150ms ease-out, stroke-width 150ms ease-out]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
|
|
410
|
+
"transitionDelay]___[value:50ms]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
|
|
411
|
+
"fillOpacity]___[value:1]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
|
|
412
|
+
"strokeWidth]___[value:5]___[cond::where(.react-flow__edge.selected, [data-likec4-hovered='true']) &",
|
|
413
|
+
"cursor]___[value:grabbing",
|
|
414
|
+
"cursor]___[value:grabbing !important]___[cond:& *",
|
|
415
|
+
"cursor]___[value:grabbing !important]___[cond:& .react-flow__edge-interaction",
|
|
416
|
+
"position]___[value:right-end",
|
|
417
|
+
"offset]___[value:2",
|
|
418
|
+
"paddingInline]___[value:3",
|
|
419
|
+
"height]___[value:xs",
|
|
420
|
+
"--thickness]___[value:1px",
|
|
421
|
+
"borderBlockEndWidth]___[value:var(--thickness)",
|
|
422
|
+
"gap]___[value:2",
|
|
423
|
+
"justifyContent]___[value:flex-start",
|
|
424
|
+
"flexWrap]___[value:wrap",
|
|
425
|
+
"gap]___[value:6",
|
|
426
|
+
"marginTop]___[value:sm",
|
|
427
|
+
"color]___[value:dark",
|
|
428
|
+
"position]___[value:left-start",
|
|
429
|
+
"position]___[value:top-start",
|
|
430
|
+
"offset]___[value:4",
|
|
431
|
+
"paddingInline]___[value:5",
|
|
432
|
+
"paddingBottom]___[value:8",
|
|
433
|
+
"paddingTop]___[value:4",
|
|
434
|
+
"boxShadow]___[value:xl",
|
|
435
|
+
"paddingInline]___[value:4px",
|
|
436
|
+
"color]___[value:mantine.colors.dimmed",
|
|
437
|
+
"fontSize]___[value:10px",
|
|
438
|
+
"maxWidth]___[value:220px",
|
|
439
|
+
"position]___[value:right-start",
|
|
440
|
+
"boxShadow]___[value:lg",
|
|
441
|
+
"mainAxis]___[value:10",
|
|
442
|
+
"opacity]___[value:0.6",
|
|
443
|
+
"opacity]___[value:1",
|
|
444
|
+
"padding]___[value:8",
|
|
445
|
+
"paddingTop]___[value:6",
|
|
446
|
+
"marginBottom]___[value:10",
|
|
447
|
+
"marginBlock]___[value:10",
|
|
448
|
+
"paddingTop]___[value:100%",
|
|
449
|
+
"left]___[value:2",
|
|
450
|
+
"bottom]___[value:2",
|
|
451
|
+
"stroke]___[value:1.5",
|
|
452
|
+
"color]___[value:pink",
|
|
453
|
+
"color]___[value:orange",
|
|
454
|
+
"background]___[value:mantine.colors.orange.light",
|
|
455
|
+
"marginTop]___[value:xs",
|
|
456
|
+
"position]___[value:top",
|
|
457
|
+
"position]___[value:top-end",
|
|
458
|
+
"display]___[value:none]___[cond:_empty",
|
|
459
|
+
"left]___[value:1rem",
|
|
460
|
+
"pointerEvents]___[value:all]___[cond:& :where(button, .action-icon, [role='dialog'])",
|
|
461
|
+
"--ai-size]___[value:2rem]___[cond:& .action-icon",
|
|
462
|
+
"width]___[value:65%]___[cond:& .tabler-icon",
|
|
463
|
+
"height]___[value:65%]___[cond:& .tabler-icon",
|
|
464
|
+
"--ai-radius]___[value:0px]___[cond:_reduceGraphics<___>& .action-icon",
|
|
465
|
+
"boxShadow]___[value:md",
|
|
466
|
+
"boxShadow]___[value:none]___[cond:_whenPanning",
|
|
467
|
+
"flex]___[value:1 1 40%",
|
|
468
|
+
"padding]___[value:4px 6px",
|
|
469
|
+
"zIndex]___[value:1",
|
|
470
|
+
"background]___[value:mantine.colors.gray[2]",
|
|
471
|
+
"borderColor]___[value:mantine.colors.gray[4]",
|
|
472
|
+
"background]___[value:mantine.colors.dark[5]]___[cond:_dark",
|
|
473
|
+
"background]___[value:mantine.colors.gray[3]",
|
|
474
|
+
"boxShadow]___[value:inset 1px 1px 3px 0px #00000024",
|
|
475
|
+
"background]___[value:mantine.colors.dark[7]]___[cond:_dark",
|
|
476
|
+
"width]___[value:8",
|
|
477
|
+
"height]___[value:8",
|
|
478
|
+
"border]___[value:2px solid",
|
|
479
|
+
"borderColor]___[value:mantine.colors.gray[5]",
|
|
480
|
+
"borderRadius]___[value:3",
|
|
481
|
+
"transform]___[value:translate(-50%, -50%)",
|
|
482
|
+
"minWidth]___[value:200",
|
|
483
|
+
"maxWidth]___[value:calc(100vw - 16px)",
|
|
484
|
+
"minWidth]___[value:250]___[cond:sm",
|
|
485
|
+
"maxWidth]___[value:90vw]___[cond:sm",
|
|
486
|
+
"minWidth]___[value:350]___[cond:md",
|
|
487
|
+
"maxWidth]___[value:70vw]___[cond:md",
|
|
488
|
+
"backgroundColor]___[value:mantine.colors.body/80",
|
|
489
|
+
"backgroundColor]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
|
|
490
|
+
"backgroundColor]___[value:mantine.colors.body]___[cond:_whenPanning",
|
|
491
|
+
"color]___[value:mantine.colors.gray[5]]___[cond:_dark",
|
|
492
|
+
"padding]___[value:sm",
|
|
493
|
+
"padding]___[value:md",
|
|
494
|
+
"marginBottom]___[value:xs",
|
|
495
|
+
"height]___[value:sm",
|
|
496
|
+
"paddingBlock]___[value:2",
|
|
497
|
+
"opacity]___[value:0.7",
|
|
498
|
+
"marginBottom]___[value:sm",
|
|
499
|
+
"maxHeight]___[value:42",
|
|
500
|
+
"gap]___[value:sm",
|
|
501
|
+
"display]___[value:inline-block",
|
|
502
|
+
"bottom]___[value:0",
|
|
503
|
+
"right]___[value:0",
|
|
504
|
+
"--ai-radius]___[value:0px",
|
|
505
|
+
"--ai-radius]___[value:{radii.md}]___[cond:_noReduceGraphics",
|
|
506
|
+
"userSelect]___[value:none",
|
|
507
|
+
"maxWidth]___[value:calc(100vw - 20px)",
|
|
508
|
+
"minWidth]___[value:300]___[cond:sm",
|
|
509
|
+
"maxWidth]___[value:65vw]___[cond:sm",
|
|
510
|
+
"maxWidth]___[value:40vw]___[cond:md",
|
|
511
|
+
"padding]___[value:2xs",
|
|
512
|
+
"backgroundColor]___[value:transparent",
|
|
513
|
+
"transition]___[value:all 100ms ease-in",
|
|
514
|
+
"transition]___[value:all 120ms ease-out]___[cond:_hover",
|
|
515
|
+
"backgroundColor]___[value:mantine.colors.primary[2]/50]___[cond:_hover",
|
|
516
|
+
"backgroundColor]___[value:mantine.colors.dark[3]/40]___[cond:_dark<___>_hover",
|
|
517
|
+
"filter]___[value: drop-shadow(0 2px 3px rgb(0 0 0 / 22%)) drop-shadow(0 1px 8px rgb(0 0 0 / 10%)) ",
|
|
518
|
+
"paddingTop]___[value:0",
|
|
519
|
+
"paddingBottom]___[value:0",
|
|
520
|
+
"textTransform]___[value:lowercase",
|
|
521
|
+
"transition]___[value:all 150ms ease-in-out",
|
|
522
|
+
"--badge-radius]___[value:2px",
|
|
523
|
+
"--badge-fz]___[value:9.5px",
|
|
524
|
+
"--badge-padding-x]___[value:3px",
|
|
525
|
+
"--badge-height]___[value:13.5px",
|
|
526
|
+
"--badge-lh]___[value:1",
|
|
527
|
+
"--badge-bg]___[value:{colors.likec4.palette.fill}",
|
|
528
|
+
"--badge-color]___[value:{colors.likec4.palette.hiContrast}",
|
|
529
|
+
"boxShadow]___[value:none",
|
|
530
|
+
"paddingInline]___[value:xs",
|
|
531
|
+
"paddingBlock]___[value:sm",
|
|
532
|
+
"likec4Palette]___[value:primary",
|
|
533
|
+
"flex]___[value:0 0 70px",
|
|
534
|
+
"opacity]___[value:0.25",
|
|
535
|
+
"marginLeft]___[value:2",
|
|
536
|
+
"outline]___[value:none",
|
|
537
|
+
"marginBottom]___[value:8px",
|
|
538
|
+
"containerName]___[value:likec4-tree",
|
|
539
|
+
"containerType]___[value:inline-size",
|
|
540
|
+
"alignItems]___[value:baseline",
|
|
541
|
+
"outline]___[value:none !important",
|
|
542
|
+
"marginTop]___[value:8px",
|
|
543
|
+
"flexDirection]___[value:column-reverse]___[cond:@container likec4-tree (max-width: 450px)",
|
|
544
|
+
"alignItems]___[value:flex-start]___[cond:@container likec4-tree (max-width: 450px)",
|
|
545
|
+
"gap]___[value:2]___[cond:@container likec4-tree (max-width: 450px)",
|
|
546
|
+
"lineHeight]___[value:1.3",
|
|
547
|
+
"padding]___[value:1px 5px",
|
|
548
|
+
"background]___[value:mantine.colors.dark[9]/30",
|
|
549
|
+
"background]___[value:mantine.colors.gray[3]/20]___[cond:_light",
|
|
550
|
+
"--likec4-icon-size]___[value:24px",
|
|
551
|
+
"--likec4-icon-size]___[value:18px]___[cond:@container likec4-tree (max-width: 450px)",
|
|
552
|
+
"lineHeight]___[value:1.1",
|
|
553
|
+
"display]___[value:none]___[cond:@container likec4-tree (max-width: 450px)",
|
|
554
|
+
"maxWidth]___[value:8xl",
|
|
555
|
+
"paddingInline]___[value:4",
|
|
556
|
+
"paddingInline]___[value:6]___[cond:md",
|
|
557
|
+
"paddingInline]___[value:8]___[cond:lg",
|
|
558
|
+
"stroke]___[value:3.5",
|
|
559
|
+
"lineClamp]___[value:1",
|
|
560
|
+
"position]___[value:fixed",
|
|
561
|
+
"zIndex]___[value:900",
|
|
562
|
+
"inset]___[value:0px",
|
|
563
|
+
"backgroundColor]___[value:[rgb(34 34 34 / 0.95)]",
|
|
564
|
+
"backdropFilter]___[value:auto",
|
|
565
|
+
"backdropBlur]___[value:10px",
|
|
566
|
+
"backgroundColor]___[value:[rgb(255 255 255 / 0.92 )]]___[cond:_light",
|
|
567
|
+
"containerName]___[value:likec4-search",
|
|
568
|
+
"containerType]___[value:size",
|
|
569
|
+
"zIndex]___[value:901",
|
|
570
|
+
"maxHeight]___[value:100vh",
|
|
571
|
+
"gap]___[value:md",
|
|
572
|
+
"paddingTop]___[value:32px",
|
|
573
|
+
"paddingLeft]___[value:16px",
|
|
574
|
+
"paddingRight]___[value:16px",
|
|
575
|
+
"background]___[value:mantine.colors.gray[3]/55]___[cond:_focusWithin",
|
|
576
|
+
"background]___[value:mantine.colors.dark[4]/55]___[cond:_focusWithin<___>_dark",
|
|
577
|
+
"inset]___[value:0",
|
|
578
|
+
"backgroundColor]___[value:[rgb(34 34 34 / 0.7)]",
|
|
579
|
+
"zIndex]___[value:902",
|
|
580
|
+
"backgroundColor]___[value:[rgb(255 255 255 / 0.6)]]___[cond:_light",
|
|
581
|
+
"top]___[value:2rem",
|
|
582
|
+
"left]___[value:50%",
|
|
583
|
+
"maxWidth]___[value:600px",
|
|
584
|
+
"minWidth]___[value:200px",
|
|
585
|
+
"transform]___[value:translateX(-50%)",
|
|
586
|
+
"zIndex]___[value:903",
|
|
587
|
+
"marginTop]___[value:32px]___[cond:& + &",
|
|
588
|
+
"height]___[value:100cqh]___[cond:xs",
|
|
589
|
+
"minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport",
|
|
590
|
+
"minHeight]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
|
|
591
|
+
"height]___[value:100%]___[cond:& .mantine-ScrollArea-viewport<___>& > div",
|
|
592
|
+
"paddingInline]___[value:sm",
|
|
593
|
+
"paddingBlock]___[value:md",
|
|
594
|
+
"display]___[value:grid",
|
|
595
|
+
"order]___[value:6",
|
|
596
|
+
"order]___[value:2",
|
|
597
|
+
"containerName]___[value:likec4-search-elements",
|
|
598
|
+
"flexGrow]___[value:1",
|
|
599
|
+
"paddingRight]___[value:xs",
|
|
600
|
+
"opacity]___[value:0.5",
|
|
601
|
+
"marginRight]___[value:4",
|
|
602
|
+
"marginRight]___[value:1",
|
|
603
|
+
"mainAxis]___[value:4",
|
|
604
|
+
"crossAxis]___[value:50",
|
|
605
|
+
"gap]___[value:8",
|
|
606
|
+
"srOnly]___[value:true",
|
|
607
|
+
"opacity]___[value:0.45]___[cond:&[data-disabled] .mantine-ThemeIcon-root",
|
|
608
|
+
"marginTop]___[value:4px",
|
|
609
|
+
"fontSize]___[value:13px",
|
|
610
|
+
"lineHeight]___[value:1.4",
|
|
611
|
+
"opacity]___[value:0.85]___[cond::where(.likec4-view-btn[data-disabled]) &",
|
|
612
|
+
"background]___[value:mantine.colors.primary[8]",
|
|
613
|
+
"borderColor]___[value:mantine.colors.primary[9]",
|
|
614
|
+
"background]___[value:mantine.colors.body",
|
|
615
|
+
"padding]___[value:12px 8px 12px 14px",
|
|
616
|
+
"minHeight]___[value:60px",
|
|
617
|
+
"outline]___[value:none]___[cond:_hover",
|
|
618
|
+
"borderColor]___[value:mantine.colors.primary[9]]___[cond:_hover",
|
|
619
|
+
"background]___[value:mantine.colors.primary[8]/60]___[cond:_hover",
|
|
620
|
+
"outline]___[value:none]___[cond:_focus",
|
|
621
|
+
"background]___[value:mantine.colors.primary[8]]___[cond:_focus",
|
|
622
|
+
"borderColor]___[value:mantine.colors.primary[9]]___[cond:_focus",
|
|
623
|
+
"outline]___[value:none]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
624
|
+
"background]___[value:mantine.colors.primary[8]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
625
|
+
"borderColor]___[value:mantine.colors.primary[9]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
626
|
+
"borderColor]___[value:transparent]___[cond:_dark",
|
|
627
|
+
"background]___[value:mantine.colors.dark[6]/80]___[cond:_dark",
|
|
628
|
+
"background]___[value:mantine.colors.white/80]___[cond:_light",
|
|
629
|
+
"borderColor]___[value:mantine.colors.primary[6]]___[cond:_light<___>_hover",
|
|
630
|
+
"backgroundColor]___[value:mantine.colors.primary[5]]___[cond:_light<___>_hover",
|
|
631
|
+
"color]___[value:mantine.colors.primary[0]]___[cond:_groupHover",
|
|
632
|
+
"color]___[value:mantine.colors.primary[0]]___[cond:_groupFocus",
|
|
633
|
+
"color]___[value:mantine.colors.primary[0]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
634
|
+
"color]___[value:mantine.colors.gray[6]]___[cond:_light",
|
|
635
|
+
"color]___[value:mantine.colors.primary[3]]___[cond:_light<___>_groupHover",
|
|
636
|
+
"color]___[value:mantine.colors.primary[3]]___[cond:_light<___>_groupFocus",
|
|
637
|
+
"color]___[value:mantine.colors.primary[3]]___[cond:_light<___>.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
638
|
+
"flex]___[value:0 0 var(--likec4-icon-size, 24px)",
|
|
639
|
+
"height]___[value:var(--likec4-icon-size, 24px)",
|
|
640
|
+
"width]___[value:var(--likec4-icon-size, 24px)",
|
|
641
|
+
"--ti-size]___[value:var(--likec4-icon-size, 24px)",
|
|
642
|
+
"strokeWidth]___[value:1.5]___[cond:&.likec4-shape-icon svg",
|
|
643
|
+
"fontSize]___[value:16px",
|
|
644
|
+
"opacity]___[value:0.4]___[cond::where([data-disabled]) &",
|
|
645
|
+
"color]___[value:mantine.colors.dark[1]",
|
|
646
|
+
"color]___[value:mantine.colors.primary[1]]___[cond:_groupHover",
|
|
647
|
+
"color]___[value:mantine.colors.primary[1]]___[cond:_groupFocus",
|
|
648
|
+
"color]___[value:mantine.colors.primary[1]]___[cond:.mantine-Tree-node:focus > .mantine-Tree-label &",
|
|
649
|
+
"color]___[value:mantine.colors.primary[0]]___[cond:_groupHover<___>_light",
|
|
650
|
+
"fontSize]___[value:12px",
|
|
651
|
+
"opacity]___[value:0.85]___[cond::where([data-disabled]) &",
|
|
652
|
+
"border]___[value:2px dashed",
|
|
653
|
+
"borderRadius]___[value:md",
|
|
654
|
+
"fontSize]___[value:md",
|
|
655
|
+
"paddingBlock]___[value:xl",
|
|
656
|
+
"bottom]___[value:0.5rem",
|
|
657
|
+
"gap]___[value:0.4rem",
|
|
658
|
+
"gap]___[value:0.6rem]___[cond:md",
|
|
659
|
+
"backdropFilter]___[value:blur(8px)",
|
|
660
|
+
"transition]___[value:all 175ms ease-in",
|
|
661
|
+
"transform]___[value:scale(1.1)]___[cond:_hover",
|
|
662
|
+
"transitionDuration]___[value:100ms]___[cond:_active",
|
|
663
|
+
"transform]___[value:scale(0.98) translateY(3px)]___[cond:_active",
|
|
664
|
+
"width]___[value:0.85em]___[cond:& .tabler-icon",
|
|
665
|
+
"height]___[value:0.85em]___[cond:& .tabler-icon",
|
|
666
|
+
"background]___[value:mantine.colors.primary.filled/65",
|
|
667
|
+
"background]___[value:mantine.colors.primary.filledHover/65]___[cond:_hover",
|
|
668
|
+
"background]___[value:mantine.colors.primary.filled/85]___[cond:_light",
|
|
669
|
+
"background]___[value:mantine.colors.primary.filledHover/85]___[cond:_light<___>_hover",
|
|
670
|
+
"borderColor]___[value:mantine.colors.orange[6]",
|
|
671
|
+
"borderWidth]___[value:4]___[cond:md",
|
|
672
|
+
"paddingInline]___[value:xl",
|
|
673
|
+
"paddingLeft]___[value:lg",
|
|
674
|
+
"paddingInline]___[value:md",
|
|
675
|
+
"paddingRight]___[value:lg",
|
|
676
|
+
"color]___[value:red",
|
|
677
|
+
"padding]___[value:xl",
|
|
678
|
+
"marginTop]___[value:xl",
|
|
679
|
+
"boxSizing]___[value:border-box",
|
|
680
|
+
"width]___[value:100vw",
|
|
681
|
+
"height]___[value:100vh",
|
|
682
|
+
"maxWidth]___[value:100vw",
|
|
683
|
+
"background]___[value:[transparent]",
|
|
684
|
+
"backdropFilter]___[value:auto]___[cond:_backdrop",
|
|
685
|
+
"backdropBlur]___[value:var(--_blur)]___[cond:_backdrop",
|
|
686
|
+
"backgroundColor]___[value:[rgb(36 36 36 / var(--_opacity, 5%))]]___[cond:_backdrop",
|
|
687
|
+
"gap]___[value:lg",
|
|
688
|
+
"backgroundColor]___[value:mantine.colors.body",
|
|
689
|
+
"backgroundColor]___[value:mantine.colors.dark[6]]___[cond:_dark",
|
|
690
|
+
"border]___[value:none",
|
|
691
|
+
"backgroundImage]___[value: linear-gradient(180deg, color-mix(in srgb, {colors.likec4.palette.fill} 60%, transparent), color-mix(in srgb, {colors.likec4.palette.fill} 20%, transparent) 8px, color-mix(in srgb, {colors.likec4.palette.fill} 14%, transparent) 20px, transparent 80px ), linear-gradient(180deg, {colors.likec4.palette.fill}, {colors.likec4.palette.fill} 4px, transparent 4px) ",
|
|
692
|
+
"cursor]___[value:move",
|
|
693
|
+
"fontFamily]___[value:likec4.element",
|
|
694
|
+
"fontOpticalSizing]___[value:auto",
|
|
695
|
+
"fontStyle]___[value:normal",
|
|
696
|
+
"fontSize]___[value:24px",
|
|
697
|
+
"lineHeight]___[value:xs",
|
|
698
|
+
"flex]___[value:0 0 40px",
|
|
699
|
+
"height]___[value:40px",
|
|
700
|
+
"width]___[value:40px",
|
|
701
|
+
"mixBlendMode]___[value:hard-light]___[cond:_dark",
|
|
702
|
+
"width]___[value:100%]___[cond:& :where(svg, img)",
|
|
703
|
+
"height]___[value:auto]___[cond:& :where(svg, img)",
|
|
704
|
+
"maxHeight]___[value:100%]___[cond:& :where(svg, img)",
|
|
705
|
+
"pointerEvents]___[value:none]___[cond:& :where(svg, img)",
|
|
706
|
+
"filter]___[value: drop-shadow(0 0 3px rgb(0 0 0 / 10%)) drop-shadow(0 1px 8px rgb(0 0 0 / 5%)) drop-shadow(1px 1px 16px rgb(0 0 0 / 2%)) ]___[cond:& :where(svg, img)",
|
|
707
|
+
"padding]___[value:10px 8px",
|
|
708
|
+
"border]___[value:1px dashed",
|
|
709
|
+
"--view-title-color]___[value:{colors.mantine.colors.dark[1]}",
|
|
710
|
+
"--icon-color]___[value:{colors.mantine.colors.dark[1]}]___[cond:_hover",
|
|
711
|
+
"--view-title-color]___[value:{colors.mantine.colors.defaultColor}]___[cond:_hover",
|
|
712
|
+
"--icon-color]___[value:{colors.mantine.colors.gray[6]}]___[cond:_light",
|
|
713
|
+
"--view-title-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light",
|
|
714
|
+
"--icon-color]___[value:{colors.mantine.colors.gray[7]}]___[cond:_light<___>_hover",
|
|
715
|
+
"transition]___[value:fast]___[cond:& .mantine-ThemeIcon-root",
|
|
716
|
+
"color]___[value:[var(--icon-color, {colors.mantine.colors.dark[2]})]]___[cond:& .mantine-ThemeIcon-root",
|
|
717
|
+
"--ti-size]___[value:22px]___[cond:& .mantine-ThemeIcon-root",
|
|
718
|
+
"color]___[value:mantine.colors.defaultColor]___[cond:& .mantine-ThemeIcon-root<___>_hover",
|
|
719
|
+
"transition]___[value:all 130ms {easings.inOut}]___[cond:& > *",
|
|
720
|
+
"transitionTimingFunction]___[value:out]___[cond:&:hover > *",
|
|
721
|
+
"transform]___[value:translateX(1.6px)]___[cond:&:hover > *",
|
|
722
|
+
"color]___[value:[var(--view-title-color, {colors.mantine.colors.gray[7]})]",
|
|
723
|
+
"background]___[value:mantine.colors.gray[1]",
|
|
724
|
+
"padding]___[value:4px",
|
|
725
|
+
"padding]___[value:6px 8px",
|
|
726
|
+
"background]___[value:mantine.colors.gray[3]]___[cond:_hover",
|
|
727
|
+
"transition]___[value:none]___[cond:&[data-active]",
|
|
728
|
+
"background]___[value:mantine.colors.white]___[cond:&[data-active]",
|
|
729
|
+
"boxShadow]___[value:xs]___[cond:&[data-active]",
|
|
730
|
+
"color]___[value:mantine.colors.defaultColor]___[cond:&[data-active]",
|
|
731
|
+
"color]___[value:mantine.colors.white]___[cond:_dark<___>_hover",
|
|
732
|
+
"background]___[value:mantine.colors.dark[6]]___[cond:_dark<___>_hover",
|
|
733
|
+
"color]___[value:mantine.colors.white]___[cond:_dark<___>&:is([data-active])",
|
|
734
|
+
"background]___[value:mantine.colors.dark[5]]___[cond:_dark<___>&:is([data-active])",
|
|
735
|
+
"paddingLeft]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
|
|
736
|
+
"paddingRight]___[value:4px]___[cond:&:not(:has(.mantine-ScrollArea-root))",
|
|
737
|
+
"width]___[value:100%]___[cond:& .mantine-ScrollArea-root",
|
|
738
|
+
"height]___[value:100%]___[cond:& .mantine-ScrollArea-root",
|
|
739
|
+
"paddingLeft]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
|
|
740
|
+
"paddingRight]___[value:4px]___[cond:& .mantine-ScrollArea-root<___>& > div",
|
|
741
|
+
"gridTemplateColumns]___[value:min-content 1fr",
|
|
742
|
+
"gridAutoRows]___[value:min-content max-content",
|
|
743
|
+
"gap]___[value:[20px 16px]",
|
|
744
|
+
"justifyItems]___[value:stretch",
|
|
745
|
+
"justifySelf]___[value:end",
|
|
746
|
+
"width]___[value:14px",
|
|
747
|
+
"height]___[value:14px",
|
|
748
|
+
"border]___[value:3.5px solid",
|
|
749
|
+
"borderColor]___[value:mantine.colors.dark[3]",
|
|
750
|
+
"borderTop]___[value:none",
|
|
751
|
+
"borderLeft]___[value:none",
|
|
752
|
+
"borderRadius]___[value:2px",
|
|
753
|
+
"bottom]___[value:2px",
|
|
754
|
+
"right]___[value:2px",
|
|
755
|
+
"cursor]___[value:se-resize",
|
|
756
|
+
"borderWidth]___[value:4px]___[cond:_hover",
|
|
757
|
+
"borderColor]___[value:mantine.colors.dark[1]]___[cond:_hover",
|
|
758
|
+
"marginTop]___[value:6",
|
|
759
|
+
"stroke]___[value:1.6",
|
|
760
|
+
"paddingTop]___[value:xs",
|
|
761
|
+
"marginBottom]___[value:sm]___[cond:&[data-level='1']",
|
|
762
|
+
"marginTop]___[value:0",
|
|
763
|
+
"marginBottom]___[value:0",
|
|
764
|
+
"transition]___[value:fast]___[cond:& > *",
|
|
765
|
+
"transitionTimingFunction]___[value:out]___[cond:_hover<___>& > :not([data-no-transform])",
|
|
766
|
+
"transform]___[value:translateX(1px)]___[cond:_hover<___>& > :not([data-no-transform])",
|
|
767
|
+
"height]___[value:36px",
|
|
768
|
+
"paddingInlineStart]___[value:16px",
|
|
769
|
+
"paddingInlineEnd]___[value:10px",
|
|
770
|
+
"color]___[value:mantine.colors.gray.lightColor]___[cond:_dark",
|
|
771
|
+
"background]___[value:mantine.colors.gray.lightHover]___[cond:_hover",
|
|
772
|
+
"transition]___[value:fast]___[cond:& .tabler-icon",
|
|
773
|
+
"width]___[value:90%]___[cond:& .tabler-icon",
|
|
774
|
+
"opacity]___[value:0.65]___[cond:& .tabler-icon",
|
|
775
|
+
"stroke]___[value:1.2",
|
|
776
|
+
"offset]___[value:0",
|
|
777
|
+
"paddingBlock]___[value:4",
|
|
778
|
+
"padding]___[value:3px 6px",
|
|
779
|
+
"background]___[value:likec4.palette.fill/75",
|
|
780
|
+
"lineHeight]___[value:1.2",
|
|
781
|
+
"background]___[value:mantine.colors.gray[1]]___[cond:_light",
|
|
782
|
+
"color]___[value:mantine.colors.orange[4]]___[cond:&[data-missing]",
|
|
783
|
+
"background]___[value:mantine.colors.orange[8]/15]___[cond:&[data-missing]",
|
|
784
|
+
"borderColor]___[value:mantine.colors.orange[5]/20]___[cond:&[data-missing]",
|
|
785
|
+
"color]___[value:mantine.colors.orange[8]]___[cond:&[data-missing]<___>_light",
|
|
786
|
+
"border]___[value:1px solid {colors.mantine.colors.defaultBorder}",
|
|
787
|
+
"borderColor]___[value:mantine.colors.gray[3]]___[cond:_light",
|
|
788
|
+
"content]___[value:\"scope:\"]___[cond:_before",
|
|
789
|
+
"left]___[value:8]___[cond:_before",
|
|
790
|
+
"fontSize]___[value:2xs]___[cond:_before",
|
|
791
|
+
"fontWeight]___[value:500]___[cond:_before",
|
|
792
|
+
"lineHeight]___[value:1]___[cond:_before",
|
|
793
|
+
"color]___[value:mantine.colors.dimmed]___[cond:_before",
|
|
794
|
+
"opacity]___[value:0.85]___[cond:_before",
|
|
795
|
+
"transform]___[value:translateY(-100%) translateY(-2px)]___[cond:_before",
|
|
796
|
+
"background]___[value:mantine.colors.gray[3]]___[cond:_light<___>& .mantine-SegmentedControl-root",
|
|
797
|
+
"fontSize]___[value:xl",
|
|
798
|
+
"minWidth]___[value:24",
|
|
799
|
+
"background]___[value:mantine.colors.dark[7]",
|
|
800
|
+
"color]___[value:mantine.colors.defaultColor",
|
|
801
|
+
"color]___[value:mantine.colors.dimmed]___[cond:&[data-zero]",
|
|
802
|
+
"background]___[value:mantine.colors.orange[8]/20]___[cond:&[data-missing]",
|
|
803
|
+
"alignItems]___[value:flex-end",
|
|
804
|
+
"marginBottom]___[value:4",
|
|
805
|
+
"top]___[value:12",
|
|
806
|
+
"right]___[value:12",
|
|
807
|
+
"paddingBlock]___[value:xs",
|
|
808
|
+
"display]___[value:inline-flex",
|
|
809
|
+
"borderStyle]___[value:solid]___[cond:_hover",
|
|
810
|
+
"transitionTimingFunction]___[value:out]___[cond:_hover<___>& > *",
|
|
811
|
+
"transform]___[value:translateX(1px)]___[cond:_hover<___>& > *",
|
|
812
|
+
"background]___[value:mantine.colors.defaultBorder/50",
|
|
813
|
+
"borderRadius]___[value:var(--_border-radius)",
|
|
814
|
+
"--_blur]___[value:0px",
|
|
815
|
+
"--_level]___[value:0",
|
|
816
|
+
"--_offset]___[value:0px",
|
|
817
|
+
"--_inset]___[value:calc((1 + var(--_level) * 0.75) * var(--_offset))",
|
|
818
|
+
"--_opacity]___[value:0%",
|
|
819
|
+
"cursor]___[value:zoom-out]___[cond:_backdrop",
|
|
820
|
+
"backdropFilter]___[value:blur(var(--_blur))]___[cond:_backdrop",
|
|
821
|
+
"backgroundColor]___[value:[rgb(34 34 34 / var(--_opacity))]]___[cond:_backdrop<___>_dark",
|
|
822
|
+
"backgroundColor]___[value:[rgb(15 15 15/ var(--_opacity))]]___[cond:_backdrop<___>_light",
|
|
823
|
+
"--_border-radius]___[value:0px]___[cond:smDown",
|
|
824
|
+
"border]___[value:none]___[cond:smDown",
|
|
825
|
+
"inset]___[value:0]___[cond:smDown",
|
|
826
|
+
"padding]___[value:0]___[cond:smDown",
|
|
827
|
+
"width]___[value:100vw]___[cond:smDown",
|
|
828
|
+
"height]___[value:100vh]___[cond:smDown",
|
|
829
|
+
"inset]___[value:[var(--_inset) var(--_inset) var(--_offset) var(--_inset)]]___[cond:sm",
|
|
830
|
+
"width]___[value:calc(100vw - 2 * var(--_inset))]___[cond:sm",
|
|
831
|
+
"height]___[value:calc(100vh - var(--_offset) - var(--_inset))]___[cond:sm",
|
|
832
|
+
"--_border-radius]___[value:6px]___[cond:sm",
|
|
833
|
+
"padding]___[value:6px]___[cond:sm",
|
|
834
|
+
"--_offset]___[value:1rem]___[cond:sm",
|
|
835
|
+
"--_offset]___[value:1rem]___[cond:md",
|
|
836
|
+
"--_offset]___[value:2rem]___[cond:lg",
|
|
837
|
+
"--_offset]___[value:4rem]___[cond:xl",
|
|
838
|
+
"containerName]___[value:overlay-dialog",
|
|
839
|
+
"border]___[value:0 solid transparent",
|
|
840
|
+
"borderRadius]___[value:calc(var(--_border-radius) - 2px)]___[cond:sm",
|
|
841
|
+
"position]___[value:top-right",
|
|
842
|
+
"position]___[value:top-left",
|
|
843
|
+
"marginLeft]___[value:sm",
|
|
844
|
+
"padding]___[value:6px 2px 0 2px",
|
|
845
|
+
"color]___[value:mantine.colors.text/90]___[cond:& .mantine-Text-root",
|
|
846
|
+
"fontSize]___[value:xs]___[cond:& .mantine-Text-root",
|
|
847
|
+
"fontWeight]___[value:500]___[cond:& .mantine-Text-root",
|
|
848
|
+
"lineHeight]___[value:1.2]___[cond:& .mantine-Text-root",
|
|
849
|
+
"paddingLeft]___[value:4",
|
|
850
|
+
"gridColumn]___[value:1",
|
|
851
|
+
"gridColumn]___[value:2",
|
|
852
|
+
"gridColumn]___[value:3",
|
|
853
|
+
"paddingRight]___[value:4",
|
|
854
|
+
"gridColumnStart]___[value:1",
|
|
855
|
+
"gridColumnEnd]___[value:4",
|
|
856
|
+
"borderBottom]___[value:1px solid",
|
|
857
|
+
"borderBottomColor]___[value:mantine.colors.defaultBorder",
|
|
858
|
+
"marginBottom]___[value:0px",
|
|
859
|
+
"padding]___[value:0 4px 5px 4px",
|
|
860
|
+
"fontSize]___[value:xxs]___[cond:& .mantine-Text-root",
|
|
861
|
+
"fontWeight]___[value:400]___[cond:& .mantine-Text-root",
|
|
862
|
+
"lineHeight]___[value:xs]___[cond:& .mantine-Text-root",
|
|
863
|
+
"color]___[value:mantine.colors.dimmed]___[cond:& .mantine-Text-root",
|
|
864
|
+
"borderBottom]___[value:none]___[cond:&:last-child .likec4-edge-label",
|
|
865
|
+
"marginBottom]___[value:0]___[cond:&:last-child .likec4-edge-label",
|
|
866
|
+
"transition]___[value:all 0.15s ease-in]___[cond:& > *",
|
|
867
|
+
"transition]___[value:all 0.15s ease-out]___[cond:&:is(:hover, [data-selected=true]) > *",
|
|
868
|
+
"cursor]___[value:pointer]___[cond:&:is(:hover, [data-selected=true]) > *",
|
|
869
|
+
"backgroundColor]___[value:mantine.colors.defaultHover]___[cond:&:is(:hover, [data-selected=true]) > *",
|
|
870
|
+
"gridTemplateColumns]___[value:1fr 30px 1fr",
|
|
871
|
+
"gap]___[value:10px 12px",
|
|
872
|
+
"justifyItems]___[value:start",
|
|
873
|
+
"maxHeight]___[value:70vh",
|
|
874
|
+
"maxHeight]___[value:calc(100cqh - 70px)]___[cond:xs",
|
|
875
|
+
"borderWidth]___[value:3px",
|
|
876
|
+
"backgroundColor]___[value:mantine.colors.gray[0]]___[cond:_hover",
|
|
877
|
+
"backgroundColor]___[value:mantine.colors.defaultHover]___[cond:_hover<___>_dark",
|
|
878
|
+
"color]___[value:mantine.colors.white]___[cond:_hover<___>_dark",
|
|
879
|
+
"paddingBlock]___[value:3",
|
|
880
|
+
"flex]___[value:1 0 auto",
|
|
881
|
+
"strokeWidth]___[value:5",
|
|
882
|
+
"border]___[value:3px dashed",
|
|
883
|
+
"likec4Palette]___[value:amber",
|
|
884
|
+
"likec4Palette]___[value:blue",
|
|
885
|
+
"likec4Palette]___[value:gray",
|
|
886
|
+
"likec4Palette]___[value:slate",
|
|
887
|
+
"likec4Palette]___[value:green",
|
|
888
|
+
"likec4Palette]___[value:indigo",
|
|
889
|
+
"likec4Palette]___[value:muted",
|
|
890
|
+
"likec4Palette]___[value:red",
|
|
891
|
+
"likec4Palette]___[value:secondary",
|
|
892
|
+
"likec4Palette]___[value:sky",
|
|
893
|
+
"likec4Palette]___[value:amber.1",
|
|
894
|
+
"likec4Palette]___[value:amber.2",
|
|
895
|
+
"likec4Palette]___[value:amber.3",
|
|
896
|
+
"likec4Palette]___[value:amber.4",
|
|
897
|
+
"likec4Palette]___[value:amber.5",
|
|
898
|
+
"likec4Palette]___[value:blue.1",
|
|
899
|
+
"likec4Palette]___[value:blue.2",
|
|
900
|
+
"likec4Palette]___[value:blue.3",
|
|
901
|
+
"likec4Palette]___[value:blue.4",
|
|
902
|
+
"likec4Palette]___[value:blue.5",
|
|
903
|
+
"likec4Palette]___[value:gray.1",
|
|
904
|
+
"likec4Palette]___[value:gray.2",
|
|
905
|
+
"likec4Palette]___[value:gray.3",
|
|
906
|
+
"likec4Palette]___[value:gray.4",
|
|
907
|
+
"likec4Palette]___[value:gray.5",
|
|
908
|
+
"likec4Palette]___[value:slate.1",
|
|
909
|
+
"likec4Palette]___[value:slate.2",
|
|
910
|
+
"likec4Palette]___[value:slate.3",
|
|
911
|
+
"likec4Palette]___[value:slate.4",
|
|
912
|
+
"likec4Palette]___[value:slate.5",
|
|
913
|
+
"likec4Palette]___[value:green.1",
|
|
914
|
+
"likec4Palette]___[value:green.2",
|
|
915
|
+
"likec4Palette]___[value:green.3",
|
|
916
|
+
"likec4Palette]___[value:green.4",
|
|
917
|
+
"likec4Palette]___[value:green.5",
|
|
918
|
+
"likec4Palette]___[value:indigo.1",
|
|
919
|
+
"likec4Palette]___[value:indigo.2",
|
|
920
|
+
"likec4Palette]___[value:indigo.3",
|
|
921
|
+
"likec4Palette]___[value:indigo.4",
|
|
922
|
+
"likec4Palette]___[value:indigo.5",
|
|
923
|
+
"likec4Palette]___[value:muted.1",
|
|
924
|
+
"likec4Palette]___[value:muted.2",
|
|
925
|
+
"likec4Palette]___[value:muted.3",
|
|
926
|
+
"likec4Palette]___[value:muted.4",
|
|
927
|
+
"likec4Palette]___[value:muted.5",
|
|
928
|
+
"likec4Palette]___[value:primary.1",
|
|
929
|
+
"likec4Palette]___[value:primary.2",
|
|
930
|
+
"likec4Palette]___[value:primary.3",
|
|
931
|
+
"likec4Palette]___[value:primary.4",
|
|
932
|
+
"likec4Palette]___[value:primary.5",
|
|
933
|
+
"likec4Palette]___[value:red.1",
|
|
934
|
+
"likec4Palette]___[value:red.2",
|
|
935
|
+
"likec4Palette]___[value:red.3",
|
|
936
|
+
"likec4Palette]___[value:red.4",
|
|
937
|
+
"likec4Palette]___[value:red.5",
|
|
938
|
+
"likec4Palette]___[value:secondary.1",
|
|
939
|
+
"likec4Palette]___[value:secondary.2",
|
|
940
|
+
"likec4Palette]___[value:secondary.3",
|
|
941
|
+
"likec4Palette]___[value:secondary.4",
|
|
942
|
+
"likec4Palette]___[value:secondary.5",
|
|
943
|
+
"likec4Palette]___[value:sky.1",
|
|
944
|
+
"likec4Palette]___[value:sky.2",
|
|
945
|
+
"likec4Palette]___[value:sky.3",
|
|
946
|
+
"likec4Palette]___[value:sky.4",
|
|
947
|
+
"likec4Palette]___[value:sky.5",
|
|
948
|
+
"likec4RelationPalette]___[value:amber",
|
|
949
|
+
"likec4RelationPalette]___[value:blue",
|
|
950
|
+
"likec4RelationPalette]___[value:slate",
|
|
951
|
+
"likec4RelationPalette]___[value:green",
|
|
952
|
+
"likec4RelationPalette]___[value:indigo",
|
|
953
|
+
"likec4RelationPalette]___[value:muted",
|
|
954
|
+
"likec4RelationPalette]___[value:primary",
|
|
955
|
+
"likec4RelationPalette]___[value:red",
|
|
956
|
+
"likec4RelationPalette]___[value:secondary",
|
|
957
|
+
"likec4RelationPalette]___[value:sky"
|
|
958
|
+
],
|
|
959
|
+
"recipes": {
|
|
960
|
+
"actionBtn": [
|
|
961
|
+
"size]___[value:md]___[recipe:actionBtn",
|
|
962
|
+
"radius]___[value:md]___[recipe:actionBtn",
|
|
963
|
+
"variant]___[value:filled]___[recipe:actionBtn",
|
|
964
|
+
"variant]___[value:transparent]___[recipe:actionBtn",
|
|
965
|
+
"size]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
|
|
966
|
+
"size]___[value:md]___[cond:_hover]___[recipe:actionBtn",
|
|
967
|
+
"reducedGraphics]___[value:md]___[recipe:actionBtn",
|
|
968
|
+
"radius]___[value:md]___[cond:_whenHovered]___[recipe:actionBtn",
|
|
969
|
+
"radius]___[value:md]___[cond:_hover]___[recipe:actionBtn",
|
|
970
|
+
"variant]___[value:transparent]___[cond:_whenHovered]___[recipe:actionBtn",
|
|
971
|
+
"variant]___[value:transparent]___[cond:_hover]___[recipe:actionBtn",
|
|
972
|
+
"reducedGraphics]___[value:transparent]___[recipe:actionBtn",
|
|
973
|
+
"variant]___[value:filled]___[cond:_whenHovered]___[recipe:actionBtn",
|
|
974
|
+
"variant]___[value:filled]___[cond:_hover]___[recipe:actionBtn",
|
|
975
|
+
"reducedGraphics]___[value:filled]___[recipe:actionBtn"
|
|
976
|
+
]
|
|
977
|
+
}
|
|
978
|
+
}
|
|
979
|
+
}
|