@likec4/diagram 1.6.1 → 1.7.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.
Files changed (49) hide show
  1. package/dist/LikeC4Diagram.d.ts +1 -1
  2. package/dist/LikeC4Diagram.props.d.ts +10 -11
  3. package/dist/hooks/useUpdateEffect.d.ts +1 -0
  4. package/dist/index.d.ts +1 -0
  5. package/dist/index.mjs +572 -464
  6. package/dist/state/DiagramContext.d.ts +746 -181
  7. package/dist/state/diagram-to-xyflow.d.ts +10 -0
  8. package/dist/state/diagramStore.d.ts +782 -202
  9. package/dist/style.css +273 -275
  10. package/dist/types.d.ts +20 -0
  11. package/dist/xyflow/EdgeMarkers.d.ts +1 -0
  12. package/dist/xyflow/FitviewOnDiagramChange.d.ts +1 -1
  13. package/dist/xyflow/XYFlow.d.ts +1 -4
  14. package/dist/xyflow/XYFlowEvents.d.ts +41 -12
  15. package/dist/xyflow/XYFlowInner.d.ts +0 -1
  16. package/dist/xyflow/edges/RelationshipEdge.d.ts +3 -3
  17. package/dist/xyflow/hooks/index.d.ts +0 -1
  18. package/dist/xyflow/hooks/useXYFlow.d.ts +27 -27
  19. package/dist/xyflow/types.d.ts +11 -19
  20. package/dist/xyflow/utils.d.ts +1 -0
  21. package/package.json +6 -6
  22. package/src/LikeC4Diagram.props.ts +17 -13
  23. package/src/LikeC4Diagram.tsx +62 -96
  24. package/src/globals.css.ts +10 -6
  25. package/src/hooks/useUpdateEffect.ts +16 -1
  26. package/src/index.ts +1 -0
  27. package/src/state/DiagramContext.tsx +19 -27
  28. package/src/{xyflow → state}/diagram-to-xyflow.ts +19 -18
  29. package/src/state/diagramStore.ts +404 -192
  30. package/src/types.ts +22 -0
  31. package/src/ui/BackwardForwardPanel.tsx +24 -7
  32. package/src/xyflow/EdgeMarkers.tsx +2 -0
  33. package/src/xyflow/FitviewOnDiagramChange.tsx +42 -75
  34. package/src/xyflow/SelectEdgesOnNodeFocus.tsx +1 -1
  35. package/src/xyflow/XYFlow.tsx +57 -32
  36. package/src/xyflow/XYFlowEvents.tsx +58 -10
  37. package/src/xyflow/XYFlowInner.tsx +8 -8
  38. package/src/xyflow/edges/RelationshipEdge.tsx +43 -29
  39. package/src/xyflow/edges/edges.css.ts +3 -3
  40. package/src/xyflow/edges/utils.ts +0 -1
  41. package/src/xyflow/hooks/index.ts +0 -1
  42. package/src/xyflow/hooks/useLayoutConstraints.ts +42 -65
  43. package/src/xyflow/nodes/element/ElementNode.tsx +0 -4
  44. package/src/xyflow/nodes/element/element.css.ts +8 -6
  45. package/src/xyflow/types.ts +14 -32
  46. package/src/xyflow/utils.ts +4 -0
  47. package/dist/xyflow/SyncWithDiagram.d.ts +0 -4
  48. package/dist/xyflow/diagram-to-xyflow.d.ts +0 -7
  49. package/src/xyflow/SyncWithDiagram.tsx +0 -85
package/dist/style.css CHANGED
@@ -637,53 +637,53 @@ svg.react-flow__connectionline {
637
637
  --likec4-relation-labelColor: #60a5fa;
638
638
  }
639
639
  :where([data-likec4-color='primary'][data-compound-depth='1']) {
640
- --likec4-element-fill: #1a5bc5;
641
- --likec4-element-stroke: #1e49a9;
642
- }
643
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='1']) {
644
640
  --likec4-element-fill: #145ed7;
645
641
  --likec4-element-stroke: #194bb8;
646
642
  }
647
- :where([data-likec4-color='primary'][data-compound-depth='2']) {
648
- --likec4-element-fill: #1e56b1;
649
- --likec4-element-stroke: #204698;
643
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='1']) {
644
+ --likec4-element-fill: #1a5bc5;
645
+ --likec4-element-stroke: #1e49a9;
650
646
  }
651
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='2']) {
647
+ :where([data-likec4-color='primary'][data-compound-depth='2']) {
652
648
  --likec4-element-fill: #195cc8;
653
649
  --likec4-element-stroke: #1d4aac;
654
650
  }
655
- :where([data-likec4-color='primary'][data-compound-depth='3']) {
656
- --likec4-element-fill: #21519f;
657
- --likec4-element-stroke: #224289;
651
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='2']) {
652
+ --likec4-element-fill: #1e56b1;
653
+ --likec4-element-stroke: #204698;
658
654
  }
659
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='3']) {
655
+ :where([data-likec4-color='primary'][data-compound-depth='3']) {
660
656
  --likec4-element-fill: #1e59ba;
661
657
  --likec4-element-stroke: #2149a0;
662
658
  }
663
- :where([data-likec4-color='primary'][data-compound-depth='4']) {
664
- --likec4-element-fill: #234c8e;
665
- --likec4-element-stroke: #243f7a;
659
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='3']) {
660
+ --likec4-element-fill: #21519f;
661
+ --likec4-element-stroke: #224289;
666
662
  }
667
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='4']) {
663
+ :where([data-likec4-color='primary'][data-compound-depth='4']) {
668
664
  --likec4-element-fill: #2357ad;
669
665
  --likec4-element-stroke: #244795;
670
666
  }
671
- :where([data-likec4-color='primary'][data-compound-depth='5']) {
672
- --likec4-element-fill: #25467d;
673
- --likec4-element-stroke: #243b6c;
667
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='4']) {
668
+ --likec4-element-fill: #234c8e;
669
+ --likec4-element-stroke: #243f7a;
674
670
  }
