✨ Added everything for Model Graph component

packages/css-theme/src/_components.scss

@@ -10,3 +10,4 @@
 @import "components/spinner";
 @import "components/box";
 @import "components/linedrawing";
+@import "components/modelgraph";

packages/css-theme/src/components/_modelgraph.scss

@@ -0,0 +1,134 @@
+svg.fs-model-graph {
+  circle.size {
+    fill: none;
+    stroke-width: 2;
+    stroke-dasharray: 10 10;
+  }
+  circle.sizebg {
+    stroke: none;
+  }
+  rect {
+    stroke-width: 5;
+  }
+  circle.shape,
+  path.shape {
+    stroke: none;
+    stroke-width: 5;
+  }
+  circle.shape.center {
+    stroke: none!important;
+  }
+  path.own {
+    stroke-width: 3;
+    stroke-dasharray: 20 30;
+    fill: none;
+  }
+  path.estimate {
+    stroke: none;
+  }
+  path.highlight {
+    stroke-width: 15;
+    stroke-linecap: round;
+    stroke-dasharray: 20 30;
+  }
+  path.hide {
+    stroke: none;
+  }
+  path.vdefault {
+    fill: none;
+    stroke-width: 5;
+    stroke-dasharray: 20 30;
+  }
+  div.text {
+    @include title-font;
+    font-size: 80px;
+  }
+  path.hovertrap {
+    fill: none;
+    stroke: #fff0;
+    stroke-width: 50;
+  }
+  text.size {
+    @include title-font;
+    font-size: 50px;
+    text-anchor: middle;
+  }
+}
+
+.theme-wrapper.light svg.fs-model-graph {
+  circle.size {
+    stroke: $oc-gray-5;
+  }
+  circle.sizebg {
+    fill: #fff3;
+  }
+  rect {
+    stroke: $oc-blue-6;
+    fill: $oc-blue-5;
+  }
+  rect.estimate {
+    stroke: $oc-blue-6;
+    fill: #fff0;
+  }
+  rect.highlight {
+    fill: $oc-lime-7;
+    stroke: $oc-lime-8;
+  }
+  circle.shape,
+  path.shape {
+    stroke: $oc-blue-8;
+    fill: $oc-blue-7;
+  }
+  path.own {
+    stroke: #fffb;
+  }
+  path.highlight {
+    stroke: $oc-lime-7;
+    troke: none;
+  }
+  path.vdefault {
+    stroke: $oc-lime-7;
+  }
+  text.size {
+    fill: $oc-lime-7;
+  }
+}
+
+.theme-wrapper.dark svg.fs-model-graph {
+  circle.size {
+    stroke: $oc-gray-5;
+  }
+  circle.sizebg {
+    fill: #21252933;
+  }
+  rect {
+    stroke: $oc-yellow-6;
+    fill: $oc-yellow-5;
+  }
+  rect.estimate {
+    stroke: $oc-yellow-6;
+    fill: #fff0;
+  }
+  rect.highlight {
+    fill: $oc-orange-7;
+    stroke: $oc-orange-8;
+  }
+  circle.shape,
+  path.shape {
+    stroke: $oc-yellow-8;
+    fill: $oc-yellow-7;
+  }
+  path.own {
+    stroke: #fffb;
+  }
+  path.highlight {
+    stroke: $oc-orange-7;
+    troke: none;
+  }
+  path.vdefault {
+    stroke: $oc-orange-7;
+  }
+  text.size {
+    fill: $oc-orange-7;
+  }
+}