@syncfusion/ej2-gantt 20.1.60 → 20.2.39

package/styles/gantt/_layout.scss

@@ -11,13 +11,6 @@
           height: $gantt-bigger-timeline-top-header-cell-height;
         }
 
-        .e-taskbar-left-resizer,
-        .e-taskbar-right-resizer {
-          padding-left: 10px;
-          padding-right: 10px;
-          width: 30px;
-        }
-
         .e-event-markers {
           .e-span-label {
             border-radius: $gantt-bigger-event-markers-border-radius;
@@ -93,36 +86,54 @@
           }
         }
       }
-    }
 
-    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
-      background-color: $gantt-bigger-tooltip-button-color;
-      border-color: $gantt-bigger-tooltip-button-color;
-      color: $gantt-bigger-tooltip-button-text-color;
-      font-size: 12px;
-      line-height: 18px;
-      padding: 0 8px 0 0;
-    }
+      .e-dialog {
+        .e-dlg-header-content {
+          padding: $gantt-bigger-dialog-header-padding; // sass-lint:disable-line no-important
 
-    .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
-      background-color: $gantt-bigger-tooltip-button-color;
-      border-color: $gantt-bigger-tooltip-button-color;
-      color: $gantt-bigger-tooltip-button-text-color;
-      font-size: 12px;
-      line-height: 18px;
-      padding: 0 0 0 8px;
-    }
+          .e-btn.e-dlg-closeicon-btn {
+            left: $gantt-bigger-dialog-close-button-left;
+          }
+        }
 
-    .e-tooltip-wrap .e-tip-content {
-      padding: 3px !important; // sass-lint:disable-line no-important 
-    }
+        @if($skin-name == 'tailwind') {
+          .e-dlg-header-content {
+            height: 68px !important; // sass-lint:disable-line no-important 
+          }
+        }
 
-    .e-grid .e-flmenu-valuediv {
-      padding: $gantt-bigger-filter-dialog-input-padding;
-    }
+        .e-btn .e-btn-icon.e-icon-dlg-close {
+          font-size: $gantt-bigger-dialog-close-button-size;
+        }
+
+        .e-footer-content {
+          height: $gantt-bigger-filter-dialog-footer-height;
+          padding: $gantt-bigger-filter-dialog-footer-padding;
+
+          .e-btn {
+            margin-left: 12px;
+          }
+        }
+
+        .e-dlg-header {
+          line-height: 28px;
+        }
+      }
 
-    .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
-      padding: 0 16px !important; // sass-lint:disable-line no-important
+      .e-filter-popup {
+        width: $gantt-bigger-filter-dialog-width;
+      }
+
+      .e-grid .e-flmenu-valuediv {
+        padding: $gantt-bigger-filter-dialog-input-padding;
+      }
+
+      .e-filter-popup {
+        .e-dlg-content {
+          border-radius: $gantt-dialog-bigger-border-radius;
+          padding: $gantt-dialog-bigger-input-padding-field;
+        }
+      }
     }
 
     .e-columnmenu {
@@ -141,6 +152,10 @@
       border-radius: 6px;
       width: $gantt-bigger-dialog-width;
 
+      .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
+        padding: 0 16px !important; // sass-lint:disable-line no-important
+      }
+
       .e-edit-form-column:nth-child(odd) {
         padding: $gantt-bigger-dialog-edit-form-odd-padding;
       }
@@ -176,7 +191,7 @@
         .e-btn.e-dlg-closeicon-btn {
           border-radius: 50%;
           height: auto !important; // sass-lint:disable-line no-important
-          width: auto !important; // sass-lint:disable-line no-important
+          width: auto;
         }
       }
 
@@ -191,147 +206,123 @@
           color: $gantt-bigger-dialog-icon-color;
         }
       }
-    }
 
