@xyflow/vue 2.0.0-next.0 → 2.0.0-next.2

package/dist/base.css

@@ -1,29 +1,34 @@
 /* this will be exported as base.css and can be used for a basic styling */
+
+@layer xyflow {
+
 /* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
+
 .vue-flow {
   direction: ltr;
+  color-scheme: light dark;
 
-  --xy-edge-stroke-default: #b1b1b7;
+  --xy-edge-stroke-default: light-dark(#b1b1b7, #3e3e3e);
   --xy-edge-stroke-width-default: 1;
-  --xy-edge-stroke-selected-default: #555;
+  --xy-edge-stroke-selected-default: light-dark(#555, #727272);
 
   --xy-connectionline-stroke-default: #b1b1b7;
   --xy-connectionline-stroke-width-default: 1;
 
-  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);
+  --xy-attribution-background-color-default: light-dark(rgba(255, 255, 255, 0.5), rgba(150, 150, 150, 0.25));
 
-  --xy-minimap-background-color-default: #fff;
-  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
+  --xy-minimap-background-color-default: light-dark(#fff, #141414);
+  --xy-minimap-mask-background-color-default: light-dark(rgba(240, 240, 240, 0.6), rgba(60, 60, 60, 0.6));
   --xy-minimap-mask-stroke-color-default: transparent;
   --xy-minimap-mask-stroke-width-default: 1;
-  --xy-minimap-node-background-color-default: #e2e2e2;
+  --xy-minimap-node-background-color-default: light-dark(#e2e2e2, #2b2b2b);
   --xy-minimap-node-stroke-color-default: transparent;
   --xy-minimap-node-stroke-width-default: 2;
 
-  --xy-background-color-default: transparent;
-  --xy-background-pattern-dots-color-default: #91919a;
-  --xy-background-pattern-lines-color-default: #eee;
-  --xy-background-pattern-cross-color-default: #e2e2e2;
+  --xy-background-color-default: light-dark(transparent, #141414);
+  --xy-background-pattern-dots-color-default: light-dark(#91919a, #555);
+  --xy-background-pattern-lines-color-default: light-dark(#eee, #333);
+  --xy-background-pattern-cross-color-default: light-dark(#e2e2e2, #333);
   background-color: var(--xy-background-color, var(--xy-background-color-default));
   --xy-node-border-default: 1px solid #bbb;
   --xy-node-border-selected-default: 1px solid #555;
@@ -34,35 +39,23 @@
   --xy-selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
   --xy-resize-background-color-default: #3367d9;
 }
-.vue-flow.dark {
-  --xy-edge-stroke-default: #3e3e3e;
-  --xy-edge-stroke-width-default: 1;
-  --xy-edge-stroke-selected-default: #727272;
-
-  --xy-connectionline-stroke-default: #b1b1b7;
-  --xy-connectionline-stroke-width-default: 1;
-
-  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);
 
-  --xy-minimap-background-color-default: #141414;
-  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
-  --xy-minimap-mask-stroke-color-default: transparent;
-  --xy-minimap-mask-stroke-width-default: 1;
-  --xy-minimap-node-background-color-default: #2b2b2b;
-  --xy-minimap-node-stroke-color-default: transparent;
-  --xy-minimap-node-stroke-width-default: 2;
+[data-theme='dark'] .vue-flow,
+.vue-flow.dark {
+  color-scheme: dark;
+}
 
-  --xy-background-color-default: #141414;
-  --xy-background-pattern-dots-color-default: #777;
-  --xy-background-pattern-lines-color-default: #777;
-  --xy-background-pattern-cross-color-default: #777;
-  --xy-node-color-default: #f8f8f8;
+[data-theme='light'] .vue-flow,
+.vue-flow.light {
+  color-scheme: light;
 }
+
 .vue-flow__background {
   background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
   pointer-events: none;
   z-index: -1;
 }
+
 .vue-flow__container {
   position: absolute;
   width: 100%;
@@ -70,111 +63,139 @@
   top: 0;
   left: 0;
 }
+
 .vue-flow__pane {
   z-index: 1;
   touch-action: none;
 }
-.vue-flow__pane.draggable {
+
+  .vue-flow__pane.draggable {
     cursor: grab;
   }
-.vue-flow__pane.dragging {
+
+  .vue-flow__pane.dragging {
     cursor: grabbing;
   }
-.vue-flow__pane.selection {
+
+  .vue-flow__pane.selection {
     cursor: pointer;
   }
+
 .vue-flow__viewport {
   transform-origin: 0 0;
   z-index: 2;
   pointer-events: none;
 }
+
 .vue-flow__renderer {
   z-index: 4;
 }
+
 .vue-flow__selection {
   z-index: 6;
 }
+
 .vue-flow__nodesselection-rect:focus,
 .vue-flow__nodesselection-rect:focus-visible {
   outline: none;
 }
+
 .vue-flow__edge-path {
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
   stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
   fill: none;
 }
+
 .vue-flow__connection-path {
   stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
   stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
   fill: none;
 }
+
 .vue-flow .vue-flow__edges {
   position: absolute;
 }
-.vue-flow .vue-flow__edges svg {
+
+  .vue-flow .vue-flow__edges svg {
     overflow: visible;
     position: absolute;
     pointer-events: none;
   }
+
 .vue-flow__edge {
   pointer-events: visibleStroke;
 }
-.vue-flow__edge.selectable {
+
+  .vue-flow__edge.selectable {
     cursor: pointer;
   }
-.vue-flow__edge.animated path {
+
+  .vue-flow__edge.animated path {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
-.vue-flow__edge.animated path.vue-flow__edge-interaction {
+
+  .vue-flow__edge.animated path.vue-flow__edge-interaction {
     stroke-dasharray: none;
     animation: none;
   }
-.vue-flow__edge.inactive {
+
+  .vue-flow__edge.inactive {
     pointer-events: none;
   }
-.vue-flow__edge.selected,
+
+  .vue-flow__edge.selected,
   .vue-flow__edge:focus,
   .vue-flow__edge:focus-visible {
     outline: none;
   }
-.vue-flow__edge.selected .vue-flow__edge-path,
+
+  .vue-flow__edge.selected .vue-flow__edge-path,
   .vue-flow__edge.selectable:focus .vue-flow__edge-path,
   .vue-flow__edge.selectable:focus-visible .vue-flow__edge-path {
     stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
   }
-.vue-flow__edge-textwrapper {
+
+  .vue-flow__edge-textwrapper {
     pointer-events: all;
   }
-.vue-flow__edge .vue-flow__edge-text {
+
+  .vue-flow__edge .vue-flow__edge-text {
     pointer-events: none;
     -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
   }
+
 /* Arrowhead marker styles - use CSS custom properties as default */
 .vue-flow__arrowhead polyline {
   stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
 }
+
 .vue-flow__arrowhead polyline.arrowclosed {
   fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
 }
+
 .vue-flow__connection {
   pointer-events: none;
 }
-.vue-flow__connection .animated {
+
+  .vue-flow__connection .animated {
     stroke-dasharray: 5;
     animation: dashdraw 0.5s linear infinite;
   }
+
 svg.vue-flow__connectionline {
   z-index: 1001;
   overflow: visible;
   position: absolute;
 }
+
 .vue-flow__nodes {
   pointer-events: none;
   transform-origin: 0 0;
 }
+
 .vue-flow__node {
   position: absolute;
   -webkit-user-select: none;
@@ -185,26 +206,32 @@ svg.vue-flow__connectionline {
   box-sizing: border-box;
   cursor: default;
 }
-.vue-flow__node.selectable {
+
+  .vue-flow__node.selectable {
     cursor: pointer;
   }
-.vue-flow__node.draggable {
+
+  .vue-flow__node.draggable {
     cursor: grab;
     pointer-events: all;
   }
-.vue-flow__node.draggable.dragging {
+
+    .vue-flow__node.draggable.dragging {
       cursor: grabbing;
     }
+
 .vue-flow__nodesselection {
   z-index: 3;
   transform-origin: left top;
   pointer-events: none;
 }
-.vue-flow__nodesselection-rect {
+
+  .vue-flow__nodesselection-rect {
     position: absolute;
     pointer-events: all;
     cursor: grab;
   }
+
 .vue-flow__handle {
   position: absolute;
   pointer-events: none;
@@ -212,81 +239,98 @@ svg.vue-flow__connectionline {
   min-height: 5px;
   background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
 }
-.vue-flow__handle.connectingfrom {
+
+  .vue-flow__handle.connectingfrom {
     pointer-events: all;
   }
-.vue-flow__handle.connectionindicator {
+
+  .vue-flow__handle.connectionindicator {
     pointer-events: all;
     cursor: crosshair;
   }
-.vue-flow__handle-bottom {
+
+  .vue-flow__handle-bottom {
     top: auto;
     left: 50%;
     bottom: 0;
     transform: translate(-50%, 50%);
   }
-.vue-flow__handle-top {
+
+  .vue-flow__handle-top {
     top: 0;
     left: 50%;
     transform: translate(-50%, -50%);
   }
-.vue-flow__handle-left {
+
+  .vue-flow__handle-left {
     top: 50%;
     left: 0;
     transform: translate(-50%, -50%);
   }
-.vue-flow__handle-right {
+
+  .vue-flow__handle-right {
     top: 50%;
     right: 0;
     transform: translate(50%, -50%);
   }
+
 .vue-flow__edgeupdater {
   cursor: move;
   pointer-events: all;
 }
+
 .vue-flow__pane.selection .vue-flow__panel {
   pointer-events: none;
 }
+
 .vue-flow__panel {
   position: absolute;
   z-index: 5;
   margin: 15px;
 }
-.vue-flow__panel.top {
+
+  .vue-flow__panel.top {
     top: 0;
   }
-.vue-flow__panel.bottom {
+
+  .vue-flow__panel.bottom {
     bottom: 0;
   }
-.vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
+    .vue-flow__panel.top.center, .vue-flow__panel.bottom.center {
       left: 50%;
       transform: translateX(-15px) translateX(-50%);
     }
-.vue-flow__panel.left {
+
+  .vue-flow__panel.left {
     left: 0;
   }
-.vue-flow__panel.right {
+
+  .vue-flow__panel.right {
     right: 0;
   }
-.vue-flow__panel.left.center, .vue-flow__panel.right.center {
+    .vue-flow__panel.left.center, .vue-flow__panel.right.center {
       top: 50%;
       transform: translateY(-15px) translateY(-50%);
     }
+
 .vue-flow__attribution {
   font-size: 10px;
   background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
   padding: 2px 3px;
   margin: 0;
 }
-.vue-flow__attribution a {
+
+  .vue-flow__attribution a {
     text-decoration: none;
     color: #999;
   }
+
 @keyframes dashdraw {
   from {
     stroke-dashoffset: 10;
   }
 }
+
 .vue-flow__edgelabel-renderer {
   position: absolute;
   width: 100%;
@@ -298,6 +342,7 @@ svg.vue-flow__connectionline {
   left: 0;
   top: 0;
 }
+
 .vue-flow__viewport-portal {
   position: absolute;
   width: 100%;
@@ -308,16 +353,19 @@ svg.vue-flow__connectionline {
      -moz-user-select: none;
           user-select: none;
 }
+
 .vue-flow__minimap {
   background: var(
     --xy-minimap-background-color-props,
     var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
   );
 }
-.vue-flow__minimap-svg {
+
+  .vue-flow__minimap-svg {
     display: block;
   }
-.vue-flow__minimap-mask {
+
+  .vue-flow__minimap-mask {
     fill: var(
       --xy-minimap-mask-background-color-props,
       var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
@@ -331,7 +379,8 @@ svg.vue-flow__connectionline {
       var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
     );
   }
-.vue-flow__minimap-node {
+
+  .vue-flow__minimap-node {
     fill: var(
       --xy-minimap-node-background-color-props,
       var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
@@ -345,32 +394,37 @@ svg.vue-flow__connectionline {
       var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
     );
   }
-.vue-flow__background-pattern.dots {
+  .vue-flow__background-pattern.dots {
     fill: var(
       --xy-background-pattern-color-props,
       var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
     );
   }
-.vue-flow__background-pattern.lines {
+
+  .vue-flow__background-pattern.lines {
     stroke: var(
       --xy-background-pattern-color-props,
       var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
     );
   }
-.vue-flow__background-pattern.cross {
+
+  .vue-flow__background-pattern.cross {
     stroke: var(
       --xy-background-pattern-color-props,
       var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
     );
   }
+
 .vue-flow__controls {
   display: flex;
   flex-direction: column;
 }
-.vue-flow__controls.horizontal {
+
+  .vue-flow__controls.horizontal {
     flex-direction: row;
   }
-.vue-flow__controls-button {
+
+  .vue-flow__controls-button {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -378,12 +432,17 @@ svg.vue-flow__connectionline {
     width: 26px;
     padding: 4px;
   }
-.vue-flow__controls-button svg {
+
+    .vue-flow__controls-button svg {
       width: 100%;
       max-width: 12px;
       max-height: 12px;
       fill: currentColor;
     }
+}
+
+@layer xyflow {
+
 .vue-flow__node-input,
 .vue-flow__node-default,
 .vue-flow__node-output,
@@ -391,7 +450,8 @@ svg.vue-flow__connectionline {
   border: var(--xy-node-border, var(--xy-node-border-default));
   color: var(--xy-node-color, var(--xy-node-color-default));
 }
-.vue-flow__node-input.selected,
+
+  .vue-flow__node-input.selected,
   .vue-flow__node-input:focus,
   .vue-flow__node-input:focus-visible,
   .vue-flow__node-default.selected,
@@ -406,30 +466,40 @@ svg.vue-flow__connectionline {
     outline: none;
     border: var(--xy-node-border-selected, var(--xy-node-border-selected-default));
   }
+
 .vue-flow__nodesselection-rect,
 .vue-flow__selection {
   background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
   border: var(--xy-selection-border, var(--xy-selection-border-default));
 }
+}
+
+@layer xyflow {
+
 .vue-flow__resize-control {
   position: absolute;
 }
+
 .vue-flow__resize-control.left,
 .vue-flow__resize-control.right {
   cursor: ew-resize;
 }
+
 .vue-flow__resize-control.top,
 .vue-flow__resize-control.bottom {
   cursor: ns-resize;
 }
+
 .vue-flow__resize-control.top.left,
 .vue-flow__resize-control.bottom.right {
   cursor: nwse-resize;
 }
+
 .vue-flow__resize-control.bottom.left,
 .vue-flow__resize-control.top.right {
   cursor: nesw-resize;
 }
+
 /* handle styles */
 .vue-flow__resize-control.handle {
   width: 5px;
@@ -439,6 +509,7 @@ svg.vue-flow__connectionline {
   background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
   translate: -50% -50%;
 }
+
 .vue-flow__resize-control.handle.left {
   left: 0;
   top: 50%;
@@ -467,12 +538,14 @@ svg.vue-flow__connectionline {
 .vue-flow__resize-control.handle.bottom.right {
   left: 100%;
 }
+
 /* line styles */
 .vue-flow__resize-control.line {
   border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
   border-width: 0;
   border-style: solid;
 }
+
 .vue-flow__resize-control.line.left,
 .vue-flow__resize-control.line.right {
   width: 1px;
@@ -480,14 +553,17 @@ svg.vue-flow__connectionline {
   top: 0;
   height: 100%;
 }
+
 .vue-flow__resize-control.line.left {
   left: 0;
   border-left-width: 1px;
 }
+
 .vue-flow__resize-control.line.right {
   left: 100%;
   border-right-width: 1px;
 }
+
 .vue-flow__resize-control.line.top,
 .vue-flow__resize-control.line.bottom {
   height: 1px;
@@ -495,20 +571,26 @@ svg.vue-flow__connectionline {
   left: 0;
   width: 100%;
 }
+
 .vue-flow__resize-control.line.top {
   top: 0;
   border-top-width: 1px;
 }
+
 .vue-flow__resize-control.line.bottom {
   border-bottom-width: 1px;
   top: 100%;
 }
-/* root container layout — @xyflow/system's CSS only declares vars + theme on `.vue-flow`; the framework
-   owns the layout box (xyflow/react applies the equivalent inline). */
-.vue-flow {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  z-index: 0;
+}
+
+@layer xyflow {
+  /* root container layout — @xyflow/system's CSS only declares vars + theme on `.vue-flow`; the framework
+     owns the layout box (xyflow/react applies the equivalent inline). */
+  .vue-flow {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    z-index: 0;
+  }
 }