675
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='5']) {
671
+ :where([data-likec4-color='primary'][data-compound-depth='5']) {
676
672
  --likec4-element-fill: #2755a0;
677
673
  --likec4-element-stroke: #27468a;
678
674
  }
679
- :where([data-likec4-color='primary'][data-compound-depth='6']) {
680
- --likec4-element-fill: #25416d;
681
- --likec4-element-stroke: #24365f;
675
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='5']) {
676
+ --likec4-element-fill: #25467d;
677
+ --likec4-element-stroke: #243b6c;
682
678
  }
683
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='primary'][data-compound-depth='6']) {
679
+ :where([data-likec4-color='primary'][data-compound-depth='6']) {
684
680
  --likec4-element-fill: #2a5293;
685
681
  --likec4-element-stroke: #2a447f;
686
682
  }
683
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='primary'][data-compound-depth='6']) {
684
+ --likec4-element-fill: #25416d;
685
+ --likec4-element-stroke: #24365f;
686
+ }
687
687
  :where([data-likec4-color='blue']) {
688
688
  --likec4-element-fill: #3b82f6;
689
689
  --likec4-element-stroke: #2563eb;
@@ -695,53 +695,53 @@ svg.react-flow__connectionline {
695
695
  --likec4-relation-labelColor: #60a5fa;
696
696
  }
697
697
  :where([data-likec4-color='blue'][data-compound-depth='1']) {
698
- --likec4-element-fill: #1a5bc5;
699
- --likec4-element-stroke: #1e49a9;
700
- }
701
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='1']) {
702
698
  --likec4-element-fill: #145ed7;
703
699
  --likec4-element-stroke: #194bb8;
704
700
  }
705
- :where([data-likec4-color='blue'][data-compound-depth='2']) {
706
- --likec4-element-fill: #1e56b1;
707
- --likec4-element-stroke: #204698;
701
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='1']) {
702
+ --likec4-element-fill: #1a5bc5;
703
+ --likec4-element-stroke: #1e49a9;
708
704
  }
709
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='2']) {
705
+ :where([data-likec4-color='blue'][data-compound-depth='2']) {
710
706
  --likec4-element-fill: #195cc8;
711
707
  --likec4-element-stroke: #1d4aac;
712
708
  }
713
- :where([data-likec4-color='blue'][data-compound-depth='3']) {
714
- --likec4-element-fill: #21519f;
715
- --likec4-element-stroke: #224289;
709
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='2']) {
710
+ --likec4-element-fill: #1e56b1;
711
+ --likec4-element-stroke: #204698;
716
712
  }
717
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='3']) {
713
+ :where([data-likec4-color='blue'][data-compound-depth='3']) {
718
714
  --likec4-element-fill: #1e59ba;
719
715
  --likec4-element-stroke: #2149a0;
720
716
  }
721
- :where([data-likec4-color='blue'][data-compound-depth='4']) {
722
- --likec4-element-fill: #234c8e;
723
- --likec4-element-stroke: #243f7a;
717
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='3']) {
718
+ --likec4-element-fill: #21519f;
719
+ --likec4-element-stroke: #224289;
724
720
  }
725
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='4']) {
721
+ :where([data-likec4-color='blue'][data-compound-depth='4']) {
726
722
  --likec4-element-fill: #2357ad;
727
723
  --likec4-element-stroke: #244795;
728
724
  }
729
- :where([data-likec4-color='blue'][data-compound-depth='5']) {
730
- --likec4-element-fill: #25467d;
731
- --likec4-element-stroke: #243b6c;
725
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='4']) {
726
+ --likec4-element-fill: #234c8e;
727
+ --likec4-element-stroke: #243f7a;
732
728
  }
733
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='5']) {
729
+ :where([data-likec4-color='blue'][data-compound-depth='5']) {
734
730
  --likec4-element-fill: #2755a0;
735
731
  --likec4-element-stroke: #27468a;
736
732
  }
737
- :where([data-likec4-color='blue'][data-compound-depth='6']) {
738
- --likec4-element-fill: #25416d;
739
- --likec4-element-stroke: #24365f;
733
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='5']) {
734
+ --likec4-element-fill: #25467d;
735
+ --likec4-element-stroke: #243b6c;
740
736
  }
741
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='blue'][data-compound-depth='6']) {
737
+ :where([data-likec4-color='blue'][data-compound-depth='6']) {
742
738
  --likec4-element-fill: #2a5293;
743
739
  --likec4-element-stroke: #2a447f;
744
740
  }
741
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='blue'][data-compound-depth='6']) {
742
+ --likec4-element-fill: #25416d;
743
+ --likec4-element-stroke: #24365f;
744
+ }
745
745
  :where([data-likec4-color='secondary']) {
746
746
  --likec4-element-fill: #0284c7;
747
747
  --likec4-element-stroke: #0369a1;
@@ -753,53 +753,53 @@ svg.react-flow__connectionline {
753
753
  --likec4-relation-labelColor: #38bdf8;
754
754
  }
755
755
  :where([data-likec4-color='secondary'][data-compound-depth='1']) {
756
- --likec4-element-fill: #0d5d86;
757
- --likec4-element-stroke: #0b4a6c;
758
- }
759
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='1']) {
760
756
  --likec4-element-fill: #086392;
761
757
  --likec4-element-stroke: #084f76;
762
758
  }
763
- :where([data-likec4-color='secondary'][data-compound-depth='2']) {
764
- --likec4-element-fill: #105579;
765
- --likec4-element-stroke: #0e4462;
759
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='1']) {
760
+ --likec4-element-fill: #0d5d86;
761
+ --likec4-element-stroke: #0b4a6c;
766
762
  }
