feat(styles): one stylesheet source for react and svelte (#3350)

* feat(styles): create stylesheets for react and svelte based on one source

* refactor(styling): cleanup

* refactor(postcss): share a config

* refactor(postcss): replace env hack with env file

examples/vite-app/src/examples/CustomNode/index.tsx

@@ -11,6 +11,7 @@ import {
   Connection,
   useNodesState,
   useEdgesState,
+  Background,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -133,7 +134,6 @@ const CustomNodeFlow = () => {
       onNodeClick={onNodeClick}
       onConnect={onConnect}
       onNodeDragStop={onNodeDragStop}
-      style={{ background: bgColor }}
       onInit={onInit}
       nodeTypes={nodeTypes}
       connectionLineStyle={connectionLineStyle}
@@ -158,6 +158,7 @@ const CustomNodeFlow = () => {
         }}
       />
       <Controls />
+      <Background bgColor={bgColor} />
     </ReactFlow>
   );
 };

package.json

@@ -22,17 +22,11 @@
     "@changesets/cli": "^2.25.0",
     "@typescript-eslint/eslint-plugin": "latest",
     "@typescript-eslint/parser": "latest",
-    "autoprefixer": "^10.4.8",
     "concurrently": "^7.6.0",
     "eslint": "^8.22.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "latest",
-    "postcss": "^8.4.21",
-    "postcss-cli": "^10.1.0",
-    "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-import": "^15.1.0",
-    "postcss-nested": "^6.0.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/react/package.json

@@ -42,7 +42,7 @@
   "scripts": {
     "dev": "concurrently \"rollup --config node:@xyflow/rollup-config --watch\" pnpm:css-watch",
     "build": "rollup --config node:@xyflow/rollup-config --environment NODE_ENV:production && npm run css",
-    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/postcss.config.js --dir dist",
+    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config/ --dir dist ",
     "css-watch": "pnpm css --watch",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx src",
     "typecheck": "tsc --noEmit"
@@ -70,6 +70,14 @@
     "@xyflow/eslint-config": "workspace:*",
     "@xyflow/rollup-config": "workspace:*",
     "@xyflow/tsconfig": "workspace:*",
+    "autoprefixer": "^10.4.15",
+    "cssnano": "^6.0.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-rename": "^0.6.1",
     "react": "^18.2.0",
     "typescript": "5.1.3"
   },

packages/react/src/additional-components/Background/Background.tsx

@@ -1,4 +1,4 @@
-import { memo, useRef } from 'react';
+import { CSSProperties, memo, useRef } from 'react';
 import cc from 'classcat';
 import { shallow } from 'zustand/shallow';
 
@@ -6,12 +6,7 @@ import { useStore } from '../../hooks/useStore';
 import { type ReactFlowState } from '../../types';
 import { BackgroundProps, BackgroundVariant } from './types';
 import { DotPattern, LinePattern } from './Patterns';
