Update labelBkg styles and dasharray for edges

packages/mermaid/src/diagrams/er/styles.ts

@@ -0,0 +1,73 @@
+import * as khroma from 'khroma';
+import type { FlowChartStyleOptions } from '../flowchart/styles.js';
+
+const fade = (color: string, opacity: number) => {
+  // @ts-ignore TODO: incorrect types from khroma
+  const channel = khroma.channel;
+
+  const r = channel(color, 'r');
+  const g = channel(color, 'g');
+  const b = channel(color, 'b');
+
+  // @ts-ignore incorrect types from khroma
+  return khroma.rgba(r, g, b, opacity);
+};
+
+const getStyles = (options: FlowChartStyleOptions) =>
+  `
+  .entityBox {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+  }
+
+  .relationshipLabelBox {
+    fill: ${options.tertiaryColor};
+    opacity: 0.7;
+    background-color: ${options.tertiaryColor};
+      rect {
+        opacity: 0.5;
+      }
+  }
+
+  .labelBkg {
+    background-color: ${fade(options.edgeLabelBackground, 0.5)};
+  }
+
+  .edgeLabel .label {
+    fill: ${options.nodeBorder};
+    font-size: 14px;
+  }
+
+  .label {
+    font-family: ${options.fontFamily};
+    color: ${options.nodeTextColor || options.textColor};
+  }
+
+  .edge-pattern-dashed {
+    stroke-dasharray: 8,8;
+  }
+
+  .node rect,
+  .node circle,
+  .node ellipse,
+  .node polygon
+  {
+    fill: ${options.mainBkg};
+    stroke: ${options.nodeBorder};
+    stroke-width: 1px;
+  }
+
+  .relationshipLine {
+    stroke: ${options.lineColor};
+    stroke-width: 1;
+    fill: none;
+  }
+
+  .marker {
+    fill: none !important;
+    stroke: ${options.lineColor} !important;
+    stroke-width: 1;
+  }
+`;
+
+export default getStyles;