767
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='2']) {
763
+ :where([data-likec4-color='secondary'][data-compound-depth='2']) {
768
764
  --likec4-element-fill: #0c5e88;
769
765
  --likec4-element-stroke: #0b4b6e;
770
766
  }
771
- :where([data-likec4-color='secondary'][data-compound-depth='3']) {
772
- --likec4-element-fill: #134e6c;
773
- --likec4-element-stroke: #103e57;
767
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='2']) {
768
+ --likec4-element-fill: #105579;
769
+ --likec4-element-stroke: #0e4462;
774
770
  }
775
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='3']) {
771
+ :where([data-likec4-color='secondary'][data-compound-depth='3']) {
776
772
  --likec4-element-fill: #10597f;
777
773
  --likec4-element-stroke: #0e4767;
778
774
  }
779
- :where([data-likec4-color='secondary'][data-compound-depth='4']) {
780
- --likec4-element-fill: #154660;
781
- --likec4-element-stroke: #11384e;
775
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='3']) {
776
+ --likec4-element-fill: #134e6c;
777
+ --likec4-element-stroke: #103e57;
782
778
  }
783
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='4']) {
779
+ :where([data-likec4-color='secondary'][data-compound-depth='4']) {
784
780
  --likec4-element-fill: #135475;
785
781
  --likec4-element-stroke: #11435f;
786
782
  }
787
- :where([data-likec4-color='secondary'][data-compound-depth='5']) {
788
- --likec4-element-fill: #163f55;
789
- --likec4-element-stroke: #123345;
783
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='4']) {
784
+ --likec4-element-fill: #154660;
785
+ --likec4-element-stroke: #11384e;
790
786
  }
791
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='5']) {
787
+ :where([data-likec4-color='secondary'][data-compound-depth='5']) {
792
788
  --likec4-element-fill: #164f6c;
793
789
  --likec4-element-stroke: #133f58;
794
790
  }
795
- :where([data-likec4-color='secondary'][data-compound-depth='6']) {
796
- --likec4-element-fill: #17384a;
797
- --likec4-element-stroke: #132d3c;
791
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='5']) {
792
+ --likec4-element-fill: #163f55;
793
+ --likec4-element-stroke: #123345;
798
794
  }
799
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='secondary'][data-compound-depth='6']) {
795
+ :where([data-likec4-color='secondary'][data-compound-depth='6']) {
800
796
  --likec4-element-fill: #194a64;
801
797
  --likec4-element-stroke: #153c51;
802
798
  }
799
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='secondary'][data-compound-depth='6']) {
800
+ --likec4-element-fill: #17384a;
801
+ --likec4-element-stroke: #132d3c;
802
+ }
803
803
  :where([data-likec4-color='sky']) {
804
804
  --likec4-element-fill: #0284c7;
805
805
  --likec4-element-stroke: #0369a1;
@@ -811,53 +811,53 @@ svg.react-flow__connectionline {
811
811
  --likec4-relation-labelColor: #38bdf8;
812
812
  }
813
813
  :where([data-likec4-color='sky'][data-compound-depth='1']) {
814
- --likec4-element-fill: #0d5d86;
815
- --likec4-element-stroke: #0b4a6c;
816
- }
817
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='1']) {
818
814
  --likec4-element-fill: #086392;
819
815
  --likec4-element-stroke: #084f76;
820
816
  }
821
- :where([data-likec4-color='sky'][data-compound-depth='2']) {
822
- --likec4-element-fill: #105579;
823
- --likec4-element-stroke: #0e4462;
817
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='1']) {
818
+ --likec4-element-fill: #0d5d86;
819
+ --likec4-element-stroke: #0b4a6c;
824
820
  }
825
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='2']) {
821
+ :where([data-likec4-color='sky'][data-compound-depth='2']) {
826
822
  --likec4-element-fill: #0c5e88;
827
823
  --likec4-element-stroke: #0b4b6e;
828
824
  }
829
- :where([data-likec4-color='sky'][data-compound-depth='3']) {
830
- --likec4-element-fill: #134e6c;
831
- --likec4-element-stroke: #103e57;
825
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='2']) {
826
+ --likec4-element-fill: #105579;
827
+ --likec4-element-stroke: #0e4462;
832
828
  }
833
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='3']) {
829
+ :where([data-likec4-color='sky'][data-compound-depth='3']) {
834
830
  --likec4-element-fill: #10597f;
835
831
  --likec4-element-stroke: #0e4767;
836
832
  }
837
- :where([data-likec4-color='sky'][data-compound-depth='4']) {
838
- --likec4-element-fill: #154660;
839
- --likec4-element-stroke: #11384e;
833
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='3']) {
834
+ --likec4-element-fill: #134e6c;
835
+ --likec4-element-stroke: #103e57;
840
836
  }
841
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='4']) {
837
+ :where([data-likec4-color='sky'][data-compound-depth='4']) {
842
838
  --likec4-element-fill: #135475;
843
839
  --likec4-element-stroke: #11435f;
844
840
  }
845
- :where([data-likec4-color='sky'][data-compound-depth='5']) {
846
- --likec4-element-fill: #163f55;
847
- --likec4-element-stroke: #123345;
841
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='4']) {
842
+ --likec4-element-fill: #154660;
843
+ --likec4-element-stroke: #11384e;
848
844
  }
849
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='5']) {
845
+ :where([data-likec4-color='sky'][data-compound-depth='5']) {
850
846
  --likec4-element-fill: #164f6c;
851
847
  --likec4-element-stroke: #133f58;
852
848
  }
853
- :where([data-likec4-color='sky'][data-compound-depth='6']) {
854
- --likec4-element-fill: #17384a;
855
- --likec4-element-stroke: #132d3c;
849
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='5']) {
850
+ --likec4-element-fill: #163f55;
851
+ --likec4-element-stroke: #123345;
856
852
  }
