@joint/react/src/stories/demos/flowchart/index.css

React bindings and hooks for JointJS to build interactive diagrams and graphs.

:root {
  /* JointJS Palette */
  --jj-color1: #ed2637;
  --jj-color2: #131e29;
  --jj-color3: #dde6ed;
  --jj-color4: #f6f740;
  --jj-color5: #0075f2;
  --jj-color6: #1a2938;
  --jj-color7: #cad8e3;

  /* Dark Theme */
  --step-stroke-color: var(--jj-color1);
  --step-fill-color: var(--jj-color2);
  --step-text-color: var(--jj-color3);
  --decision-stroke-color: var(--jj-color3);
  --decision-fill-color: var(--jj-color2);
  --decision-text-color: var(--jj-color3);
  --start-stroke-color: var(--jj-color1);
  --start-fill-color: var(--jj-color2);
  --start-text-color: var(--jj-color1);
  --flow-stroke-color: var(--jj-color1);
  --flow-label-stroke-color: var(--jj-color2);
  --flow-label-fill-color: var(--jj-color1);
  --flow-label-text-color: var(--jj-color3);
  --flow-selection-color: var(--jj-color6);
  --frame-color: var(--jj-color4);
  --background-color: var(--jj-color2);
  --switch-color: var(--jj-color3);
  --switch-background-color: var(--jj-color1);
  --logo-color: var(--jj-color3);
}

.flowchart-node {
  font-family: 'PPFraktionSans', sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  padding: 8px;
  box-sizing: border-box;
  cursor: move;
  border: 2px solid #ed2637;
  color: #dde6ed;
}

.flowchart-node:hover {
  background-color: #ff9505;
  border: 2px solid #ff9505;
  color: var(--step-text-color);
}
/* Start node styling (mimics .jj-start-body & .jj-start-text) */
.flowchart-start {
  border-radius: 25px;
}

/* Step node styling (mimics .jj-step-body & .jj-step-text) */
.flowchart-step {
  border-radius: 5px;
}
.jj-flow-outline {
  stroke: var(--background-color);
  stroke-width: 1px;
}

.jj-flow-tools circle {
  stroke: var(--frame-color);
  fill: var(--background-color);
  stroke-width: 2;
}

.jj-flow-tools rect {
  stroke: var(--frame-color);
}

.link {
  stroke-dasharray: 5 5; /* dash length 10, gap 10 */
  stroke-dashoffset: 0;
  animation: dashmove 1s linear infinite;
}

@keyframes dashmove {
  to {
    stroke-dashoffset: -20; /* dash + gap length */
  }
}