@syncfusion/ej2-angular-diagrams 22.2.10-ngcc → 22.2.10

package/styles/diagram/_material-dark-definition.scss

@@ -0,0 +1,96 @@
+@import 'definition.scss';
+
+$skin-name: 'material';
+$diagram-endpoint-handle-color: $primary-font;
+$diagram-endpoint-handle-connected-border: $primary-font;
+$diagram-endpoint-handle-connected-color: $accent;
+
+$diagram-resize-handle-color: $accent;
+$diagram-resize-handle-stroke: $accent;
+$diagram-border-stroke: $accent;
+
+$diagram-resize-handle-disable-color: $grey-400;
+$diagram-resize-handle-disable-stroke: $primary-font;
+$diagram-border-stroke-disabled: $grey-400;
+
+$diagram-rotate-handle-color: $accent;
+
+$diagram-bezier-handle-color: $primary-font;
+$diagram-bezier-line-color: $accent;
+
+$diagram-highlighter-stroke: $accent;
+$diagram-selected-region-stroke: $accent;
+$diagram-pivot-line-stroke: $accent;
+
+$diagram-helper-stroke: $accent;
+
+$diagram-text-edit-selection-color: $primary-font;
+$diagram-text-edit-selection-background: $accent;
+
+$diagram-symbolpalette-hover: $grey-400;
+$diagram-symbolpalette-shape-radius: 4px;
+$diagram-symbolpalette-selected: $grey-700;
+
+$diagram-tooltip: none;
+
+$diagram-ruler-color: $grey-100;
+$diagram-ruler-font-size: 10px;
+$diagram-ruler-marker-stroke: $accent;
+$diagram-ruler-marker-background-color: $grey-800;
+$diagram-ruler-label-fill: $grey-400;
+$diagram-ruler-tick-stroke: $grey-500;
+
+$palette-background-color: $grey-300;
+
+$diagram-background-color: $primary-font;
+
+$diagram-editbox-background: $primary-font;
+$diagram-editbox-fontcolor: $grey-black;
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-border-strokes: $primary;
+$diagram-lane-border-strokes: $primary;
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+@include export-module('diagram-material-icons') {
+  .e-diagram-menu {
+    .e-bringforward::before{ content: '\e5a1'; }
+    .e-bringfront::before{ content: '\e5a2'; }
+    .e-sendback::before{ content: '\e5a3'; }
+    .e-sendbackward::before{ content: '\e5a4'; }
+    .e-delete::before{ content: '\e94a'; }
+    .e-ungroup::before{ content: '\e5a6'; }
+    .e-group::before{ content: '\e5a7'; }
+    .e-undo::before{ content: '\e341'; }
+    .e-cut::before{ content: '\e33b'; }
+    .e-save::before{ content: '\e735'; }
+    .e-paste::before{ content: '\e355'; }
+    .e-copy::before{ content: '\e33d'; }
+    .e-redo::before{ content: '\e354'; }
+    .e-zoomin::before{ content: '\e349'; }
+    .e-italic::before{ content: '\e35a'; }
+    .e-close::before{ content: '\ec0f'; }
+    .e-pan::before{ content: '\ec1a'; }
+    .e-bold::before{ content: '\e339'; }
+    .e-underline::before{ content: '\e343'; }
+    .e-zoomout::before{ content: '\e351'; }
+    .e-export::before{ content: '\e711'; }
+    .e-print::before{ content: '\e34b'; }
+    .e-order::before{ content: '\e4a4'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before{ content: '\ec0f'; }
+  }
+}

package/styles/diagram/_material-definition.scss

@@ -0,0 +1,96 @@
+@import 'definition.scss';
+
+$skin-name: 'material';
+$diagram-endpoint-handle-color: $primary-font;
+$diagram-endpoint-handle-connected-border: $primary-font;
+$diagram-endpoint-handle-connected-color: $accent;
+
+$diagram-resize-handle-color: $accent;
+$diagram-resize-handle-stroke: $accent;
+$diagram-border-stroke: $accent;
+
+$diagram-resize-handle-disable-color: $grey-400;
+$diagram-resize-handle-disable-stroke: $primary-font;
+$diagram-border-stroke-disabled: $grey-400;
+
+$diagram-rotate-handle-color: $accent;
+
+$diagram-bezier-handle-color: $primary-font;
+$diagram-bezier-line-color: $accent;
+
+$diagram-highlighter-stroke: $accent;
+$diagram-selected-region-stroke: $accent;
+$diagram-pivot-line-stroke: $accent;
+
+$diagram-helper-stroke: $accent;
+
+$diagram-text-edit-selection-color: $primary-font;
+$diagram-text-edit-selection-background: $accent;
+
+$diagram-symbolpalette-hover: $grey-200;
+$diagram-symbolpalette-shape-radius: 4px;
+$diagram-symbolpalette-selected: $grey-400;
+
+$diagram-tooltip: none;
+
+$diagram-ruler-color: $grey-100;
+$diagram-ruler-font-size: 10px;
+$diagram-ruler-marker-stroke: $accent;
+$diagram-ruler-marker-background-color: $grey-100;
+$diagram-ruler-label-fill: $grey-700;
+$diagram-ruler-tick-stroke: $grey-400;
+
+$palette-background-color: #fff;
+
+$diagram-background-color: $primary-font;
+
+$diagram-editbox-background: $primary-font;
+$diagram-editbox-fontcolor: $grey-black;
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-border-strokes: $primary;
+$diagram-lane-border-strokes: $primary;
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+@include export-module('diagram-material-icons') {
+  .e-diagram-menu {
+    .e-bringforward::before{ content: '\e5a1'; }
+    .e-bringfront::before{ content: '\e5a2'; }
+    .e-sendback::before{ content: '\e5a3'; }
+    .e-sendbackward::before{ content: '\e5a4'; }
+    .e-delete::before{ content: '\e94a'; }
+    .e-ungroup::before{ content: '\e5a6'; }
+    .e-group::before{ content: '\e5a7'; }
+    .e-undo::before{ content: '\e341'; }
+    .e-cut::before{ content: '\e33b'; }
+    .e-save::before{ content: '\e735'; }
+    .e-paste::before{ content: '\e355'; }
+    .e-copy::before{ content: '\e33d'; }
+    .e-redo::before{ content: '\e354'; }
+    .e-zoomin::before{ content: '\e349'; }
+    .e-italic::before{ content: '\e35a'; }
+    .e-close::before{ content: '\ec0f'; }
+    .e-pan::before{ content: '\ec1a'; }
+    .e-bold::before{ content: '\e339'; }
+    .e-underline::before{ content: '\e343'; }
+    .e-zoomout::before{ content: '\e351'; }
+    .e-export::before{ content: '\e711'; }
+    .e-print::before{ content: '\e34b'; }
+    .e-order::before{ content: '\e4a4'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before{ content: '\ec0f'; }
+  }
+}

package/styles/diagram/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/diagram/_material3-definition.scss

@@ -0,0 +1,101 @@
+@import 'definition.scss';
+
+//layout variables
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-symbolpalette-shape-radius: 4px;
+$diagram-tooltip: none;
+
+//normal
+$diagram-endpoint-handle-color: rgba($primary-text-color);
+$diagram-endpoint-handle-connected-border: rgba($primary-text-color);
+
+$diagram-resize-handle-disable-color: rgba($border-light);
+$diagram-border-stroke-disabled: rgba($border-light);
+$diagram-resize-handle-disable-stroke: rgba($primary-text-color);
+$diagram-rotate-handle-color: rgba($primary);
+$diagram-bezier-handle-color: rgba($primary-text-color);
+
+$diagram-symbolpalette-hover: $diagram-palette-hover-background;
+$diagram-symbolpalette-selected: $diagram-palette-selection-background;
+
+$diagram-ruler-color: rgba($content-text-color-alt2);
+$diagram-ruler-font-size: $text-xxs;
+$diagram-ruler-marker-background-color: $content-bg-color-alt1;
+$diagram-ruler-label-fill: rgba($content-text-color-alt2);
+$diagram-ruler-tick-stroke: rgba($series-3);
+
+$palette-background-color: rgba($diagram-palette-background);
+
+$diagram-background-color: rgba($white);
+$diagram-editbox-fontcolor: rgba($black);
+
+//end normal
+//primary
+$diagram-endpoint-handle-connected-color: rgba($primary);
+
+$diagram-resize-handle-color: rgba($primary);
+$diagram-resize-handle-stroke: rgba($primary);
+
+$diagram-border-stroke: rgba($primary);
+$diagram-bezier-line-color: rgba($primary);
+
+$diagram-highlighter-stroke: rgba($primary);
+$diagram-selected-region-stroke: rgba($primary);
+$diagram-pivot-line-stroke: rgba($primary);
+$diagram-ruler-marker-stroke: rgba($primary);
+
+$diagram-helper-stroke: rgba($primary);
+
+$diagram-text-edit-selection-background: rgba($primary);
+$diagram-editbox-background: rgba($primary-text-color);
+
+$diagram-border-strokes: rgba($primary);
+$diagram-lane-border-strokes: rgba($primary);
+$diagram-text-edit-selection-color: rgba($primary-text-color);
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+//end primary
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+@include export-module('diagram-bootstrap-icons') {
+  .e-diagram-menu {
+    .e-bringforward::before{ content: '\e72f'; }
+    .e-bringfront::before{ content: '\e840'; }
+    .e-sendback::before{ content: '\e78a'; }
+    .e-sendbackward::before{ content: '\e7ed'; }
+    .e-delete::before{ content: '\e94a'; }
+    .e-ungroup::before{ content: '\e749'; }
+    .e-group::before{ content: '\e7f4'; }
+    .e-undo::before{ content: '\e713'; }
+    .e-redo::before{ content: '\e755'; }
+    .e-copy::before{ content: '\e77c'; }
+    .e-cut::before{ content: '\e7fb'; }
+    .e-save::before{ content: '\e7c8'; }
+    .e-paste::before{ content: '\e70b'; }
+    .e-zoomin::before{ content: '\e795'; }
+    .e-italic::before{ content: '\e75a'; }
+    .e-close::before{ content: '\e7e7'; }
+    .e-pan::before{ content: '\e7b1'; }
+    .e-bold::before{ content: '\e737'; }
+    .e-underline::before{ content: '\e82f'; }
+    .e-zoomout::before{ content: '\e825'; }
+    .e-export::before{ content: '\e72e'; }
+    .e-print::before{ content: '\e75d'; }
+    .e-order::before{ content: '\e809'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before{ content: '\e754'; }
+  }
+}

package/styles/diagram/_tailwind-dark-definition.scss

@@ -0,0 +1 @@
+@import './tailwind-definition.scss';

package/styles/diagram/_tailwind-definition.scss

@@ -0,0 +1,103 @@
+@import 'definition.scss';
+
+$skin-name: 'tailwind';
+
+//layout variables
+$diagram-border-stroke-width: 2;
+$diagram-lane-border-stroke-width: 2;
+$diagram-highlighter-border-stroke-width: 2;
+$diagram-symbolpalette-shape-radius: 00px;/* stylelint-disable-line length-zero-no-unit */
+$diagram-tooltip: none;
+
+//normal
+$diagram-endpoint-handle-color: $white;
+$diagram-endpoint-handle-connected-border: $white;
+
+$diagram-resize-handle-disable-color: $content-bg-color-alt5;
+$diagram-border-stroke-disabled: $content-bg-color-alt5;
+$diagram-resize-handle-disable-stroke: $white;
+$diagram-rotate-handle-color: $primary;
+$diagram-bezier-handle-color: $white;
+
+$diagram-symbolpalette-hover: $diagram-palette-hover-background;
+$diagram-symbolpalette-selected: $diagram-palette-hover-background;
+
+$diagram-ruler-color: $content-text-color-alt2;
+$diagram-ruler-font-size: $text-xxs;
+$diagram-ruler-marker-background-color: $content-bg-color-alt1;
+$diagram-ruler-label-fill: $content-text-color-alt2;
+$diagram-ruler-tick-stroke: $series-3;
+
+$diagram-background-color: $white;
+$diagram-editbox-fontcolor: $black;
+
+//end normal
+//primary
+$diagram-endpoint-handle-connected-color: $primary;
+
+$diagram-resize-handle-color: $primary;
+$diagram-resize-handle-stroke: $primary;
+
+$diagram-border-stroke: $primary;
+$diagram-bezier-line-color: $primary;
+
+$diagram-highlighter-stroke: $primary;
+$diagram-selected-region-stroke: $primary;
+$diagram-pivot-line-stroke: $primary;
+$diagram-ruler-marker-stroke: $primary;
+
+$diagram-helper-stroke: $primary;
+
+$palette-background-color: $diagram-palette-background;
+
+$diagram-text-edit-selection-background: $primary;
+$diagram-editbox-background: $white;
+
+$diagram-border-strokes: $primary;
+$diagram-lane-border-strokes: $primary;
+$diagram-text-edit-selection-color: $primary-text-color;
+
+$diagram-multiselect-stroke: $diagram-resize-handle-stroke;
+
+//end primary
+
+.e-icons {
+  font-family: 'e-icons';
+  font-style: normal;
+  font-variant: normal;
+  font-weight: $font-weight-normal;
+  line-height: 1;
+  text-transform: none;
+}
+
+@include export-module('diagram-tailwind-icons') {
+  .e-diagram-menu {
+    .e-bringforward::before{ content: '\e747'; }
+    .e-bringfront::before{ content: '\e744'; }
+    .e-sendback::before{ content: '\e716'; }
+    .e-sendbackward::before{ content: '\e7a3'; }
+    .e-delete::before{ content: '\e844'; }
+    .e-ungroup::before{ content: '\e7a4'; }
+    .e-group::before{ content: '\e74d'; }
+    .e-undo::before{ content: '\e7bd'; }
+    .e-redo::before{ content: '\e7b9'; }
+    .e-copy::before{ content: '\e7ce'; }
+    .e-cut::before{ content: '\e763'; }
+    .e-save::before{ content: '\e704'; }
+    .e-paste::before{ content: '\e75e'; }
+    .e-zoomin::before{ content: '\e70a'; }
+    .e-italic::before{ content: '\e722'; }
+    .e-close::before{ content: '\e771'; }
+    .e-pan::before{ content: '\e712'; }
+    .e-bold::before{ content: '\e79d'; }
+    .e-underline::before{ content: '\e7d4'; }
+    .e-zoomout::before{ content: '\e779'; }
+    .e-export::before{ content: '\e7bf'; }
+    .e-print::before{ content: '\e76c'; }
+    .e-order::before{ content: '\e765'; }
+  }
+
+  .e-symbolpalette {
+    .e-clear-searchtext::before{ content: '\e737'; }
+  }
+}

package/styles/diagram/_theme.scss

@@ -0,0 +1,216 @@
+@include export-module('diagram-theme') {
+
+  .e-diagram {
+    background-color: $diagram-background-color;
+    display: block;
+  }
+
+  .e-symbolpalette {
+    display: block;
+  }
+
+  .e-overview {
+    display: block;
+  }
+
+  .e-content-placeholder.e-diagram.e-placeholder-diagram {
+    background-size: 100% 100%;
+    max-height: 500px;
+    max-width: 500px;
+  }
+
+  .e-content-placeholder.e-symbolpalette.e-placeholder-symbolpalette {
+    background-size: 100% 100%;
+    max-height: 200px;
+    max-width: 200px;
+  }
+
+  .e-diagram-endpoint-handle {
+    fill: $diagram-endpoint-handle-color;
+    stroke: $diagram-resize-handle-stroke;
+  }
+
+  .e-diagram-endpoint-handle.e-connected {
+    fill: $diagram-endpoint-handle-connected-color;
+    stroke: $diagram-endpoint-handle-connected-border;
+  }
+
+  .e-diagram-endpoint-handle.e-disabled {
+    fill: $diagram-resize-handle-disable-color;
+    opacity: 1;
+    stroke: $diagram-resize-handle-disable-stroke;
+  }
+
+  .e-diagram-bezier-control-handle.e-disabled {
+    fill: $diagram-resize-handle-disable-color;
+    opacity: 1;
+    stroke: $diagram-resize-handle-disable-stroke;
+  }
+
+  /* stylelint-disable */
+  .e-diagram-bezier-handle.e-source.e-disabled {
+    opacity: 1 !important;
+  }
+
+  .e-diagram-bezier-handle.e-target.e-disabled {
+    opacity: 1 !important;
+  }
+
+  .e-diagram-bezier-control-handle {
+    fill: $diagram-bezier-handle-color;
+    stroke: $diagram-resize-handle-stroke;
+  }
+
+  .e-diagram-bezier-segment-handle {
+    fill: $diagram-bezier-handle-color;
+    stroke: $diagram-resize-handle-stroke;
+  }
+
+  .e-symbolpalette .e-acrdn-content {
+    background-color: $palette-background-color !important;
+  }
+
+  /* stylelint-enable */
+
+  .e-diagram-bezier-control-line {
+    stroke: $diagram-bezier-line-color;
+  }
+
+  .e-diagram-resize-handle {
+    fill: $diagram-resize-handle-color;
+    stroke: $diagram-endpoint-handle-color;
+
+    @if ($skin-name =='tailwind' or $skin-name =='tailwind-dark' or $skin-name =='bootstrap5' or $skin-name =='material' or $skin-name =='fabric-dark' or $skin-name =='fabric' or $skin-name =='highcontrast' or $skin-name =='bootstrap' or $skin-name =='bootstrap-dark' or $skin-name =='bootstrap4' or $skin-name =='FluentUI' or $skin-name =='material3') {
+      stroke: $diagram-endpoint-handle-color;
+    }
+  }
+
+  .e-diagram-helper {
+    stroke: $diagram-helper-stroke;
+  }
+
+  .e-diagram-resize-handle.e-disabled {
+    fill: $diagram-resize-handle-disable-color;
+    opacity: 1;
+    stroke: $diagram-resize-handle-disable-stroke;
+  }
+
+  .e-diagram-rotate-handle {
+    fill: $diagram-rotate-handle-color;
+    stroke: $diagram-resize-handle-stroke;
+  }
+
+  .e-diagram-selector {
+    stroke: $diagram-border-stroke;
+  }
+
+  .e-diagram-selector.e-disabled {
+    opacity: 1;
+    stroke: $diagram-border-stroke-disabled;
+  }
+
+  .e-diagram-selector.e-thick-border {
+    stroke: $diagram-border-strokes;
+    stroke-width: $diagram-border-stroke-width;
+  }
+
+  .e-diagram-selector.e-thick-border.e-diagram-lane {
+    stroke: $diagram-lane-border-strokes;
+    stroke-width: $diagram-lane-border-stroke-width;
+  }
+
+  .e-diagram-highlighter {
+    stroke: $diagram-highlighter-stroke;
+    stroke-width: $diagram-highlighter-border-stroke-width;
+  }
+
+  .e-diagram-selected-region {
+    stroke: $diagram-selected-region-stroke;
+  }
+
+  .e-diagram-pivot-line {
+    stroke: $diagram-pivot-line-stroke;
+  }
+
+  .e-symbolpalette .e-symbol-hover:hover {
+    background: $diagram-symbolpalette-hover;
+    border-radius: $diagram-symbolpalette-shape-radius;
+  }
+
+  .e-symbolpalette .e-symbol-selected {
+    background: $diagram-symbolpalette-selected;
+    border-radius: $diagram-symbolpalette-shape-radius;
+  }
+
+  .e-diagram-tooltip {
+    pointer-events: $diagram-tooltip;
+  }
+
+  .e-diagram .e-ruler {
+    background: $diagram-ruler-marker-background-color;
+    color: $diagram-ruler-color;
+    font-size: $diagram-ruler-font-size;
+  }
+
+  .e-diagram .e-ruler-overlap {
+    background: $diagram-ruler-marker-background-color;
+  }
+
+  .e-diagram .e-d-ruler-marker {
+    stroke: $diagram-ruler-marker-stroke;
+  }
+
+  .e-diagram .e-diagram-text-edit {
+    background: $diagram-editbox-background;
+    border-color: $diagram-bezier-line-color;
+    border-style: dashed;
+    border-width: 1px;
+    box-sizing: content-box;
+    color: $diagram-editbox-fontcolor;
+    min-width: 50px;
+  }
+
+  .e-diagram-text-edit::selection {
+    background: $diagram-text-edit-selection-background;
+    color: $diagram-text-edit-selection-color;
+  }
+
+  .e-ruler-tick-label {
+    fill: $diagram-ruler-label-fill;
+  }
+
+  .e-ruler-tick {
+    stroke: $diagram-ruler-tick-stroke;
+  }
+
+  .e-menu-item e-blankicon {
+    padding-left: 28px;
+  }
+
+  .e-diagram-selection-indicator {
+    stroke: $diagram-multiselect-stroke;
+  }
+
+  .e-diagram-selection-line {
+    stroke: $diagram-multiselect-stroke;
+  }
+
+  /* stylelint-disable */
+  .e-diagram-rotate {
+    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAACXBIWXMAAAsSAAALEgHS3X78AAAA60lEQVQ4jZ1SwQ2DMBAzlfLJI2KEjJAVukG7ARsxQkfoKHQDugHdgOoqh14oCaGWIpSTudzZRg2MdYOxrq0il2Csm411o7Eu5GinTN0D6AGMAGZVux9p1LGBrHIF0LD+4l3ql70thDABSFZYaeTJ6UqNWhL3ELhyyhUR98TcwI06Lk1aNonO1NocqGWy/6zOcGCq6OjiSCw22/wUfEzL8ND2P9duFXBmHMDvWVN7CliFkkGe69VM5RmVLDqG7ZMPOroWP5BTle5WjR6dkQayutyLqU6gsiU/ypHMiI41yf+CE01qov+R0egXAN5x6jng51I3yAAAAABJRU5ErkJggg==), auto !important;
+  }
+
+  .e-symbolpalette-hidden {
+    display: none !important;
+  }
+
+  .e-symbolpalette-search-hidden {
+    display: none !important;
+  }
+
+  .e-diagramTooltip-content {
+    width: auto !important;
+    height: auto !important;
+  }
+}
+ /* stylelint-enable */

package/styles/diagram/bootstrap-dark.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'all.scss';

package/styles/diagram/bootstrap.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'all.scss';

package/styles/diagram/bootstrap4.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'all.scss';

package/styles/diagram/bootstrap5-dark.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'all.scss';

package/styles/diagram/bootstrap5.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'all.scss';

package/styles/diagram/fabric-dark.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'all.scss';

package/styles/diagram/fabric.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'all.scss';

package/styles/diagram/fluent-dark.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'all.scss';

package/styles/diagram/fluent.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'all.scss';

package/styles/diagram/highcontrast-light.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'all.scss';

package/styles/diagram/highcontrast.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'all.scss';

package/styles/diagram/material-dark.scss

@@ -1 +1,3 @@
-@import 'ej2-diagrams/styles/diagram/material-dark.scss';
+@import 'ej2-base/styles/material-dark-definition.scss';
+@import 'material-dark-definition.scss';
+@import 'all.scss';