857
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='sky'][data-compound-depth='6']) {
853
+ :where([data-likec4-color='sky'][data-compound-depth='6']) {
858
854
  --likec4-element-fill: #194a64;
859
855
  --likec4-element-stroke: #153c51;
860
856
  }
857
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='sky'][data-compound-depth='6']) {
858
+ --likec4-element-fill: #17384a;
859
+ --likec4-element-stroke: #132d3c;
860
+ }
861
861
  :where([data-likec4-color='muted']) {
862
862
  --likec4-element-fill: #64748b;
863
863
  --likec4-element-stroke: #475569;
@@ -869,53 +869,53 @@ svg.react-flow__connectionline {
869
869
  --likec4-relation-labelColor: #cbd5e1;
870
870
  }
871
871
  :where([data-likec4-color='muted'][data-compound-depth='1']) {
872
- --likec4-element-fill: #4b5563;
873
- --likec4-element-stroke: #363e4b;
874
- }
875
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='1']) {
876
872
  --likec4-element-fill: #4e5a6a;
877
873
  --likec4-element-stroke: #384250;
878
874
  }
879
- :where([data-likec4-color='muted'][data-compound-depth='2']) {
880
- --likec4-element-fill: #474f5c;
881
- --likec4-element-stroke: #333a45;
875
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='1']) {
876
+ --likec4-element-fill: #4b5563;
877
+ --likec4-element-stroke: #363e4b;
882
878
  }
883
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='2']) {
879
+ :where([data-likec4-color='muted'][data-compound-depth='2']) {
884
880
  --likec4-element-fill: #4c5665;
885
881
  --likec4-element-stroke: #363f4c;
886
882
  }
887
- :where([data-likec4-color='muted'][data-compound-depth='3']) {
888
- --likec4-element-fill: #424a54;
889
- --likec4-element-stroke: #30363f;
883
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='2']) {
884
+ --likec4-element-fill: #474f5c;
885
+ --likec4-element-stroke: #333a45;
890
886
  }
891
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='3']) {
887
+ :where([data-likec4-color='muted'][data-compound-depth='3']) {
892
888
  --likec4-element-fill: #4a5360;
893
889
  --likec4-element-stroke: #353d48;
894
890
  }
895
- :where([data-likec4-color='muted'][data-compound-depth='4']) {
896
- --likec4-element-fill: #3e444d;
897
- --likec4-element-stroke: #2d323a;
891
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='3']) {
892
+ --likec4-element-fill: #424a54;
893
+ --likec4-element-stroke: #30363f;
898
894
  }
899
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='4']) {
895
+ :where([data-likec4-color='muted'][data-compound-depth='4']) {
900
896
  --likec4-element-fill: #48505b;
901
897
  --likec4-element-stroke: #333a44;
902
898
  }
903
- :where([data-likec4-color='muted'][data-compound-depth='5']) {
904
- --likec4-element-fill: #393e46;
905
- --likec4-element-stroke: #292e34;
899
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='4']) {
900
+ --likec4-element-fill: #3e444d;
901
+ --likec4-element-stroke: #2d323a;
906
902
  }
907
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='5']) {
903
+ :where([data-likec4-color='muted'][data-compound-depth='5']) {
908
904
  --likec4-element-fill: #454c56;
909
905
  --likec4-element-stroke: #323841;
910
906
  }
911
- :where([data-likec4-color='muted'][data-compound-depth='6']) {
912
- --likec4-element-fill: #34383e;
913
- --likec4-element-stroke: #26292f;
907
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='5']) {
908
+ --likec4-element-fill: #393e46;
909
+ --likec4-element-stroke: #292e34;
914
910
  }
915
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='muted'][data-compound-depth='6']) {
911
+ :where([data-likec4-color='muted'][data-compound-depth='6']) {
916
912
  --likec4-element-fill: #434951;
917
913
  --likec4-element-stroke: #30353d;
918
914
  }
915
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='muted'][data-compound-depth='6']) {
916
+ --likec4-element-fill: #34383e;
917
+ --likec4-element-stroke: #26292f;
918
+ }
919
919
  :where([data-likec4-color='slate']) {
920
920
  --likec4-element-fill: #64748b;
921
921
  --likec4-element-stroke: #475569;
@@ -927,53 +927,53 @@ svg.react-flow__connectionline {
927
927
  --likec4-relation-labelColor: #cbd5e1;
928
928
  }
929
929
  :where([data-likec4-color='slate'][data-compound-depth='1']) {
930
- --likec4-element-fill: #4b5563;
931
- --likec4-element-stroke: #363e4b;
932
- }
933
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='1']) {
934
930
  --likec4-element-fill: #4e5a6a;
935
931
  --likec4-element-stroke: #384250;
936
932
  }
937
- :where([data-likec4-color='slate'][data-compound-depth='2']) {
938
- --likec4-element-fill: #474f5c;
939
- --likec4-element-stroke: #333a45;
933
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='1']) {
934
+ --likec4-element-fill: #4b5563;
935
+ --likec4-element-stroke: #363e4b;
940
936
  }
941
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='2']) {
937
+ :where([data-likec4-color='slate'][data-compound-depth='2']) {
942
938
  --likec4-element-fill: #4c5665;
943
939
  --likec4-element-stroke: #363f4c;
944
940
  }
945
- :where([data-likec4-color='slate'][data-compound-depth='3']) {
946
- --likec4-element-fill: #424a54;
947
- --likec4-element-stroke: #30363f;
941
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='2']) {
942
+ --likec4-element-fill: #474f5c;
943
+ --likec4-element-stroke: #333a45;
948
944
  }
949
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='3']) {
945
+ :where([data-likec4-color='slate'][data-compound-depth='3']) {
950
946
  --likec4-element-fill: #4a5360;
951
947
  --likec4-element-stroke: #353d48;
952
948
  }
953
- :where([data-likec4-color='slate'][data-compound-depth='4']) {
954
- --likec4-element-fill: #3e444d;
955
- --likec4-element-stroke: #2d323a;
949
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='3']) {
950
+ --likec4-element-fill: #424a54;
951
+ --likec4-element-stroke: #30363f;
956
952
  }