-    @if($skin-name == 'material') {
-      .e-datetime-wrapper .e-input-group-icon.e-time-icon {
-        margin: 5px 0 6px !important; // sass-lint:disable-line no-important
+      .e-control-wrapper .e-input-group-icon.e-date-icon {
+        font-size: 16px !important; // sass-lint:disable-line no-important
       }
 
-      .e-input-group.e-control-wrapper .e-input-group-icon {
-        margin-right: 0 !important; // sass-lint:disable-line no-important 
+      .e-control-wrapper .e-input-group-icon.e-date-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
       }
-    }
 
-    @if($skin-name == 'tailwind') {
-      .e-input-group.e-control-wrapper .e-input-group-icon {
-        padding: 7px 0 !important; // sass-lint:disable-line no-important 
+      .e-btn.e-flat {
+        line-height: 24px;
+        padding: 6px 16px 6px 15px !important; // sass-lint:disable-line no-important
       }
-    }
-
-    .e-control-wrapper .e-input-group-icon.e-date-icon {
-      font-size: 16px !important; // sass-lint:disable-line no-important
-    }
 
-    .e-float-input.e-control-wrapper {
-      width: $gantt-bigger-add-dialog-input-width;
+      .e-btn.e-primary {
+        padding: 6px 21px 6px 23px !important; // sass-lint:disable-line no-important
       }
 
-    .e-predecessor-tooltip {
-      background-color: $gantt-bigger-tooltip-button-color;
-    }
+      .e-datetime-wrapper .e-time-icon.e-icons::before {
+        font-size: 16px !important; // sass-lint:disable-line no-important
+      }
 
-    .e-predecessor-dialog {
-      background-color: $gantt-bigger-tooltip-dialog-color;
+      .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
+        font-size: 14px;
+        line-height: 22px;
+      }
 
-      .e-dlg-content {
-        background-color: $gantt-bigger-tooltip-dialog-color;
-        padding: $gantt-bigger-predecessor-dialog-padding;
+      .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
+        font-size: 14px;
+        line-height: 22px;
       }
-    }
 
-    .e-dialog {
-      .e-dlg-header-content {
-        padding: $gantt-bigger-dialog-header-padding; // sass-lint:disable-line no-important
+      .e-float-input.e-control-wrapper input {
+        height: $gantt-bigger-dialog-input-field-height;
 
-        .e-btn.e-dlg-closeicon-btn {
-          left: $gantt-bigger-dialog-close-button-left;
+        @if($skin-name == 'material') {
+          padding: 5px 0 11px !important; // sass-lint:disable-line no-important
         }
       }
 
-      @if($skin-name == 'tailwind') {
-        .e-dlg-header-content {
-          height: 68px !important; // sass-lint:disable-line no-important 
-        }
+      .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
       }
 
-      .e-btn .e-btn-icon.e-icon-dlg-close {
-        font-size: $gantt-bigger-dialog-close-button-size;
+      .e-control-wrapper .e-input-group-icon.e-time-icon {
+        min-height: $gantt-bigger-dialog-input-icon;
+        min-width: 35.82px !important; // sass-lint:disable-line no-important
       }
 
-      .e-footer-content {
-        height: $gantt-bigger-filter-dialog-footer-height;
-        padding: $gantt-bigger-filter-dialog-footer-padding;
-
-        .e-btn {
-          margin-left: 12px;
-        }
+      .e-input-group.e-control-wrapper {
+        height: $gantt-dialog-bigger-input-field;
       }
 
-      .e-dlg-header {
-        line-height: 28px;
+      .e-input-group-icon.e-date-icon {
+        min-width: 36px !important; // sass-lint:disable-line no-important
       }
-    }
-
-    .e-filter-popup {
-      width: $gantt-bigger-filter-dialog-width;
-    }
-
-    .e-dlg-content {
-      border-radius: $gantt-dialog-bigger-border-radius;
-      padding: $gantt-dialog-bigger-input-padding-field;
-    }
-
-    .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {
-      font-size: 14px;
-      line-height: 22px;
-    }
-
-    .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text {
-      font-size: 14px;
-      line-height: 22px;
-    }
-
-    .e-float-input.e-control-wrapper input {
-      height: $gantt-bigger-dialog-input-field-height;
 
       @if($skin-name == 'material') {
-        padding: 5px 0 11px !important; // sass-lint:disable-line no-important
-      }
-    }
+        .e-datetime-wrapper .e-input-group-icon.e-time-icon {
+          margin: 5px 0 6px !important; // sass-lint:disable-line no-important
+        }
 
-    .e-left-btn:disabled {
-      color: $gantt-bigger-tooltip-disabled-button-color;
-    }
+        .e-input-group.e-control-wrapper .e-input-group-icon {
+          margin-right: 0 !important; // sass-lint:disable-line no-important 
+        }
+      }
 
-    .e-right-btn:disabled {
-      color: $gantt-bigger-tooltip-disabled-button-color;
+      @if($skin-name == 'tailwind') {
+        .e-input-group.e-control-wrapper .e-input-group-icon {
+          padding: 7px 0 !important; // sass-lint:disable-line no-important 
+        }
+      }
     }
 
-    .e-input-group-icon.e-date-icon {
-      min-width: 36px !important; // sass-lint:disable-line no-important
-    }
+    .e-predecessor-tooltip {
+      background-color: $gantt-bigger-tooltip-button-color;
 
-    .e-control-wrapper .e-input-group-icon.e-date-icon {
-      min-height: $gantt-bigger-dialog-input-icon;
-      min-width: 35.82px !important; // sass-lint:disable-line no-important
-    }
+      .e-left-btn:disabled {
+        color: $gantt-bigger-tooltip-disabled-button-color;
+      }
 
-    .e-numeric.e-control-wrapper.e-input-group .e-input-group-icon {
-      min-height: $gantt-bigger-dialog-input-icon;
-      min-width: 35.82px !important; // sass-lint:disable-line no-important
-    }
+      .e-right-btn:disabled {
+        color: $gantt-bigger-tooltip-disabled-button-color;
+      }
 
-    .e-control-wrapper .e-input-group-icon.e-time-icon {
-      min-height: $gantt-bigger-dialog-input-icon;
-      min-width: 35.82px !important; // sass-lint:disable-line no-important
-    }
+      .e-tip-content {
+        padding: 3px !important; // sass-lint:disable-line no-important 
+      }
 
-    .e-input-group.e-control-wrapper {
-      height: $gantt-dialog-bigger-input-field;
-    }
+      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:first-of-type {
+        background-color: $gantt-bigger-tooltip-button-color;
+        border-color: $gantt-bigger-tooltip-button-color;
+        color: $gantt-bigger-tooltip-button-text-color;
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 8px 0 0;
+      }
 
-    .e-datetime-wrapper .e-time-icon.e-icons::before {
-      font-size: 16px !important; // sass-lint:disable-line no-important
+      .e-btn-group:not(.e-rtl):not(.e-vertical) .e-btn:last-of-type {
+        background-color: $gantt-bigger-tooltip-button-color;
+        border-color: $gantt-bigger-tooltip-button-color;
+        color: $gantt-bigger-tooltip-button-text-color;
+        font-size: 12px;
+        line-height: 18px;
+        padding: 0 0 0 8px;
+      }
     }
 
-    .e-btn.e-flat {
-      line-height: 24px;
-      padding: 6px 16px 6px 15px !important; // sass-lint:disable-line no-important
-    }
+    .e-predecessor-dialog {
+      background-color: $gantt-bigger-tooltip-dialog-color;
 
-    .e-btn.e-primary {
-      padding: 6px 21px 6px 23px !important; // sass-lint:disable-line no-important
+      .e-dlg-content {
+        background-color: $gantt-bigger-tooltip-dialog-color;
+        padding: $gantt-bigger-predecessor-dialog-padding;
+      }
     }
   }
 
@@ -1002,6 +993,10 @@
         outline: 1px solid;
       }
 
+      .e-critical-connector-line-hover {
+        outline: 1px solid;
+      }
+
       .e-connector-line-hover-z-index {
         z-index: 100;
       }

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

@@ -6,11 +6,11 @@ $gantt-grid-line-color: $grey-700 !default;
 $gantt-label-color: rgba($grey-light-font, .87) !default;
 $gantt-content-color: rgb(0, 0, 0) !default;
 $holiday-background: $grey-700 !default;
-$progress-handler-outline: #fff !default;
+$progress-handler-outline: $primary-font !default;
 $progress-handler-background: #222 !default;
 $holiday-label-color: $grey-dark-font !default;
 $holiday-label-font-size: 12px !default;
-$connector-point-hover-outerline-color: #9fa8da !default;
+$connector-point-hover-outerline-color: $primary-200 !default;
 $weekend-background: $grey-800 !default;
 $event-marker-line-color: $accent !default;
 $event-marker-label-color: #cae8ff !default;
@@ -20,7 +20,9 @@ $event-marker-label-padding: 7px 12px !default;
 $event-marker-label-height: 30px !default;
 $event-marker-label-arrow-top: 60px !default;
 $connector-line-color: lighten($primary, 15%) !default;
+$critical-connector-line-color: #d13438 !default;
 $connector-line-hover-color: lighten($primary, 15%) !default;
+$critical-connector-line-hover-color: #f3d8da !default;
 $connector-false-line-color: lighten($primary, 15%) !default;
 $connector-point-hover-color: #005a9e !default;
 $connector-point-border-color: $grey-dark !default;
@@ -36,15 +38,18 @@ $gantt-header-border-spacing: 0 !default;
 $gantt-line-container-cell-border-color: $grey-700 !default;
 // sass-lint:disable-all
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba(63,81,181, 0.2), #3f51b5 30%, #3f51b5 70%, #3f51b5 70%, rgba(63,81,181, 0.2) 100%) !default;
-$gantt-unscheduled-taskbar-background-color: rgba(63,81,181, .2) !default;
+$gantt-unscheduled-critical-taskbar-background: linear-gradient(to right, rgba(285,85,85, 0.2), #D13438 30%, #D13438 70%, #D13438 70%, rgba(285,85,85, 0.2) 100%) !default;
+$gantt-unscheduled-critical-taskbar-background-color: rgba(285,85,85, .2) !default;
 $gantt-unscheduled-milestone-top-border: #dadada !default;
 $gantt-unscheduled-milestone-bottom-border: #dadada !default;
-$gantt-resize-gripper: rgba(249, 146, 11, .2) !default;
 $gantt-child-task-bar: $primary !default;
+$gantt-critical-child-task-bar: #F3D8DA !default;
 $gantt-child-progress-bar: lighten($primary, 15%) !default;
+$gantt-critical-child-progress-bar: #D13438 !default;
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid lighten($primary, 15%) !default;
+$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
 $gantt-manualchild-task-bar: #8dd1c4;
 $gantt-manualchild-progress-bar: #67c1b2;
 $gantt-manualchild-progress-bar-border: #4fb29f;
@@ -55,6 +60,7 @@ $gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, rgba(63,8
 $gantt-parent-task-bar: #029f90 !default;
 $gantt-parent-progress-bar:  #4cc7ba !default;
 $gantt-milestone-border-color:  #dadada !default;
+$gantt-critical-milestone-border-color: #d13438 !default;
 $gantt-parent-milestone-border-color:   #4cc7ba !default;
 $gantt-parent-progress-bar-border: 0px !default;
 $gantt-parent-task-bar-border: 1px solid  #4cc7ba !default;
@@ -67,10 +73,10 @@ $gantt-task-label-font-color: $primary-font !default;
 $gantt-label-font-size: 13px !default;
 $gantt-bigger-label-font-size: 14px !default;
 $gantt-label-font-color: $grey-dark-font !default;
-$gantt-tab-header-active-font-color: #fff !default;
+$gantt-tab-header-active-font-color: $primary-font !default;
 $gantt-tab-header-font-color: rgba(255, 255, 255, 0.64) !default;
 $gantt-edit-icon-color: $grey-white !default;
-$gantt-icons-color: #fff;
+$gantt-icons-color: $primary-font;
 $gantt-unscheduled-taskbar-border: 0px !default;
 $gantt-unscheduled-taskbar-border-radius: 0px !default;
 $gantt-dialog-general-height: 241px !default;
@@ -78,10 +84,10 @@ $gantt-dialog-edit-form-odd-padding: 16px 18px 0 18px !default;
 $gantt-dialog-edit-form-even-padding: 16px 16px 0 0 !default;
 $gantt-dialog-edit-form-scroll-padding: 16px 16px 0 0 !default;
 $gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
-$gantt-bigger-tooltip-button-color: #000000;
+$gantt-bigger-tooltip-button-color: $grey-black;
 $gantt-bigger-tooltip-dialog-color: #f3f3f3;
-$gantt-bigger-tooltip-button-text-color: #FFFFFF;
-$gantt-bigger-tooltip-disabled-button-color: #757575 !important;
+$gantt-bigger-tooltip-button-text-color: $grey-white;
+$gantt-bigger-tooltip-disabled-button-color: $grey-600 !important;
 $gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 16px !default;
 $gantt-bigger-dialog-edit-form-even-padding: 16px 16px 0 9px !default;
 $gantt-bigger-dialog-close-button-left: 1px !important;
@@ -128,7 +134,7 @@ $gantt-dialog-tab-background: $primary !default;
 $gantt-dialog-header-font-color: $primary-font !default;
 $gantt-dialog-icon-color: $grey-white !default;
 $gantt-dialog-icon-hover-color: rgba(255, 255, 255, 0.15) !default;
-$gantt-dialog-close-icon-hover-color: #fff !default;
+$gantt-dialog-close-icon-hover-color: $primary-font !default;
 $gantt-dialog-tab-hover-border-color: transparent !default;
 $gantt-dialog-tab-header-border-no-color: transparent !default;
 $gantt-tab-header-border-width: 0px;
@@ -136,7 +142,7 @@ $gantt-depedent-div-border-bottom: 1px !default;
 $gantt-resource-div-border-bottom: 1px !default;
 $gantt-richtext-border-bottom: 1px !default;
 $gantt-richtext-content-border-bottom: 0px !default;
-$gantt-tab-selection-indicator-color: #00b0ff !default;
+$gantt-tab-selection-indicator-color: $accent !default;
 $gantt-tab-header-hover-color: transparent !default;
 $gantt-tab-header-hover-font-color: rgba(0, 0, 0, 0.87) !default;
 $gantt-connector-point-width: 12px !default;
@@ -146,7 +152,7 @@ $gantt-parent-progress-bar-border-radius: 4px !default;
 $gantt-timeline-top-headercell-font-size: 12px !default;
 $gantt-timeline-top-headercell-font-weight: 500 !default;
 $gantt-active-background: rgba(255, 255, 255, 0.28) !default;
-$gantt-active-color: #fff !default;
+$gantt-active-color: $primary-font !default;
 $gantt-active-color-opacity: 0.87 !default;
 $gantt-table-background: $grey-dark !default;
 $gantt-baseline-color: #ff9800 !default;
@@ -172,11 +178,11 @@ $gantt-inactive-parent: #8A8A8A !default;
 $gantt-inactive-child: #D5D5D5 !default;
 $gantt-connected-task: lighten($primary, 20%) !default;
 $gantt-active-parent-task: lighten(#000000, 10%) !default;
-$gantt-uptail-border:  #e0e0e0 !default;
-$gantt-gridpopup-span: #000 !default;
+$gantt-uptail-border:  $grey-300 !default;
+$gantt-gridpopup-span: $accent-font !default;
 $gantt-active-parent-shadow: rgba($gantt-gridpopup-span, 0.5) !default;
-$gantt-left-resize-gripper-border: #9e9e9e !default;
-$gantt-left-resize-gripper-color: #eee !default;
+$gantt-left-resize-gripper-border: $grey-500 !default;
+$gantt-left-resize-gripper-color: $grey-200 !default;
 $gantt-clone-padding: 4px 5px !default;
 $gantt-bigger-clone-padding: $gantt-clone-padding !default;
 $gantt-cell-border-color: $grey-700 !default;

package/styles/gantt/_material-definition.scss

@@ -2,28 +2,30 @@ $gantt-header-bg-color: $grey-white !default;
 $gantt-header-border-color: $grey-300 !default;
 $gantt-header-color: rgba(0, 0, 0, .54) !default;
 $gantt-context-menu-icon-color: rgba(0, 0, 0, .54) !default;
-$gantt-grid-line-color: #e0e0e0 !default;
+$gantt-grid-line-color: $grey-300 !default;
 $gantt-label-color: rgba($grey-light-font, .87) !default;
-$gantt-content-color: rgb(0, 0, 0) !default;
+$gantt-content-color: $grey-black !default;
 $holiday-background: $grey-200 !default;
-$progress-handler-outline: #fff !default;
+$progress-handler-outline: $accent-font !default;
 $progress-handler-background: #222 !default;
 $holiday-label-color: rgba(0, 0, 0, .87) !default;
 $holiday-label-font-size: 12px !default;
-$weekend-background: #fafafa !default;
-$connector-point-hover-outerline-color: #9fa8da !default;
+$weekend-background: $grey-50 !default;
+$connector-point-hover-outerline-color: $primary-200 !default;
 $event-marker-line-color: $accent !default;
 $event-marker-label-color: #fdbf64 !default;
-$event-marker-label-font-color: #212121 !default;
+$event-marker-label-font-color: $grey-900 !default;
 $event-marker-label-font-size: 12px !default;
 $event-marker-label-padding: 7px 12px !default;
 $event-marker-label-height: 30px !default;
 $event-marker-label-arrow-top: 60px !default;
 $connector-line-color: $primary !default;
+$critical-connector-line-color: #d13438 !default;
 $connector-line-hover-color: $primary !default;
+$critical-connector-line-hover-color: #f3d8da !default;
 $connector-false-line-color: $primary !default;
 $connector-point-hover-color: #005a9e !default;
-$connector-point-border-color: #fff !default;
+$connector-point-border-color: $accent-font !default;
 $connector-point-hover-bg-color: $grey-400 !default;
 $connector-point-hover-border-color: $primary !default;
 $gantt-connector-point-margin-top: 7.5px !default;
@@ -33,18 +35,21 @@ $gantt-unscheduled-taskbar-left: 3px !default;
 $gantt-unscheduled-taskbar-right-radius: 2px !default;
 $gantt-label-size: 13px !default;
 $gantt-header-border-spacing: 0 !default;
-$gantt-line-container-cell-border-color: #e0e0e0 !default;
+$gantt-line-container-cell-border-color: $grey-300 !default;
 // sass-lint:disable-all
 $gantt-unscheduled-taskbar-background: linear-gradient(to right, rgba(63,81,181, 0.2), #3f51b5 30%, #3f51b5 70%, #3f51b5 70%, rgba(63,81,181, 0.2) 100%) !default;
-$gantt-unscheduled-taskbar-background-color: rgba(63,81,181, .2) !default;
+$gantt-unscheduled-critical-taskbar-background: linear-gradient(to right, rgba(285,85,85, 0.2), #D13438 30%, #D13438 70%, #D13438 70%, rgba(285,85,85, 0.2) 100%) !default;
+$gantt-unscheduled-critical-taskbar-background-color: rgba(285,85,85, .2) !default;
 $gantt-unscheduled-milestone-top-border: rgba(51, 51, 51, .6) !default;
 $gantt-unscheduled-milestone-bottom-border: rgba(51, 51, 51, .6) !default;
-$gantt-resize-gripper: rgba(249, 146, 11, .2) !default;
 $gantt-child-task-bar: lighten($primary, 8%) !default;
+$gantt-critical-child-task-bar: #F3D8DA !default;
 $gantt-child-progress-bar: $primary !default;
+$gantt-critical-child-progress-bar: #D13438 !default;
 $gantt-child-progress-bar-border: 0px !default;
 $gantt-child-progress-bar-border-radious:4px;
 $gantt-child-task-bar-border: 1px solid $primary !default;
+$gantt-critical-child-task-bar-border: 1px solid #F3D8DA !default;
 $gantt-manualchild-task-bar: rgba(#008786, .85) !default;
 $gantt-manualchild-task-bar-border: 1px solid #008786;
 $gantt-manualchild-progress-bar: #008786;
@@ -55,6 +60,7 @@ $gantt-unscheduled-manualtaskbar-background: linear-gradient(to right, rgba(63,8
 $gantt-parent-task-bar: rgba($grey-700, .87) !default;
 $gantt-parent-progress-bar: $grey-700 !default;
 $gantt-milestone-border-color: $grey-700 !default;
+$gantt-critical-milestone-border-color: #D13438 !default;
 $gantt-parent-milestone-border-color: $grey-700 !default;
 $gantt-parent-progress-bar-border: 0px !default;
 $gantt-parent-task-bar-border: 1px solid $grey-700 !default;
@@ -78,10 +84,10 @@ $gantt-dialog-edit-form-odd-padding: 16px 18px 0 18px !default;
 $gantt-dialog-edit-form-even-padding: 16px 16px 0 0 !default;
 $gantt-dialog-edit-form-scroll-padding: 16px 16px 0 0 !default;
 $gantt-bigger-predecessor-dialog-padding: 10px 9px 9px 14px !important;
-$gantt-bigger-tooltip-button-color: #000000;
+$gantt-bigger-tooltip-button-color: $grey-black;
 $gantt-bigger-tooltip-dialog-color: #f3f3f3;
-$gantt-bigger-tooltip-button-text-color: #FFFFFF;
-$gantt-bigger-tooltip-disabled-button-color: #757575 !important;
+$gantt-bigger-tooltip-button-text-color: $grey-white;
+$gantt-bigger-tooltip-disabled-button-color: $grey-600 !important;
 $gantt-bigger-dialog-edit-form-odd-padding: 16px 9px 0 16px !default;
 $gantt-bigger-dialog-edit-form-even-padding: 16px 16px 0 9px !default;
 $gantt-bigger-dialog-close-button-left: 1px !important;
@@ -128,7 +134,7 @@ $gantt-dialog-tab-background: $primary !default;
 $gantt-dialog-header-font-color: $primary-font !default;
 $gantt-dialog-icon-color: $grey-white !default;
 $gantt-dialog-icon-hover-color: rgba(255, 255, 255, 0.15) !default;
-$gantt-dialog-close-icon-hover-color: rgb(0, 0, 0) !default;
+$gantt-dialog-close-icon-hover-color: $grey-black !default;
 $gantt-dialog-tab-hover-border-color: transparent !default;
 $gantt-dialog-tab-header-border-no-color: transparent !default;
 $gantt-tab-header-border-width: 0px;
@@ -146,9 +152,9 @@ $gantt-parent-progress-bar-border-radius: 4px !default;
 $gantt-timeline-top-headercell-font-size: 12px !default;
 $gantt-timeline-top-headercell-font-weight: 500 !default;
 $gantt-active-background: rgba($primary, .15) !default;
-$gantt-active-color: #000 !default;
+$gantt-active-color: $grey-black !default;
 $gantt-active-color-opacity: 1 !default;
-$gantt-table-background: #fff !default;
+$gantt-table-background: $accent-font !default;
 $gantt-baseline-color: #C15700 !default;
 $gantt-child-progress-margin-left: 0.5px !default;
 $gantt-timeline-single-header-outer-div: 45px !default;
@@ -172,11 +178,11 @@ $gantt-inactive-parent: #8A8A8A !default;
 $gantt-inactive-child:#D5D5D5 !default;
 $gantt-connected-task: lighten($primary, 20%) !default;
 $gantt-active-parent-task: lighten(#000000, 10%) !default;
-$gantt-uptail-border:  #e0e0e0 !default;
-$gantt-gridpopup-span: #000 !default;
+$gantt-uptail-border:  $grey-300 !default;
+$gantt-gridpopup-span: $grey-black !default;
 $gantt-active-parent-shadow: rgba($gantt-gridpopup-span, 0.5) !default;
-$gantt-left-resize-gripper-border: #9e9e9e !default;
-$gantt-left-resize-gripper-color: #eee !default;
+$gantt-left-resize-gripper-border: $grey-500 !default;
+$gantt-left-resize-gripper-color: $grey-200 !default;
 $gantt-clone-padding: 4px 5px !default;
 $gantt-bigger-clone-padding: $gantt-clone-padding !default;
 $gantt-cell-border-color: $grey-300 !default;
@@ -193,7 +199,7 @@ $gantt-drag-clone-color: rgba($grey-light-font, .54) !default;
 $gantt-content-font-color: $grey-light-font !default;
 $gantt-table-background-color: $content-bg-color !default;
 $gantt-clone-dragdrop-bg-color: $gantt-table-background-color !default;
-$error-elem-color: #e3165b;
+$error-elem-color: $accent;
 $gantt-border-size: $border-size !default;
 $gantt-active-container-border: $grey-500 !default;
 $grid-active-container-border: 0 0 0 1px $grey-500 inset !default;