chore(core): update styles

packages/core/src/style.css

@@ -13,14 +13,19 @@
   top: 0;
 }
 
-.vue-flow__transformationpane {
-  pointer-events: none;
-  transform-origin: 0 0;
-  z-index: 2;
-}
-
 .vue-flow__pane {
   z-index: 1;
+  cursor: grab;
+
+  &.dragging {
+     cursor: grabbing;
+   }
+}
+
+.vue-flow__transformationpane {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
 }
 
 .vue-flow__viewport {
@@ -31,59 +36,73 @@
   z-index: 5;
 }
 
-.vue-flow__selection {
+.vue-flow__nodesselection-rect:focus,
-  position: absolute;
+.vue-flow__nodesselection-rect:focus-visible {
-  top: 0;
+  outline: none;
-  left: 0;
 }
 
-.vue-flow__edges {
+.vue-flow .vue-flow__edges {
-  overflow: visible;
   pointer-events: none;
+  overflow: visible;
+}
+
+.vue-flow__edge-path,
+.vue-flow__connection-path {
+  stroke: #b1b1b7;
+  stroke-width: 1;
+  fill: none;
 }
 
 .vue-flow__edge {
   pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+     stroke-dasharray: 5;
+     animation: dashdraw 0.5s linear infinite;
+   }
 
   &.inactive {
+     pointer-events: none;
+   }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+     outline: none;
+   }
+
+  &.selected .vue-flow__edge-path,
+  &:focus .vue-flow__edge-path,
+  &:focus-visible .vue-flow__edge-path {
+     stroke: #555;
+   }
+
+  &-textwrapper {
+     pointer-events: all;
+   }
+
+  &-textbg {
+     fill: white;
+   }
+
+  .vue-flow__edge-text {
     pointer-events: none;
+    user-select: none;
   }
 }
 
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
-.vue-flow__edge-path {
-  fill: none;
-}
-
-.vue-flow__edge-textwrapper {
-  pointer-events: all;
-}
-
-.vue-flow__edge-text {
-  pointer-events: none;
-  user-select: none;
-}
-
-.vue-flow .vue-flow__connectionline {
-  z-index: 1001;
-}
-
 .vue-flow__connection {
   pointer-events: none;
 
-  .animated {
+  &.animated {
-    stroke-dasharray: 5;
+     stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
+     animation: dashdraw 0.5s linear infinite;
-  }
+   }
 }
 
-.vue-flow__connection-path {
+.vue-flow__connectionline {
-  fill: none;
+  z-index: 1001;
 }
 
 .vue-flow__nodes {
@@ -97,6 +116,11 @@
   pointer-events: all;
   transform-origin: 0 0;
   box-sizing: border-box;
+  cursor: grab;
+
+  &.dragging {
+     cursor: grabbing;
+   }
 }
 
 .vue-flow__nodesselection {
@@ -114,35 +138,38 @@
 .vue-flow__handle {
   position: absolute;
   pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
 
   &.connectable {
-    pointer-events: all;
+     pointer-events: all;
-  }
+     cursor: crosshair;
-}
+   }
 
-.vue-flow__handle-bottom {
+  &-bottom {
-  top: auto;
+     top: auto;
-  left: 50%;
+     left: 50%;
-  bottom: -4px;
+     bottom: -4px;
-  transform: translate(-50%, 0);
+     transform: translate(-50%, 0);
-}
+   }
 
-.vue-flow__handle-top {
+  &-top {
-  left: 50%;
+     left: 50%;
-  top: -4px;
+     top: -4px;
-  transform: translate(-50%, 0);
+     transform: translate(-50%, 0);
-}
+   }
 
-.vue-flow__handle-left {
+  &-left {
-  top: 50%;
+     top: 50%;
-  left: -4px;
+     left: -4px;
-  transform: translate(0, -50%);
+     transform: translate(0, -50%);
-}
+   }
 
-.vue-flow__handle-right {
+  &-right {
-  right: -4px;
+     right: -4px;
-  top: 50%;
+     top: 50%;
-  transform: translate(0, -50%);
+     transform: translate(0, -50%);
+   }
 }
 
 .vue-flow__edgeupdater {
@@ -150,27 +177,35 @@
   pointer-events: all;
 }
 
-/* additional components */
+.vue-flow__panel {
-.vue-flow__controls {
   position: absolute;
   z-index: 5;
-  bottom: 10px;
+  margin: 15px;
-  left: 10px;
 
-  &-button {
+  &.top {
-    width: 24px;
+     top: 0;
-    height: 24px;
+   }
-    border: none;
 
-    svg {
+  &.bottom {
-      width: 100%;
+     bottom: 0;
-    }
+   }
+
+  &.left {
+     left: 0;
+   }
+
+  &.right {
+     right: 0;
+   }
+
+  &.center {
+     left: 50%;
+     transform: translateX(-50%);
+   }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
   }
 }
-
-.vue-flow__minimap {
-  position: absolute;
-  z-index: 5;
-  bottom: 10px;
-  right: 10px;
-}

packages/core/src/theme-default.css

@@ -5,23 +5,7 @@
   --vf-handle: #555;
 }
 
-.vue-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-}
-
 .vue-flow__edge {
-  &.selected {
-    .vue-flow__edge-path {
-      stroke: #555;
-    }
-  }
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
   &.updating {
     .vue-flow__edge-path {
       stroke: #777;
@@ -59,12 +43,11 @@
   border-radius: 3px;
   width: 150px;
   font-size: 12px;
-  color: var(--vf-node-text);
   text-align: center;
   border-width: 1px;
   border-style: solid;
-
+  color: var(--vf-node-text);
-  background: var(--vf-node-bg);
+  background-color: var(--vf-node-bg);
   border-color: var(--vf-node-color);
 
   &.selected,
@@ -109,9 +92,15 @@
   --vf-box-shadow: var(--vf-node-color);
 }
 
-.vue-flow__nodesselection-rect {
+.vue-flow__nodesselection-rect,
+.vue-flow__selection {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
+
+  &:focus,
+  &:focus-visible {
+     outline: none;
+   }
 }
 
 .vue-flow__handle {
@@ -120,10 +109,6 @@
   background: var(--vf-handle);
   border: 1px solid #fff;
   border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
 }
 
 .vue-flow__minimap {