957
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='4']) {
953
+ :where([data-likec4-color='slate'][data-compound-depth='4']) {
958
954
  --likec4-element-fill: #48505b;
959
955
  --likec4-element-stroke: #333a44;
960
956
  }
961
- :where([data-likec4-color='slate'][data-compound-depth='5']) {
962
- --likec4-element-fill: #393e46;
963
- --likec4-element-stroke: #292e34;
957
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='4']) {
958
+ --likec4-element-fill: #3e444d;
959
+ --likec4-element-stroke: #2d323a;
964
960
  }
965
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='5']) {
961
+ :where([data-likec4-color='slate'][data-compound-depth='5']) {
966
962
  --likec4-element-fill: #454c56;
967
963
  --likec4-element-stroke: #323841;
968
964
  }
969
- :where([data-likec4-color='slate'][data-compound-depth='6']) {
970
- --likec4-element-fill: #34383e;
971
- --likec4-element-stroke: #26292f;
965
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='5']) {
966
+ --likec4-element-fill: #393e46;
967
+ --likec4-element-stroke: #292e34;
972
968
  }
973
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='slate'][data-compound-depth='6']) {
969
+ :where([data-likec4-color='slate'][data-compound-depth='6']) {
974
970
  --likec4-element-fill: #434951;
975
971
  --likec4-element-stroke: #30353d;
976
972
  }
973
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='slate'][data-compound-depth='6']) {
974
+ --likec4-element-fill: #34383e;
975
+ --likec4-element-stroke: #26292f;
976
+ }
977
977
  :where([data-likec4-color='gray']) {
978
978
  --likec4-element-fill: #737373;
979
979
  --likec4-element-stroke: #525252;
@@ -985,111 +985,111 @@ svg.react-flow__connectionline {
985
985
  --likec4-relation-labelColor: #C6C6C6;
986
986
  }
987
987
  :where([data-likec4-color='gray'][data-compound-depth='1']) {
988
- --likec4-element-fill: #545454;
989
- --likec4-element-stroke: #3c3c3c;
990
- }
991
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='1']) {
992
988
  --likec4-element-fill: #595959;
993
989
  --likec4-element-stroke: #3f3f3f;
994
990
  }
995
- :where([data-likec4-color='gray'][data-compound-depth='2']) {
996
- --likec4-element-fill: #4e4e4e;
997
- --likec4-element-stroke: #383838;
991
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='1']) {
992
+ --likec4-element-fill: #545454;
993
+ --likec4-element-stroke: #3c3c3c;
998
994
  }
999
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='2']) {
995
+ :where([data-likec4-color='gray'][data-compound-depth='2']) {
1000
996
  --likec4-element-fill: #555555;
1001
997
  --likec4-element-stroke: #3d3d3d;
1002
998
  }
1003
- :where([data-likec4-color='gray'][data-compound-depth='3']) {
1004
- --likec4-element-fill: #484848;
1005
- --likec4-element-stroke: #343434;
999
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='2']) {
1000
+ --likec4-element-fill: #4e4e4e;
1001
+ --likec4-element-stroke: #383838;
1006
1002
  }
1007
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='3']) {
1003
+ :where([data-likec4-color='gray'][data-compound-depth='3']) {
1008
1004
  --likec4-element-fill: #525252;
1009
1005
  --likec4-element-stroke: #3a3a3a;
1010
1006
  }
1011
- :where([data-likec4-color='gray'][data-compound-depth='4']) {
1012
- --likec4-element-fill: #434343;
1013
- --likec4-element-stroke: #303030;
1007
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='3']) {
1008
+ --likec4-element-fill: #484848;
1009
+ --likec4-element-stroke: #343434;
1014
1010
  }
1015
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='4']) {
1011
+ :where([data-likec4-color='gray'][data-compound-depth='4']) {
1016
1012
  --likec4-element-fill: #4e4e4e;
1017
1013
  --likec4-element-stroke: #383838;
1018
1014
  }
1019
- :where([data-likec4-color='gray'][data-compound-depth='5']) {
1020
- --likec4-element-fill: #3d3d3d;
1021
- --likec4-element-stroke: #2b2b2b;
1015
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='4']) {
1016
+ --likec4-element-fill: #434343;
1017
+ --likec4-element-stroke: #303030;
1022
1018
  }
1023
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='5']) {
1019
+ :where([data-likec4-color='gray'][data-compound-depth='5']) {
1024
1020
  --likec4-element-fill: #4b4b4b;
1025
1021
  --likec4-element-stroke: #353535;
1026
1022
  }
1027
- :where([data-likec4-color='gray'][data-compound-depth='6']) {
1028
- --likec4-element-fill: #373737;
1029
- --likec4-element-stroke: #272727;
1023
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='5']) {
1024
+ --likec4-element-fill: #3d3d3d;
1025
+ --likec4-element-stroke: #2b2b2b;
1030
1026
  }
1031
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='gray'][data-compound-depth='6']) {
1027
+ :where([data-likec4-color='gray'][data-compound-depth='6']) {
1032
1028
  --likec4-element-fill: #474747;
1033
1029
  --likec4-element-stroke: #333333;
1034
1030
  }
1031
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='gray'][data-compound-depth='6']) {
1032
+ --likec4-element-fill: #373737;
1033
+ --likec4-element-stroke: #272727;
1034
+ }
1035
1035
  :where([data-likec4-color='red']) {
1036
1036
  --likec4-element-fill: #AC4D39;
1037
1037
  --likec4-element-stroke: #853A2D;
1038
1038
  --likec4-element-hiContrast: #FBD3CB;
1039
- --likec4-element-loContrast: #FF977D;
1040
- --likec4-compound-title-color: #FF977D;
1039
+ --likec4-element-loContrast: #f5b2a3;
1040
+ --likec4-compound-title-color: #f5b2a3;
1041
1041
  --likec4-relation-lineColor: #AC4D39;
1042
1042
  --likec4-relation-labelBg: #b91c1c;
1043
- --likec4-relation-labelColor: #FF977D;
1043
+ --likec4-relation-labelColor: #f5b2a3;
1044
1044
  }
