feat(lasso-tool): improve colors

Use same color like selection outline to match users mental model.

assets/diagram-js.css

@@ -15,6 +15,7 @@
   --color-blue-205-100-45: hsl(205, 100%, 45%);
   --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
   --color-blue-205-100-50: hsl(205, 100%, 50%);
+  --color-blue-205-100-50-opacity-15: hsla(205, 100%, 50%, 15%);
   --color-blue-205-100-70: hsl(205, 100%, 75%);
   --color-blue-205-100-95: hsl(205, 100%, 95%);
 
@@ -27,7 +28,6 @@
 
   --color-white: hsl(0, 0%, 100%);
   --color-black: hsl(0, 0%, 0%);
-  --color-black-opacity-05: hsla(0, 0%, 0%, 5%);
   --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
 
   --canvas-fill-color: var(--color-white);
@@ -43,8 +43,8 @@
   --element-selected-outline-stroke-color: var(--color-blue-205-100-50);
   --element-selected-outline-secondary-stroke-color: var(--color-blue-205-100-70);
 
-  --lasso-fill-color: var(--color-black-opacity-05);
-  --lasso-stroke-color: var(--color-black);
+  --lasso-fill-color: var(--color-blue-205-100-50-opacity-15);
+  --lasso-stroke-color: var(--element-selected-outline-stroke-color);
 
   --palette-entry-color: var(--color-grey-225-10-15);
   --palette-entry-hover-color: var(--color-blue-205-100-45);
@@ -171,10 +171,8 @@ svg.new-parent {
 */
 .djs-lasso-overlay {
   fill: var(--lasso-fill-color);
-
-  stroke-dasharray: 5 1 3 1;
   stroke: var(--lasso-stroke-color);
-
+  stroke-width: 2px;
   shape-rendering: geometricPrecision;
   pointer-events: none;
 }
@@ -200,7 +198,7 @@ svg.new-parent {
   fill: var(--resizer-fill-color);
   stroke-width: 1px;
   stroke: var(--resizer-stroke-color);
-  shape-rendering: geometricprecision;
+  shape-rendering: geometricPrecision;
 }
 
 .djs-resizer:hover .djs-resizer-visual {