refactor(styles): cleanup

packages/core/package.json

@@ -17,6 +17,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.0",
+    "@types/d3": "^7.4.0",
+    "@types/react": "^18.0.15",
     "classcat": "^5.0.3",
     "d3-drag": "^3.0.0",
     "d3-selection": "^3.0.0",
@@ -32,8 +34,6 @@
     "nocss"
   ],
   "devDependencies": {
-    "@types/d3": "^7.4.0",
-    "@types/react": "^18.0.15",
     "autoprefixer": "^10.4.8",
     "postcss": "^8.4.14",
     "postcss-cli": "^10.0.0",

packages/core/src/styles/base.css

@@ -1,11 +1,14 @@
-/* these are very simple styles so that it doesnt look broken */
+/* this will be exported as base.css and can be used for a basic styling */
 @import './init.css';
 
 .react-flow__handle {
   background-color: #333;
 }
 
-.react-flow__node {
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
   border-width: 1px;
   border-style: solid;
   border-color: #bbb;

packages/core/src/styles/style.css

@@ -1,3 +1,4 @@
+/* this gets exported as style.css and can be used for the default theming */
 @import './init.css';
 
 .react-flow__edge {
@@ -12,7 +13,10 @@
   }
 }
 
-.react-flow__node {
+.react-flow__node-default,
+.react-flow__node-input,
+.react-flow__node-output,
+.react-flow__node-group {
   padding: 10px;
   border-radius: 3px;
   width: 150px;
@@ -35,11 +39,11 @@
       outline: none;
     }
   }
+}
 
-  &-group {
-    background: rgba(240, 240, 240, 0.25);
-    border-color: #1a192b;
-  }
+.react-flow__node-group {
+  background: rgba(240, 240, 240, 0.25);
+  border-color: #1a192b;
 }
 
 .react-flow__nodesselection-rect,
@@ -59,8 +63,4 @@
   background: #1a192b;
   border: 1px solid white;
   border-radius: 100%;
-
-  &.connectable {
-    cursor: crosshair;
-  }
 }