1045
1045
  :where([data-likec4-color='red'][data-compound-depth='1']) {
1046
- --likec4-element-fill: #773d30;
1047
- --likec4-element-stroke: #5c2e26;
1048
- }
1049
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='1']) {
1050
1046
  --likec4-element-fill: #803e30;
1051
1047
  --likec4-element-stroke: #632f26;
1052
1048
  }
1053
- :where([data-likec4-color='red'][data-compound-depth='2']) {
1054
- --likec4-element-fill: #6c3a2f;
1055
- --likec4-element-stroke: #542c25;
1049
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='1']) {
1050
+ --likec4-element-fill: #773d30;
1051
+ --likec4-element-stroke: #5c2e26;
1056
1052
  }
1057
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='2']) {
1053
+ :where([data-likec4-color='red'][data-compound-depth='2']) {
1058
1054
  --likec4-element-fill: #793d31;
1059
1055
  --likec4-element-stroke: #5e2e26;
1060
1056
  }
1061
- :where([data-likec4-color='red'][data-compound-depth='3']) {
1062
- --likec4-element-fill: #62372e;
1063
- --likec4-element-stroke: #4c2a24;
1057
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='2']) {
1058
+ --likec4-element-fill: #6c3a2f;
1059
+ --likec4-element-stroke: #542c25;
1064
1060
  }
1065
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='3']) {
1061
+ :where([data-likec4-color='red'][data-compound-depth='3']) {
1066
1062
  --likec4-element-fill: #723c31;
1067
1063
  --likec4-element-stroke: #582e27;
1068
1064
  }
1069
- :where([data-likec4-color='red'][data-compound-depth='4']) {
1070
- --likec4-element-fill: #58342c;
1071
- --likec4-element-stroke: #442823;
1065
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='3']) {
1066
+ --likec4-element-fill: #62372e;
1067
+ --likec4-element-stroke: #4c2a24;
1072
1068
  }
1073
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='4']) {
1069
+ :where([data-likec4-color='red'][data-compound-depth='4']) {
1074
1070
  --likec4-element-fill: #6a3b31;
1075
1071
  --likec4-element-stroke: #522d27;
1076
1072
  }
1077
- :where([data-likec4-color='red'][data-compound-depth='5']) {
1078
- --likec4-element-fill: #4f312a;
1079
- --likec4-element-stroke: #3d2521;
1073
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='4']) {
1074
+ --likec4-element-fill: #58342c;
1075
+ --likec4-element-stroke: #442823;
1080
1076
  }
1081
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='5']) {
1077
+ :where([data-likec4-color='red'][data-compound-depth='5']) {
1082
1078
  --likec4-element-fill: #633a31;
1083
1079
  --likec4-element-stroke: #4d2c27;
1084
1080
  }
1085
- :where([data-likec4-color='red'][data-compound-depth='6']) {
1086
- --likec4-element-fill: #462d28;
1087
- --likec4-element-stroke: #36231f;
1081
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='5']) {
1082
+ --likec4-element-fill: #4f312a;
1083
+ --likec4-element-stroke: #3d2521;
1088
1084
  }
1089
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='red'][data-compound-depth='6']) {
1085
+ :where([data-likec4-color='red'][data-compound-depth='6']) {
1090
1086
  --likec4-element-fill: #5d3931;
1091
1087
  --likec4-element-stroke: #482b27;
1092
1088
  }
1089
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='red'][data-compound-depth='6']) {
1090
+ --likec4-element-fill: #462d28;
1091
+ --likec4-element-stroke: #36231f;
1092
+ }
1093
1093
  :where([data-likec4-color='green']) {
1094
1094
  --likec4-element-fill: #428a4f;
1095
1095
  --likec4-element-stroke: #2d5d39;
@@ -1101,53 +1101,53 @@ svg.react-flow__connectionline {
1101
1101
  --likec4-relation-labelColor: #22c55e;
1102
1102
  }
1103
1103
  :where([data-likec4-color='green'][data-compound-depth='1']) {
1104
- --likec4-element-fill: #34613c;
1105
- --likec4-element-stroke: #24412b;
1106
- }
1107
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='1']) {
1108
1104
  --likec4-element-fill: #35683e;
1109
1105
  --likec4-element-stroke: #24462d;
1110
1106
  }
1111
- :where([data-likec4-color='green'][data-compound-depth='2']) {
1112
- --likec4-element-fill: #325839;
1113
- --likec4-element-stroke: #223c29;
1107
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='1']) {
1108
+ --likec4-element-fill: #34613c;
1109
+ --likec4-element-stroke: #24412b;
1114
1110
  }
1115
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='2']) {
1111
+ :where([data-likec4-color='green'][data-compound-depth='2']) {
1116
1112
  --likec4-element-fill: #35623d;
1117
1113
  --likec4-element-stroke: #24422c;
1118
1114
  }
1119
- :where([data-likec4-color='green'][data-compound-depth='3']) {
1120
- --likec4-element-fill: #305136;
1121
- --likec4-element-stroke: #213626;
1115
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='2']) {
1116
+ --likec4-element-fill: #325839;
1117
+ --likec4-element-stroke: #223c29;
1122
1118
  }
1123
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='3']) {
1119
+ :where([data-likec4-color='green'][data-compound-depth='3']) {
1124
1120
  --likec4-element-fill: #345d3c;
1125
1121
  --likec4-element-stroke: #243e2a;
1126
1122
  }
1127
- :where([data-likec4-color='green'][data-compound-depth='4']) {
1128
- --likec4-element-fill: #2d4932;
1129
- --likec4-element-stroke: #1f3123;
1123
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='3']) {
1124
+ --likec4-element-fill: #305136;
1125
+ --likec4-element-stroke: #213626;
1130
1126
  }
