feat(theme,types): Add css vars for overwriting node colors

* Add Styles type

package/src/theme-default.css

@@ -1,3 +1,10 @@
+:root {
+  --vf-node-bg: #fff;
+  --vf-node-text: #222;
+  --vf-connection-path:  #b1b1b7;
+  --vf-handle: #555;
+}
+
 .vue-flow__selection {
   background: rgba(0, 89, 220, 0.08);
   border: 1px dotted rgba(0, 89, 220, 0.8);
@@ -32,11 +39,11 @@
 }
 
 .vue-flow__edge-textbg {
-  fill: white;
+  fill: #fff;
 }
 
 .vue-flow__connection-path {
-  stroke: #b1b1b7;
+  stroke: var(--vf-connection-path);
   stroke-width: 1;
 }
 
@@ -51,10 +58,22 @@
   border-radius: 3px;
   width: 150px;
   font-size: 12px;
-  color: #222;
+  color: var(--vf-node-text);
   text-align: center;
   border-width: 1px;
   border-style: solid;
+
+  background: var(--vf-node-bg);
+  border-color: var(--vf-node-color);
+
+  &.selected,
+  &.selected:hover {
+     box-shadow: 0 0 0 0.5px var(--vf-box-shadow);
+   }
+
+  .vue-flow__handle {
+    background: var(--vf-handle);
+  }
 }
 
 .vue-flow__node-default.selectable,
@@ -66,45 +85,27 @@
 }
 
 .vue-flow__node-input {
-  background: #fff;
+  --vf-node-color: #0041d0;
-  border-color: #0041d0;
+  --vf-handle: var(--vf-node-color);
+  --vf-box-shadow: var(--vf-node-color);
 
-  &.selected,
+  background: var(--vf-node-bg);
-  &.selected:hover {
+  border-color: var(--vf-node-color);
-    box-shadow: 0 0 0 0.5px #0041d0;
-  }
-
-  .vue-flow__handle {
-    background: #0041d0;
-  }
 }
 
 .vue-flow__node-default {
-  background: #fff;
+  --vf-node-color: #1a192b;
-  border-color: #1a192b;
+  --vf-handle: var(--vf-node-color);
+  --vf-box-shadow: var(--vf-node-color);
 
-  &.selected,
+  background: var(--vf-node-bg);
-  &.selected:hover {
+  border-color: var(--vf-node-color);
-    box-shadow: 0 0 0 0.5px #1a192b;
-  }
-
-  .vue-flow__handle {
-    background: #1a192b;
-  }
 }
 
 .vue-flow__node-output {
-  background: #fff;
+  --vf-node-color: #ff0072;
-  border-color: #ff0072;
+  --vf-handle: var(--vf-node-color);
-
+  --vf-box-shadow: var(--vf-node-color);
-  &.selected,
-  &.selected:hover {
-    box-shadow: 0 0 0 0.5px #ff0072;
-  }
-
-  .vue-flow__handle {
-    background: #ff0072;
-  }
 }
 
 .vue-flow__nodesselection-rect {
@@ -116,8 +117,8 @@
   position: absolute;
   width: 6px;
   height: 6px;
-  background: #555;
+  background: var(--vf-handle);
-  border: 1px solid white;
+  border: 1px solid #fff;
   border-radius: 100%;
 
   &.connectable {

package/src/types/flow.ts

@@ -11,8 +11,18 @@ export type ElementData = Record<any, any>
 export type FlowElement<NodeData = ElementData, EdgeData = ElementData> = GraphNode<NodeData> | GraphEdge<EdgeData>
 export type FlowElements<NodeData = ElementData, EdgeData = ElementData> = (FlowElement<NodeData> | FlowElement<EdgeData>)[]
 
+export type CustomThemeVars = Record<string, string | number>
+export type CSSVars =
+  | '--vf-node-color'
+  | '--vf-box-shadow'
+  | '--vf-node-bg'
+  | '--vf-node-text'
+  | '--vf-connection-path'
+  | '--vf-handle'
+export type ThemeVars = { [key in CSSVars]?: CSSProperties['color'] }
+export type Styles = CSSProperties & ThemeVars & CustomThemeVars
 export type ClassFunc<Data = ElementData> = (element: FlowElement<Data>) => string
-export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => CSSProperties
+export type StyleFunc<Data = ElementData> = (element: FlowElement<Data>) => Styles
 
 /** base element props */
 export interface Element<Data extends ElementData = ElementData> {
@@ -26,7 +36,7 @@ export interface Element<Data extends ElementData = ElementData> {
   type?: string
   data?: Data
   class?: string | ClassFunc<Data>
-  style?: CSSProperties | StyleFunc<Data>
+  style?: Styles | StyleFunc<Data>
   hidden?: boolean
 }
 export type Elements<NodeData = ElementData, EdgeData = ElementData> = (Node<NodeData> | Edge<EdgeData>)[]