-
-const defaultColor = {
-  [BackgroundVariant.Dots]: '#91919a',
-  [BackgroundVariant.Lines]: '#eee',
-  [BackgroundVariant.Cross]: '#e2e2e2',
-};
+import { containerStyle } from '../../styles/utils';
 
 const defaultSize = {
   [BackgroundVariant.Dots]: 1,
@@ -31,12 +26,13 @@ function Background({
   lineWidth = 1,
   offset = 2,
   color,
+  bgColor,
   style,
   className,
+  patternClassName,
 }: BackgroundProps) {
   const ref = useRef<SVGSVGElement>(null);
   const { transform, patternId } = useStore(selector, shallow);
-  const patternColor = color || defaultColor[variant];
   const patternSize = size || defaultSize[variant];
   const isDots = variant === BackgroundVariant.Dots;
   const isCross = variant === BackgroundVariant.Cross;
@@ -53,14 +49,14 @@ function Background({
   return (
     <svg
       className={cc(['react-flow__background', className])}
-      style={{
-        ...style,
-        position: 'absolute',
-        width: '100%',
-        height: '100%',
-        top: 0,
-        left: 0,
-      }}
+      style={
+        {
+          ...style,
+          ...containerStyle,
+          '--background-color-props': bgColor,
+          '--background-pattern-color-props': color,
+        } as CSSProperties
+      }
       ref={ref}
       data-testid="rf__background"
     >
@@ -74,9 +70,14 @@ function Background({
         patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
       >
         {isDots ? (
-          <DotPattern color={patternColor} radius={scaledSize / offset} />
+          <DotPattern radius={scaledSize / offset} className={patternClassName} />
         ) : (
-          <LinePattern dimensions={patternDimensions} color={patternColor} lineWidth={lineWidth} />
+          <LinePattern
+            dimensions={patternDimensions}
+            lineWidth={lineWidth}
+            variant={variant}
+            className={patternClassName}
+          />
         )}
       </pattern>
       <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId + id})`} />

packages/react/src/additional-components/Background/Patterns.tsx

@@ -1,30 +1,31 @@
+import cc from 'classcat';
+
+import { BackgroundVariant } from './types';
+
 type LinePatternProps = {
   dimensions: [number, number];
+  variant: BackgroundVariant;
   lineWidth?: number;
-  color: string;
+  className?: string;
 };
 
-export function LinePattern({
-  color,
-  dimensions,
-  lineWidth,
-}: LinePatternProps) {
+export function LinePattern({ dimensions, lineWidth, variant, className }: LinePatternProps) {
   return (
     <path
-      stroke={color}
       strokeWidth={lineWidth}
-      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${
-        dimensions[0]
-      }`}
+      d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
+      className={cc(['react-flow__background-pattern', variant, className])}
     />
   );
 }
 
 type DotPatternProps = {
   radius: number;
-  color: string;
+  className?: string;
 };
 
-export function DotPattern({ color, radius }: DotPatternProps) {
-  return <circle cx={radius} cy={radius} r={radius} fill={color} />;
+export function DotPattern({ radius, className }: DotPatternProps) {
+  return (
+    <circle cx={radius} cy={radius} r={radius} className={cc(['react-flow__background-pattern', 'dot', className])} />
+  );
 }

packages/react/src/additional-components/Background/types.ts

@@ -7,9 +7,11 @@ export enum BackgroundVariant {
 }
 
 export type BackgroundProps = {
-  id?: string
+  id?: string;
   color?: string;
+  bgColor?: string;
   className?: string;
+  patternClassName?: string;
   gap?: number | [number, number];
   size?: number;
   offset?: number;

packages/react/src/container/NodeRenderer/index.tsx

@@ -4,7 +4,7 @@ import { internalsSymbol, errorMessages, Position, clampPosition, getPositionWit
 
 import useVisibleNodes from '../../hooks/useVisibleNodes';
 import { useStore } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import { GraphViewProps } from '../GraphView';
 import type { NodeTypesWrapped, ReactFlowState, WrapNodeProps } from '../../types';
 

packages/react/src/container/Pane/index.tsx

@@ -8,7 +8,7 @@ import cc from 'classcat';
 import { getNodesInside, getEventPosition, SelectionMode } from '@xyflow/system';
 
 import UserSelection from '../../components/UserSelection';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import { useStore, useStoreApi } from '../../hooks/useStore';
 import { getSelectionChanges, getConnectedEdges } from '../../utils';
 import type { ReactFlowProps, ReactFlowState, NodeChange, EdgeChange } from '../../types';

packages/react/src/container/ZoomPane/index.tsx

@@ -6,7 +6,7 @@ import { XYPanZoom, PanOnScrollMode, type Transform, type PanZoomInstance } from
 import useKeyPress from '../../hooks/useKeyPress';
 import useResizeHandler from '../../hooks/useResizeHandler';
 import { useStore, useStoreApi } from '../../hooks/useStore';
-import { containerStyle } from '../../styles';
+import { containerStyle } from '../../styles/utils';
 import type { FlowRendererProps } from '../FlowRenderer';
 import type { ReactFlowState } from '../../types';
 

packages/react/src/styles/base.css

@@ -1,28 +1,3 @@
 /* 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-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bbb;
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-    border: 1px solid #555;
-  }
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(150, 150, 180, 0.1);
-  border: 1px dotted rgba(155, 155, 155, 0.8);
-}
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/base.css';

packages/react/src/styles/init.css

@@ -1,238 +0,0 @@
-/* these are the necessary styles for React Flow, they get used by base.css and style.css */
-.react-flow__container {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.react-flow__pane {
-  z-index: 1;
-  cursor: grab;
-
-  &.selection {
-    cursor: pointer;
-  }
-
-  &.dragging {
-    cursor: grabbing;
-  }
-}
-
-.react-flow__viewport {
-  transform-origin: 0 0;
-  z-index: 2;
-  pointer-events: none;
-}
-
-.react-flow__renderer {
-  z-index: 4;
-}
-
-.react-flow__selection {
-  z-index: 6;
-}
-
-.react-flow__nodesselection-rect:focus,
-.react-flow__nodesselection-rect:focus-visible {
-  outline: none;
-}
-
-.react-flow .react-flow__edges {
-  pointer-events: none;
-  overflow: visible;
-}
-
-.react-flow__edge-path,
-.react-flow__connection-path {
-  stroke: #b1b1b7;
-  stroke-width: 1;
-  fill: none;
-}
-
-.react-flow__edge {
-  pointer-events: visibleStroke;
-  cursor: pointer;
-
-  &.animated path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  &.animated path.react-flow__edge-interaction {
-    stroke-dasharray: none;
-    animation: none;
-  }
-
-  &.inactive {
-    pointer-events: none;
-  }
-
-  &.selected,
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-
-  &.selected .react-flow__edge-path,
-  &:focus .react-flow__edge-path,
-  &:focus-visible .react-flow__edge-path {
-    stroke: #555;
-  }
-
-  &-textwrapper {
-    pointer-events: all;
-  }
-
-  &-textbg {
-    fill: white;
-  }
-
-  .react-flow__edge-text {
-    pointer-events: none;
-    user-select: none;
-  }
-}
-
-.react-flow__connection {
-  pointer-events: none;
-
-  .animated {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-}
-
-.react-flow__connectionline {
-  z-index: 1001;
-}
-
-.react-flow__nodes {
-  pointer-events: none;
-  transform-origin: 0 0;
-}
-
-.react-flow__node {
-  position: absolute;
-  user-select: none;
-  pointer-events: all;
-  transform-origin: 0 0;
-  box-sizing: border-box;
-  cursor: grab;
-
-  &.dragging {
-    cursor: grabbing;
-  }
-}
-
-.react-flow__nodesselection {
-  z-index: 3;
-  transform-origin: left top;
-  pointer-events: none;
-
-  &-rect {
-    position: absolute;
-    pointer-events: all;
-    cursor: grab;
-  }
-}
-
-.react-flow__handle {
-  position: absolute;
-  pointer-events: none;
-  min-width: 5px;
-  min-height: 5px;
-
-  &.connectionindicator {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-
-  &-bottom {
-    top: auto;
-    left: 50%;
-    bottom: -4px;
-    transform: translate(-50%, 0);
-  }
-
-  &-top {
-    left: 50%;
-    top: -4px;
-    transform: translate(-50%, 0);
-  }
-
-  &-left {
-    top: 50%;
-    left: -4px;
-    transform: translate(0, -50%);
-  }
-
-  &-right {
-    right: -4px;
-    top: 50%;
-    transform: translate(0, -50%);
-  }
-}
-
-.react-flow__edgeupdater {
-  cursor: move;
-  pointer-events: all;
-}
-
-.react-flow__panel {
-  position: absolute;
-  z-index: 5;
-  margin: 15px;
-
-  &.top {
-    top: 0;
-  }
-
-  &.bottom {
-    bottom: 0;
-  }
-
-  &.left {
-    left: 0;
-  }
-
-  &.right {
-    right: 0;
-  }
-
-  &.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
-.react-flow__attribution {
-  font-size: 10px;
-  background: rgba(255, 255, 255, 0.5);
-  padding: 2px 3px;
-  margin: 0;
-
-  a {
-    text-decoration: none;
-    color: #999;
-  }
-}
-
-@keyframes dashdraw {
-  from {
-    stroke-dashoffset: 10;
-  }
-}
-
-.react-flow__edgelabel-renderer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  user-select: none;
-}
-
-.react-flow__minimap {
-  background-color: #fff;
-}

packages/react/src/styles/node-resizer.css

@@ -1,105 +0,0 @@
-.react-flow__resize-control {
-  position: absolute;
-}
-
-.react-flow__resize-control.left,
-.react-flow__resize-control.right {
-  cursor: ew-resize;
-}
-
-.react-flow__resize-control.top,
-.react-flow__resize-control.bottom {
-  cursor: ns-resize;
-}
-
-.react-flow__resize-control.top.left,
-.react-flow__resize-control.bottom.right {
-  cursor: nwse-resize;
-}
-
-.react-flow__resize-control.bottom.left,
-.react-flow__resize-control.top.right {
-  cursor: nesw-resize;
-}
-
-/* handle styles */
-.react-flow__resize-control.handle {
-  width: 4px;
-  height: 4px;
-  border: 1px solid #fff;
-  border-radius: 1px;
-  background-color: #3367d9;
-  transform: translate(-50%, -50%);
-}
-
-.react-flow__resize-control.handle.left {
-  left: 0;
-  top: 50%;
-}
-.react-flow__resize-control.handle.right {
-  left: 100%;
-  top: 50%;
-}
-.react-flow__resize-control.handle.top {
-  left: 50%;
-  top: 0;
-}
-.react-flow__resize-control.handle.bottom {
-  left: 50%;
-  top: 100%;
-}
-.react-flow__resize-control.handle.top.left {
-  left: 0;
-}
-.react-flow__resize-control.handle.bottom.left {
-  left: 0;
-}
-.react-flow__resize-control.handle.top.right {
-  left: 100%;
-}
-.react-flow__resize-control.handle.bottom.right {
-  left: 100%;
-}
-
-/* line styles */
-.react-flow__resize-control.line {
-  border-color: #3367d9;
-  border-width: 0;
-  border-style: solid;
-}
-
-.react-flow__resize-control.line.left,
-.react-flow__resize-control.line.right {
-  width: 1px;
-  transform: translate(-50%, 0);
-  top: 0;
-  height: 100%;
-}
-
-.react-flow__resize-control.line.left {
-  left: 0;
-  border-left-width: 1px;
-}
-
-.react-flow__resize-control.line.right {
-  left: 100%;
-  border-right-width: 1px;
-}
-
-.react-flow__resize-control.line.top,
-.react-flow__resize-control.line.bottom {
-  height: 1px;
-  transform: translate(0, -50%);
-  left: 0;
-  width: 100%;
-}
-
-.react-flow__resize-control.line.top {
-  top: 0;
-  border-top-width: 1px;
-}
-
-.react-flow__resize-control.line.bottom {
-  border-bottom-width: 1px;
-  top: 100%;
-}

packages/react/src/styles/style.css

@@ -1,110 +1,4 @@
 /* this gets exported as style.css and can be used for the default theming */
-@import './init.css';
-@import './node-resizer.css';
-
-.react-flow__edge {
-  &.updating {
-    .react-flow__edge-path {
-      stroke: #777;
-    }
-  }
-
-  &-text {
-    font-size: 10px;
-  }
-}
-
-.react-flow__node.selectable {
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__node-default,
-.react-flow__node-input,
-.react-flow__node-output,
-.react-flow__node-group {
-  padding: 10px;
-  border-radius: 3px;
-  width: 150px;
-  font-size: 12px;
-  color: #222;
-  text-align: center;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #1a192b;
-  background-color: white;
-
-  &.selectable {
-    &:hover {
-      box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
-    }
-
-    &.selected,
-    &:focus,
-    &:focus-visible {
-      box-shadow: 0 0 0 0.5px #1a192b;
-    }
-  }
-}
-
-.react-flow__node-group {
-  background-color: rgba(240, 240, 240, 0.25);
-}
-
-.react-flow__nodesselection-rect,
-.react-flow__selection {
-  background: rgba(0, 89, 220, 0.08);
-  border: 1px dotted rgba(0, 89, 220, 0.8);
-
-  &:focus,
-  &:focus-visible {
-    outline: none;
-  }
-}
-
-.react-flow__handle {
-  width: 6px;
-  height: 6px;
-  background: #1a192b;
-  border: 1px solid white;
-  border-radius: 100%;
-}
-
-.react-flow__controls {
-  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.08);
-
-  &-button {
-    border: none;
-    background: #fefefe;
-    border-bottom: 1px solid #eee;
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-
-    &:hover {
-      background: #f4f4f4;
-    }
-
-    svg {
-      width: 100%;
-      max-width: 12px;
-      max-height: 12px;
-    }
-
-    &:disabled {
-      pointer-events: none;
-
-      svg {
-        fill-opacity: 0.4;
-      }
-    }
-  }
-}
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/style.css';
+@import '../../../system/src/styles/node-resizer.css';

packages/svelte/package.json

@@ -12,10 +12,12 @@
     "xyflow"
   ],
   "scripts": {
-    "dev": "vite dev",
+    "dev": "concurrently \"vite dev\" pnpm:css-watch",
     "build": "svelte-kit sync && svelte-package -o dist",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "css": "postcss src/styles/{base,style}.css --config ./../../tooling/postcss-config --dir dist",
+    "css-watch": "pnpm css --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "typecheck": "pnpm check"
@@ -43,9 +45,18 @@
     "@sveltejs/package": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^5.60.0",
+    "autoprefixer": "^10.4.15",
+    "cssnano": "^6.0.1",
+    "dotenv": "^16.3.1",
     "eslint": "^8.43.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-svelte": "^2.31.1",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^15.1.0",
+    "postcss-nested": "^6.0.0",
+    "postcss-rename": "^0.6.1",
     "prettier": "^2.8.8",
     "prettier-plugin-svelte": "^2.10.1",
     "svelte": "^4.2.0",

packages/svelte/src/lib/components/Attribution/Attribution.svelte

@@ -24,17 +24,3 @@
     </a>
   </Panel>
 {/if}
-
-<style>
-  :global(.svelte-flow__panel.svelte-flow__attribution) {
-    font-size: 10px;
-    background: rgba(255, 255, 255, 0.5);
-    padding: 2px 3px;
-    margin: 0;
-  }
-
-  :global(.svelte-flow__attribution) a {
-    text-decoration: none;
-    color: #999;
-  }
-</style>

packages/svelte/src/lib/components/BaseEdge/BaseEdge.svelte

@@ -47,30 +47,3 @@
     </div>
   </EdgeLabelRenderer>
 {/if}
-
-<style>
-  .svelte-flow__edge-label {
-    position: absolute;
-    background: white;
-  }
-
-  .svelte-flow__edge-path {
-    stroke: var(--edge-color, var(--edge-color-default));
-    stroke-width: 1;
-  }
-
-  :global(.selected) .svelte-flow__edge-path {
-    stroke: var(--edge-color-selected, var(--edge-color-selected-default));
-  }
-
-  :global(.animated) .svelte-flow__edge-path {
-    stroke-dasharray: 5;
-    animation: dashdraw 0.5s linear infinite;
-  }
-
-  @keyframes dashdraw {
-    from {
-      stroke-dashoffset: 10;
-    }
-  }
-</style>

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -13,27 +13,3 @@
     </g>
   </svg>
 {/if}
-
-<style>
-  .svelte-flow__connectionline {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    overflow: visible;
-    z-index: 1001;
-  }
-
-  .svelte-flow__connection {
-    pointer-events: none;
-  }
-
-  .svelte-flow__edge-path,
-  .svelte-flow__connection-path {
-    stroke: var(--connection-line-color, var(--connection-line-color-default));
-    stroke-width: 1;
-    fill: none;
-  }
-</style>

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -89,10 +89,3 @@
     markerEnd={markerEndUrl}
   />
 </g>
-
-<style>
-  .svelte-flow__edge {
-    pointer-events: visibleStroke;
-    cursor: pointer;
-  }
-</style>

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -93,6 +93,7 @@
   class:connectablestart={isConnectableStart}
   class:connectableend={isConnectableEnd}
   class:connectable={isConnectable}
+  class:connectionindicator={isConnectable}
   on:mousedown={onPointerDown}
   on:touchstart={onPointerDown}
   {style}
@@ -101,46 +102,3 @@
 >
   <slot />
 </div>
-
-<style>
-  .svelte-flow__handle {
-    position: absolute;
-    pointer-events: none;
-    min-width: 5px;
-    min-height: 5px;
-    width: 6px;
-    height: 6px;
-    background: var(--handle-background-color, var(--handle-background-color-default));
-    border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
-    border-radius: 100%;
-  }
-
-  .connectable {
-    pointer-events: all;
-    cursor: crosshair;
-  }
-
-  .bottom {
-    top: 100%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  .top {
-    left: 50%;
-    top: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .left {
-    top: 50%;
-    left: 0;
-    transform: translate(-50%, -50%);
-  }
-
-  .right {
-    top: 50%;
-    left: 100%;
-    transform: translate(-50%, -50%);
-  }
-</style>

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -75,6 +75,8 @@
 
     dispatchEvent('nodeclick');
   }
+
+  // @todo: add selectable state
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -95,6 +97,7 @@
   class:selected
   class:draggable
   class:connectable
+  class:selectable
   class:parent={isParent}
   style:z-index={zIndex}
   style:transform="translate({positionOrigin?.x ?? 0}px, {positionOrigin?.y ?? 0}px)"
@@ -123,33 +126,3 @@
     on:connectend
   />
 </div>
-
-<style>
-  .svelte-flow__node {
-    border-radius: 3px;
-    color: var(--node-color, var(--node-color-default));
-    text-align: center;
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--node-border-color, var(--node-border-color-default));
-    background-color: var(--node-background-color, var(--node-background-color-default));
-    position: absolute;
-    pointer-events: none;
-    user-select: none;
-  }
-
-  .draggable {
-    cursor: grab;
-    pointer-events: all;
-  }
-
-  .selected {
-    outline: none;
-    box-shadow: 0 0 0 0.5px
-      var(--node-shadow-color-selected, var(--node-shadow-color-selected-default));
-  }
-
-  .dragging {
-    cursor: grabbing;
-  }
-</style>

packages/svelte/src/lib/components/Selection/Selection.svelte

@@ -18,13 +18,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    background: rgba(0, 89, 220, 0.08);
-    border: 1px dotted rgba(0, 89, 220, 0.8);
-    z-index: 6;
-  }
-
-  .svelte-flow__selection:focus,
-  .svelte-flow__selection:focus-visible {
-    outline: none;
   }
 </style>

packages/svelte/src/lib/container/EdgeRenderer/EdgeRenderer.svelte

@@ -30,7 +30,5 @@
     position: absolute;
     top: 0;
     left: 0;
-    pointer-events: none;
-    overflow: visible;
   }
 </style>

packages/svelte/src/lib/container/NodeRenderer/NodeRenderer.svelte

@@ -79,7 +79,8 @@
   .svelte-flow__nodes {
     width: 100%;
     height: 100%;
-    pointer-events: none;
-    transform-origin: 0 0;
+    position: absolute;
+    left: 0;
+    top: 0;
   }
 </style>

packages/svelte/src/lib/container/Pane/Pane.svelte

@@ -203,20 +203,10 @@
 
 <style>
   .svelte-flow__pane {
-    cursor: grab;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    z-index: 1;
-  }
-
-  .selection {
-    cursor: pointer;
-  }
-
-  .dragging {
-    cursor: grabbing;
   }
 </style>

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -16,32 +16,3 @@
 <div class={cc(['svelte-flow__panel', className, ...positionClasses])} {style} {...$$restProps}>
   <slot />
 </div>
-
-<style>
-  .svelte-flow__panel {
-    position: absolute;
-    z-index: 5;
-    margin: 15px;
-  }
-
-  .svelte-flow__panel.top {
-    top: 0;
-  }
-
-  .svelte-flow__panel.bottom {
-    bottom: 0;
-  }
-
-  .svelte-flow__panel.left {
-    left: 0;
-  }
-
-  .svelte-flow__panel.right {
-    right: 0;
-  }
-
-  .svelte-flow__panel.center {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-</style>

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -175,25 +175,10 @@
     background-color: var(--background-color, var(--background-color-default));
   }
 
-  .svelte-flow :global(.svelte-flow__node-default),
-  .svelte-flow :global(.svelte-flow__node-input),
-  .svelte-flow :global(.svelte-flow__node-output) {
-    padding: 10px;
-  }
-
-  .svelte-flow__edgelabel-renderer {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    pointer-events: none;
-    user-select: none;
-  }
-
   :root {
     --background-color-default: #fff;
     --background-pattern-color-default: #ddd;
 
-    --minimap-background-color-default: #fff;
     --minimap-mask-color-default: rgb(240, 240, 240, 0.6);
     --minimap-mask-stroke-color-default: none;
     --minimap-mask-stroke-width-default: 1;
@@ -203,18 +188,5 @@
     --controls-button-color-default: inherit;
     --controls-button-color-hover-default: inherit;
     --controls-button-border-color-default: #eee;
-
-    --edge-color-default: #cfcfcf;
-    --edge-color-selected-default: #555;
-
-    --node-color-default: inherit;
-    --node-border-color-default: #1a192b;
-    --node-background-color-default: #fff;
-    --node-shadow-color-selected-default: #1a192b;
-
-    --handle-background-color-default: #1a192b;
-    --handle-border-color-default: #fff;
-
-    --connection-line-color-default: #b1b1b7;
   }
 </style>

packages/svelte/src/lib/container/Viewport/Viewport.svelte

@@ -16,10 +16,7 @@
     width: 100%;
     height: 100%;
     position: absolute;
-    transform-origin: 0 0;
     top: 0;
     left: 0;
-    z-index: 2;
-    pointer-events: none;
   }
 </style>

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -22,6 +22,7 @@
   export let lineWidth: $$Props['lineWidth'] = 1;
   export let bgColor: $$Props['bgColor'] = undefined;
   export let patternColor: $$Props['patternColor'] = undefined;
+  export let patternClassName: $$Props['patternClassName'] = undefined;
   let className: $$Props['class'] = '';
   export { className as class };
 
@@ -44,6 +45,7 @@
   class={cc(['svelte-flow__background', className])}
   data-testid="svelte-flow__background"
   style:--background-color-props={bgColor}
+  style:--pattern-color-props={patternColor}
 >
   <pattern
     id={patternId}
@@ -55,9 +57,9 @@
     patternTransform={`translate(-${patternOffset[0]},-${patternOffset[1]})`}
   >
     {#if isDots}
-      <DotPattern color={patternColor} radius={scaledSize / 2} />
+      <DotPattern radius={scaledSize / 2} class={patternClassName} />
     {:else}
-      <LinePattern dimensions={patternDimensions} color={patternColor} {lineWidth} />
+      <LinePattern dimensions={patternDimensions} {variant} {lineWidth} class={patternClassName} />
     {/if}
   </pattern>
   <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
@@ -70,8 +72,5 @@
     height: 100%;
     top: 0;
     left: 0;
-    pointer-events: none;
-    z-index: -1;
-    background-color: var(--background-color-props, 'transparent');
   }
 </style>

packages/svelte/src/lib/plugins/Background/DotPattern.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
+  import cc from 'classcat';
+
   export let radius = 5;
-  export let color: string | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
-<circle cx={radius} cy={radius} r={radius} style:--pattern-color-props={color} />
-
-<style>
-  circle {
-    fill: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>
+<circle
+  cx={radius}
+  cy={radius}
+  r={radius}
+  class={cc(['svelte-flow__background-pattern', 'dot', className])}
+/>

packages/svelte/src/lib/plugins/Background/LinePattern.svelte

@@ -1,20 +1,16 @@
 <script lang="ts">
+  import cc from 'classcat';
+  import type { BackgroundVariant } from './types';
+
   export let lineWidth = 1;
-  export let color: string | undefined = undefined;
   export let dimensions: [number, number];
+  export let variant: BackgroundVariant | undefined = undefined;
+  let className: string = '';
+  export { className as class };
 </script>
 
 <path
   stroke-width={lineWidth}
   d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
-  style:--pattern-color-props={color}
+  class={cc(['svelte-flow__background-pattern', variant, className])}
 />
-
-<style>
-  path {
-    stroke: var(
-      --pattern-color-props,
-      var(--background-pattern-color, var(--background-pattern-color-default))
-    );
-  }
-</style>

packages/svelte/src/lib/plugins/Background/types.ts

@@ -7,6 +7,7 @@ export enum BackgroundVariant {
 export type BackgroundProps = {
   bgColor?: string;
   patternColor?: string;
+  patternClassName?: string;
   class?: string;
   gap?: number | [number, number];
   size?: number;

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -24,59 +24,3 @@
 >
   <slot class="button-svg" />
 </button>
-
-<style>
-  .svelte-flow__controls-button {
-    border: none;
-    background: var(
-      --controls-button-background-color-props,
-      var(--controls-button-background-color, var(--controls-button-background-color-default))
-    );
-    border-bottom: 1px solid
-      var(
-        --controls-button-border-color-props,
-        var(--controls-button-border-color, var(--controls-button-border-color-default))
-      );
-    color: var(
-      --controls-button-color-props,
-      var(--controls-button-color, var(--controls-button-color-default))
-    );
-    box-sizing: content-box;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 16px;
-    height: 16px;
-    cursor: pointer;
-    user-select: none;
-    padding: 5px;
-  }
-
-  .svelte-flow__controls-button:hover {
-    background: var(
-      --controls-button-background-color-hover-props,
-      var(
-        --controls-button-background-color-hover,
-        var(--controls-button-background-color-hover-default)
-      )
-    );
-    color: var(
-      --controls-button-color-hover-props,
-      var(--controls-button-hover-color, var(--controls-button-hover-color-default))
-    );
-  }
-
-  .svelte-flow__controls-button :global(svg) {
-    width: 100%;
-    max-width: 12px;
-    max-height: 12px;
-  }
-
-  .svelte-flow__controls-button:disabled {
-    pointer-events: none;
-  }
-
-  .svelte-flow__controls-button:disabled :global(svg) {
-    fill-opacity: 0.4;
-  }
-</style>

packages/svelte/src/routes/overview/+page.svelte

@@ -12,8 +12,10 @@
     type EdgeTypes
   } from '../../lib/index';
 
-  import { CustomNode } from './CustomNode';
-  import { CustomEdge } from './CustomEdge';
+  import CustomNode from './CustomNode.svelte';
+  import CustomEdge from './CustomEdge.svelte';
+
+  import '../../styles/style.css';
 
   const nodeTypes: NodeTypes = {
     custom: CustomNode

packages/svelte/src/routes/overview/CustomEdge.svelte

@@ -5,7 +5,7 @@
     useSvelteFlow,
     type EdgeProps,
     getBezierPath
-  } from '../../../lib/index';
+  } from '../../lib/index';
 
   type $$Props = EdgeProps;
 

packages/svelte/src/routes/overview/CustomEdge/index.ts

@@ -1 +0,0 @@
-export { default as CustomEdge } from './Custom.svelte';

packages/svelte/src/routes/overview/CustomNode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { Handle, Position, type NodeProps } from '../../../lib/index';
+  import { Handle, Position, type NodeProps } from '../../lib/index';
 
   type $$Props = NodeProps;
 

packages/svelte/src/routes/overview/CustomNode/index.ts

@@ -1 +0,0 @@
-export { default as CustomNode } from './Custom.svelte';

packages/svelte/src/styles/base.css

@@ -0,0 +1,3 @@
+/* this gets exported as style.css and can be used for the default theming */
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/base.css';

packages/svelte/src/styles/style.css

@@ -0,0 +1,3 @@
+/* this gets exported as style.css and can be used for the default theming */
+@import '../../../system/src/styles/init.css';
+@import '../../../system/src/styles/style.css';

packages/svelte/vite.config.ts

@@ -2,7 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 
 const config: UserConfig = {
-  plugins: [sveltekit()]
+  plugins: [sveltekit()],
+  css: {
+    postcss: './../../tooling/postcss-config/'
+  }
 };
 
 export default config;

packages/system/src/styles/base.css

@@ -0,0 +1,33 @@
+.xy-flow {
+  --node-border-default: 1px solid #bbb;
+  --node-border-selected-default: 1px solid #555;
+
+  --handle-background-color-default: #333;
+
+  --selection-background-color-default: rgba(150, 150, 180, 0.1);
+  --selection-border-default: 1px dotted rgba(155, 155, 155, 0.8);
+}
+
+.xy-flow__handle {
+  background-color: var(--handle-background-color, var(--handle-background-color-default));
+}
+
+.xy-flow__node-input,
+.xy-flow__node-default,
+.xy-flow__node-output,
+.xy-flow__node-group {
+  border: var(--node-border, var(--node-border-default));
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+    border: var(--node-border-selected, var(--node-border-selected-default));
+  }
+}
+
+.xy-flow__nodesselection-rect,
+.xy-flow__selection {
+  background: var(--selection-background-color, var(--selection-background-color-default));
+  border: var(--selection-border, var(--selection-border-default));
+}

packages/system/src/styles/init.css

@@ -0,0 +1,298 @@
+/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
+
+.xy-flow {
+  --edge-stroke-default: #b1b1b7;
+  --edge-stroke-width-default: 1;
+  --edge-stroke-selected-default: #555;
+
+  --connectionline-stroke-default: #b1b1b7;
+  --connectionline-stroke-width-default: 1;
+
+  --attribution-background-color-default: rgba(255, 255, 255, 0.5);
+
+  --minimap-background-color-default: #fff;
+
+  --background-pattern-dot-color-default: #91919a;
+  --background-pattern-line-color-default: #eee;
+  --background-pattern-cross-color-default: #e2e2e2;
+}
+
+.xy-flow__container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.xy-flow__pane {
+  z-index: 1;
+  cursor: grab;
+
+  &.selection {
+    cursor: pointer;
+  }
+
+  &.dragging {
+    cursor: grabbing;
+  }
+}
+
+.xy-flow__viewport {
+  transform-origin: 0 0;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.xy-flow__renderer {
+  z-index: 4;
+}
+
+.xy-flow__selection {
+  z-index: 6;
+}
+
+.xy-flow__nodesselection-rect:focus,
+.xy-flow__nodesselection-rect:focus-visible {
+  outline: none;
+}
+
+.xy-flow .xy-flow__edges {
+  pointer-events: none;
+  overflow: visible;
+}
+
+.xy-flow__edge-path {
+  stroke: var(--edge-stroke, var(--edge-stroke-default));
+  stroke-width: var(--edge-stroke-width, var(--edge-stroke-width-default));
+  fill: none;
+}
+
+.xy-flow__connection-path {
+  stroke: var(--connectionline-stroke, var(--connectionline-stroke-default));
+  stroke-width: var(--connectionline-stroke-width, var(--connectionline-stroke-width-default));
+  fill: none;
+}
+
+.xy-flow__edge {
+  pointer-events: visibleStroke;
+  cursor: pointer;
+
+  &.animated path {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+
+  &.animated path.xy-flow__edge-interaction {
+    stroke-dasharray: none;
+    animation: none;
+  }
+
+  &.inactive {
+    pointer-events: none;
+  }
+
+  &.selected,
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+
+  &.selected .xy-flow__edge-path,
+  &:focus .xy-flow__edge-path,
+  &:focus-visible .xy-flow__edge-path {
+    stroke: var(--edge-stroke-selected, var(--edge-stroke-selected-default));
+  }
+
+  &-textwrapper {
+    pointer-events: all;
+  }
+
+  &-textbg {
+    fill: white;
+  }
+
+  .xy-flow__edge-text {
+    pointer-events: none;
+    user-select: none;
+  }
+}
+
+.xy-flow__connection {
+  pointer-events: none;
+
+  .animated {
+    stroke-dasharray: 5;
+    animation: dashdraw 0.5s linear infinite;
+  }
+}
+
+.xy-flow__connectionline {
+  z-index: 1001;
+}
+
+.xy-flow__nodes {
+  pointer-events: none;
+  transform-origin: 0 0;
+}
+
+.xy-flow__node {
+  position: absolute;
+  user-select: none;
+  pointer-events: all;
+  transform-origin: 0 0;
+  box-sizing: border-box;
+  cursor: grab;
+
+  &.dragging {
+    cursor: grabbing;
+  }
+
+  /* only used in Svelte Flow, should we remove it here? */
+  &.draggable {
+    cursor: grab;
+    pointer-events: all;
+  }
+}
+
+.xy-flow__nodesselection {
+  z-index: 3;
+  transform-origin: left top;
+  pointer-events: none;
+
+  &-rect {
+    position: absolute;
+    pointer-events: all;
+    cursor: grab;
+  }
+}
+
+.xy-flow__handle {
+  position: absolute;
+  pointer-events: none;
+  min-width: 5px;
+  min-height: 5px;
+
+  &.connectionindicator {
+    pointer-events: all;
+    cursor: crosshair;
+  }
+
+  &-bottom {
+    top: auto;
+    left: 50%;
+    bottom: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-top {
+    left: 50%;
+    top: -4px;
+    transform: translate(-50%, 0);
+  }
+
+  &-left {
+    top: 50%;
+    left: -4px;
+    transform: translate(0, -50%);
+  }
+
+  &-right {
+    right: -4px;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+}
+
+.xy-flow__edgeupdater {
+  cursor: move;
+  pointer-events: all;
+}
+
+.xy-flow__panel {
+  position: absolute;
+  z-index: 5;
+  margin: 15px;
+
+  &.top {
+    top: 0;
+  }
+
+  &.bottom {
+    bottom: 0;
+  }
+
+  &.left {
+    left: 0;
+  }
+
+  &.right {
+    right: 0;
+  }
+
+  &.center {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
+
+.xy-flow__attribution {
+  font-size: 10px;
+  background: var(--attribution-background-color, var(--attribution-background-color-default));
+  padding: 2px 3px;
+  margin: 0;
+
+  a {
+    text-decoration: none;
+    color: #999;
+  }
+}
+
+@keyframes dashdraw {
+  from {
+    stroke-dashoffset: 10;
+  }
+}
+
+.xy-flow__edgelabel-renderer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  user-select: none;
+  left: 0;
+  top: 0;
+}
+
+.xy-flow__minimap {
+  stroke: var(--minimap-background-color, var(--minimap-background-color-default));
+}
+
+.xy-flow__background {
+  pointer-events: none;
+  z-index: -1;
+  background-color: var(--background-color-props, 'transparent');
+}
+
+.xy-flow__background-pattern {
+  &.dot {
+    fill: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-dot-color-default))
+    );
+  }
+
+  &.line {
+    stroke: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-line-color-default))
+    );
+  }
+
+  &.cross {
+    stroke: var(
+      --background-pattern-color-props,
+      var(--background-pattern-color, var(--background-pattern-cross-color-default))
+    );
+  }
+}

packages/system/src/styles/node-resizer.css

@@ -0,0 +1,105 @@
+.xy-flow__resize-control {
+  position: absolute;
+}
+
+.xy-flow__resize-control.left,
+.xy-flow__resize-control.right {
+  cursor: ew-resize;
+}
+
+.xy-flow__resize-control.top,
+.xy-flow__resize-control.bottom {
+  cursor: ns-resize;
+}
+
+.xy-flow__resize-control.top.left,
+.xy-flow__resize-control.bottom.right {
+  cursor: nwse-resize;
+}
+
+.xy-flow__resize-control.bottom.left,
+.xy-flow__resize-control.top.right {
+  cursor: nesw-resize;
+}
+
+/* handle styles */
+.xy-flow__resize-control.handle {
+  width: 4px;
+  height: 4px;
+  border: 1px solid #fff;
+  border-radius: 1px;
+  background-color: #3367d9;
+  transform: translate(-50%, -50%);
+}
+
+.xy-flow__resize-control.handle.left {
+  left: 0;
+  top: 50%;
+}
+.xy-flow__resize-control.handle.right {
+  left: 100%;
+  top: 50%;
+}
+.xy-flow__resize-control.handle.top {
+  left: 50%;
+  top: 0;
+}
+.xy-flow__resize-control.handle.bottom {
+  left: 50%;
+  top: 100%;
+}
+.xy-flow__resize-control.handle.top.left {
+  left: 0;
+}
+.xy-flow__resize-control.handle.bottom.left {
+  left: 0;
+}
+.xy-flow__resize-control.handle.top.right {
+  left: 100%;
+}
+.xy-flow__resize-control.handle.bottom.right {
+  left: 100%;
+}
+
+/* line styles */
+.xy-flow__resize-control.line {
+  border-color: #3367d9;
+  border-width: 0;
+  border-style: solid;
+}
+
+.xy-flow__resize-control.line.left,
+.xy-flow__resize-control.line.right {
+  width: 1px;
+  transform: translate(-50%, 0);
+  top: 0;
+  height: 100%;
+}
+
+.xy-flow__resize-control.line.left {
+  left: 0;
+  border-left-width: 1px;
+}
+
+.xy-flow__resize-control.line.right {
+  left: 100%;
+  border-right-width: 1px;
+}
+
+.xy-flow__resize-control.line.top,
+.xy-flow__resize-control.line.bottom {
+  height: 1px;
+  transform: translate(0, -50%);
+  left: 0;
+  width: 100%;
+}
+
+.xy-flow__resize-control.line.top {
+  top: 0;
+  border-top-width: 1px;
+}
+
+.xy-flow__resize-control.line.bottom {
+  border-bottom-width: 1px;
+  top: 100%;
+}

packages/system/src/styles/style.css

@@ -0,0 +1,138 @@
+.xy-flow {
+  --node-color-default: inherit;
+  --node-border-default: 1px solid #1a192b;
+  --node-background-color-default: #fff;
+  --node-group-background-color-default: rgba(240, 240, 240, 0.25);
+  --node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
+  --node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
+
+  --handle-background-color-default: #1a192b;
+  --handle-border-color-default: #fff;
+
+  --selection-background-color-default: rgba(0, 89, 220, 0.08);
+  --selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
+
+  --controls-button-background-color-default: #fefefe;
+  --controls-button-background-color-hover-default: #f4f4f4;
+  --controls-button-color-default: inherit;
+  --controls-button-color-hover-default: inherit;
+  --controls-button-border-color-default: #eee;
+  --controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
+}
+
+.xy-flow__edge {
+  &.updating {
+    .xy-flow__edge-path {
+      stroke: #777;
+    }
+  }
+
+  &-text {
+    font-size: 10px;
+  }
+}
+
+.xy-flow__node.selectable {
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.xy-flow__node-input,
+.xy-flow__node-default,
+.xy-flow__node-output,
+.xy-flow__node-group {
+  padding: 10px;
+  border-radius: 3px;
+  width: 150px;
+  font-size: 12px;
+  color: var(--node-color, var(--node-color-default));
+  text-align: center;
+  border: var(--node-border, var(--node-border-default));
+  background-color: var(--node-background-color, var(--node-background-color-default));
+
+  &.selectable {
+    &:hover {
+      box-shadow: var(--node-boxshadow-hover, var(--node-boxshadow-hover-default));
+    }
+
+    &.selected,
+    &:focus,
+    &:focus-visible {
+      box-shadow: var(--node-boxshadow-selected, var(--node-boxshadow-selected-default));
+    }
+  }
+}
+
+.xy-flow__node-group {
+  background-color: var(--node-group-background-color, var(--node-group-background-color-default));
+}
+
+.xy-flow__nodesselection-rect,
+.xy-flow__selection {
+  background: var(--selection-background-color, var(--selection-background-color-default));
+  border: var(--selection-border, var(--selection-border-default));
+
+  &:focus,
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.xy-flow__handle {
+  width: 6px;
+  height: 6px;
+  background-color: var(--handle-background-color, var(--handle-background-color-default));
+  border: 1px solid var(--handle-border-color, var(--handle-border-color-default));
+  border-radius: 100%;
+}
+
+.xy-flow__controls {
+  box-shadow: var(--controls-box-shadow, var(--controls-box-shadow-default));
+
+  &-button {
+    border: none;
+    background: var(--controls-button-background-color, var(--controls-button-background-color-default));
+    border-bottom: 1px solid
+      var(
+        --controls-button-border-color-props,
+        var(--controls-button-border-color, var(--controls-button-border-color-default))
+      );
+    color: var(--controls-button-color-props, var(--controls-button-color, var(--controls-button-color-default)));
+    box-sizing: content-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    user-select: none;
+    padding: 5px;
+
+    &:hover {
+      background: var(
+        --controls-button-background-color-hover-props,
+        var(--controls-button-background-color-hover, var(--controls-button-background-color-hover-default))
+      );
+      color: var(
+        --controls-button-color-hover-props,
+        var(--controls-button-hover-color, var(--controls-button-hover-color-default))
+      );
+    }
+
+    svg {
+      width: 100%;
+      max-width: 12px;
+      max-height: 12px;
+    }
+
+    &:disabled {
+      pointer-events: none;
+
+      svg {
+        fill-opacity: 0.4;
+      }
+    }
+  }
+}

tooling/postcss-config/postcss.config.js

@@ -1,8 +1,23 @@
-module.exports = {
-  plugins: [
-    require('postcss-import'),
-    require('postcss-nested'),
-    require('postcss-combine-duplicated-selectors'),
-    require('autoprefixer'),
-  ],
+require('dotenv').config();
+
+const postcssImport = require('postcss-import');
+const postcssNested = require('postcss-nested');
+const postcssCombine = require('postcss-combine-duplicated-selectors');
+const postcssRename = require('postcss-rename');
+const autoprefixer = require('autoprefixer');
+const cssnano = require('cssnano');
+
+module.exports = (ctx) => {
+  return {
+    plugins: [
+      postcssImport,
+      postcssNested,
+      postcssCombine,
+      postcssRename({
+        strategy: (className) => className.replace('xy', process.env.LIB),
+      }),
+      autoprefixer,
+      ctx.env === 'production' && cssnano,
+    ],
+  };
 };