1131
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='4']) {
1127
+ :where([data-likec4-color='green'][data-compound-depth='4']) {
1132
1128
  --likec4-element-fill: #33573a;
1133
1129
  --likec4-element-stroke: #233b29;
1134
1130
  }
1135
- :where([data-likec4-color='green'][data-compound-depth='5']) {
1136
- --likec4-element-fill: #2b422f;
1137
- --likec4-element-stroke: #1d2c21;
1131
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='4']) {
1132
+ --likec4-element-fill: #2d4932;
1133
+ --likec4-element-stroke: #1f3123;
1138
1134
  }
1139
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='5']) {
1135
+ :where([data-likec4-color='green'][data-compound-depth='5']) {
1140
1136
  --likec4-element-fill: #335238;
1141
1137
  --likec4-element-stroke: #223728;
1142
1138
  }
1143
- :where([data-likec4-color='green'][data-compound-depth='6']) {
1144
- --likec4-element-fill: #283a2b;
1145
- --likec4-element-stroke: #1b271e;
1139
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='5']) {
1140
+ --likec4-element-fill: #2b422f;
1141
+ --likec4-element-stroke: #1d2c21;
1146
1142
  }
1147
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='green'][data-compound-depth='6']) {
1143
+ :where([data-likec4-color='green'][data-compound-depth='6']) {
1148
1144
  --likec4-element-fill: #324d37;
1149
1145
  --likec4-element-stroke: #223426;
1150
1146
  }
1147
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='green'][data-compound-depth='6']) {
1148
+ --likec4-element-fill: #283a2b;
1149
+ --likec4-element-stroke: #1b271e;
1150
+ }
1151
1151
  :where([data-likec4-color='amber']) {
1152
1152
  --likec4-element-fill: #A35829;
1153
1153
  --likec4-element-stroke: #7E451D;
@@ -1159,53 +1159,53 @@ svg.react-flow__connectionline {
1159
1159
  --likec4-relation-labelColor: #FFE0C2;
1160
1160
  }
1161
1161
  :where([data-likec4-color='amber'][data-compound-depth='1']) {
1162
- --likec4-element-fill: #704225;
1163
- --likec4-element-stroke: #56331b;
1164
- }
1165
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='1']) {
1166
1162
  --likec4-element-fill: #794524;
1167
1163
  --likec4-element-stroke: #5e361a;
1168
1164
  }
1169
- :where([data-likec4-color='amber'][data-compound-depth='2']) {
1170
- --likec4-element-fill: #663e25;
1171
- --likec4-element-stroke: #4e301b;
1165
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='1']) {
1166
+ --likec4-element-fill: #704225;
1167
+ --likec4-element-stroke: #56331b;
1172
1168
  }
1173
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='2']) {
1169
+ :where([data-likec4-color='amber'][data-compound-depth='2']) {
1174
1170
  --likec4-element-fill: #724325;
1175
1171
  --likec4-element-stroke: #58341b;
1176
1172
  }
1177
- :where([data-likec4-color='amber'][data-compound-depth='3']) {
1178
- --likec4-element-fill: #5c3a25;
1179
- --likec4-element-stroke: #472d1b;
1173
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='2']) {
1174
+ --likec4-element-fill: #663e25;
1175
+ --likec4-element-stroke: #4e301b;
1180
1176
  }
1181
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='3']) {
1177
+ :where([data-likec4-color='amber'][data-compound-depth='3']) {
1182
1178
  --likec4-element-fill: #6b4126;
1183
1179
  --likec4-element-stroke: #52321c;
1184
1180
  }
1185
- :where([data-likec4-color='amber'][data-compound-depth='4']) {
1186
- --likec4-element-fill: #533624;
1187
- --likec4-element-stroke: #402a1a;
1181
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='3']) {
1182
+ --likec4-element-fill: #5c3a25;
1183
+ --likec4-element-stroke: #472d1b;
1188
1184
  }
1189
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='4']) {
1185
+ :where([data-likec4-color='amber'][data-compound-depth='4']) {
1190
1186
  --likec4-element-fill: #643e27;
1191
1187
  --likec4-element-stroke: #4d301d;
1192
1188
  }
1193
- :where([data-likec4-color='amber'][data-compound-depth='5']) {
1194
- --likec4-element-fill: #493223;
1195
- --likec4-element-stroke: #38261a;
1189
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='4']) {
1190
+ --likec4-element-fill: #533624;
1191
+ --likec4-element-stroke: #402a1a;
1196
1192
  }
1197
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='5']) {
1193
+ :where([data-likec4-color='amber'][data-compound-depth='5']) {
1198
1194
  --likec4-element-fill: #5d3c28;
1199
1195
  --likec4-element-stroke: #472f1d;
1200
1196
  }
1201
- :where([data-likec4-color='amber'][data-compound-depth='6']) {
1202
- --likec4-element-fill: #412d21;
1203
- --likec4-element-stroke: #322319;
1197
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='5']) {
1198
+ --likec4-element-fill: #493223;
1199
+ --likec4-element-stroke: #38261a;
1204
1200
  }
1205
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='amber'][data-compound-depth='6']) {
1201
+ :where([data-likec4-color='amber'][data-compound-depth='6']) {
1206
1202
  --likec4-element-fill: #563a28;
1207
1203
  --likec4-element-stroke: #422d1e;
1208
1204
  }
1205
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='amber'][data-compound-depth='6']) {
1206
+ --likec4-element-fill: #412d21;
1207
+ --likec4-element-stroke: #322319;
1208
+ }
1209
1209
  :where([data-likec4-color='indigo']) {
1210
1210
  --likec4-element-fill: #6366f1;
1211
1211
  --likec4-element-stroke: #4f46e5;
@@ -1217,52 +1217,52 @@ svg.react-flow__connectionline {
1217
1217
  --likec4-relation-labelColor: #818cf8;
1218
1218
  }
1219
1219
  :where([data-likec4-color='indigo'][data-compound-depth='1']) {
1220
- --likec4-element-fill: #2529d3;
1221
- --likec4-element-stroke: #3028b2;
1222
- }
1223
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='1']) {
1224
1220
  --likec4-element-fill: #2529e1;
1225
1221
  --likec4-element-stroke: #2d24c2;
1226
1222
  }
1227
- :where([data-likec4-color='indigo'][data-compound-depth='2']) {
1228
- --likec4-element-fill: #282bbf;
1229
- --likec4-element-stroke: #312aa1;
1223
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='1']) {
1224
+ --likec4-element-fill: #2529d3;
1225
+ --likec4-element-stroke: #3028b2;
1230
1226
  }
1231
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='2']) {
1227
+ :where([data-likec4-color='indigo'][data-compound-depth='2']) {
1232
1228
  --likec4-element-fill: #2428d7;
1233
1229
  --likec4-element-stroke: #3028b5;
1234
1230
  }
1235
- :where([data-likec4-color='indigo'][data-compound-depth='3']) {
1236
- --likec4-element-fill: #2b2dac;
1237
- --likec4-element-stroke: #312b91;
1231
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='2']) {
1232
+ --likec4-element-fill: #282bbf;
1233
+ --likec4-element-stroke: #312aa1;
1238
1234
  }
1239
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='3']) {
1235
+ :where([data-likec4-color='indigo'][data-compound-depth='3']) {
1240
1236
  --likec4-element-fill: #292cc8;
1241
1237
  --likec4-element-stroke: #322ba9;
1242
1238
  }
1243
- :where([data-likec4-color='indigo'][data-compound-depth='4']) {
1244
- --likec4-element-fill: #2c2f99;
1245
- --likec4-element-stroke: #302c82;
1239
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='3']) {
1240
+ --likec4-element-fill: #2b2dac;
1241
+ --likec4-element-stroke: #312b91;
1246
1242
  }
1247
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='4']) {
1243
+ :where([data-likec4-color='indigo'][data-compound-depth='4']) {
1248
1244
  --likec4-element-fill: #2d30ba;
1249
1245
  --likec4-element-stroke: #342e9e;
1250
1246
  }
1251
- :where([data-likec4-color='indigo'][data-compound-depth='5']) {
1252
- --likec4-element-fill: #2d2f87;
1253
- --likec4-element-stroke: #2f2b73;
1247
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='4']) {
1248
+ --likec4-element-fill: #2c2f99;
1249
+ --likec4-element-stroke: #302c82;
1254
1250
  }
1255
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='5']) {
1251
+ :where([data-likec4-color='indigo'][data-compound-depth='5']) {
1256
1252
  --likec4-element-fill: #3133ac;
1257
1253
  --likec4-element-stroke: #363092;
1258
1254
  }
1259
- :where([data-likec4-color='indigo'][data-compound-depth='6']) {
1260
- --likec4-element-fill: #2d2e76;
1261
- --likec4-element-stroke: #2e2b65;
1255
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='5']) {
1256
+ --likec4-element-fill: #2d2f87;
1257
+ --likec4-element-stroke: #2f2b73;
1262
1258
  }
1263
- :where([data-mantine-color-scheme='light']) :where([data-likec4-color='indigo'][data-compound-depth='6']) {
1259
+ :where([data-likec4-color='indigo'][data-compound-depth='6']) {
1264
1260
  --likec4-element-fill: #34369f;
1265
1261
  --likec4-element-stroke: #373287;
1262
+ }
1263
+ :where([data-mantine-color-scheme='dark']) :where([data-likec4-color='indigo'][data-compound-depth='6']) {
1264
+ --likec4-element-fill: #2d2e76;
1265
+ --likec4-element-stroke: #2e2b65;
1266
1266
  }.react-flow._2h8g8h0 {
1267
1267
  --xy-background-color: var(--likec4-background-color);
1268
1268
  --xy-background-pattern-color: var(--likec4-background-pattern-color);
@@ -1340,7 +1340,7 @@ svg.react-flow__connectionline {
1340
1340
  stroke: var(--xy-edge-stroke);
1341
1341
  fill-opacity: 0.75;
1342
1342
  stroke-width: 1;
1343
- cursor: default;
1343
+ cursor: grab;
1344
1344
  pointer-events: auto;
1345
1345
  visibility: hidden;
1346
1346
  }
@@ -1357,10 +1357,10 @@ svg.react-flow__connectionline {
1357
1357
  stroke-width: 5;
1358
1358
  }
1359
1359
  .bexn7q6 {
1360
- cursor: grab;
1360
+ cursor: grabbing;
1361
1361
  }
1362
1362
  .bexn7q6 * {
1363
- cursor: grab;
1363
+ cursor: grabbing !important;
1364
1364
  }
1365
1365
  .bexn7q8 {
1366
1366
  animation-duration: 800ms;
@@ -1769,15 +1769,12 @@ svg.react-flow__connectionline {
1769
1769
  padding-top: 32px;
1770
1770
  padding-bottom: 28px;
1771
1771
  }
1772
- ._1b6tknh:is(._1b6tknb) {
1773
- padding-right: 20px;
1774
- }
1775
1772
  ._1b6tkn1:not(:is([data-likec4-shape="queue"],[data-likec4-shape="mobile"])) ._1b6tknh:is(._1b6tknb) {
1776
- padding-left: 20px;
1773
+ padding-left: 24px;
1774
+ padding-right: 18px;
1777
1775
  }
1778
1776
  ._1b6tknh:has(._1b6tknf, ._1b6tkng) {
1779
1777
  --_1b6tknd: 60px;
1780
- align-items: flex-start;
1781
1778
  gap: calc(1rem * var(--mantine-scale));
1782
1779
  }
1783
1780
  ._1b6tkni {
@@ -1808,6 +1805,7 @@ svg.react-flow__connectionline {
1808
1805
  align-items: center;
1809
1806
  justify-content: center;
1810
1807
  mix-blend-mode: hard-light;
1808
+ align-self: flex-start;
1811
1809
  }
1812
1810
  ._1b6tknj svg, ._1b6tknj img {
1813
1811
  width: 100%;