@progress/kendo-theme-classic 8.0.0-dev.0 → 8.0.0-dev.2

package/scss/fab/_variables.scss

@@ -5,64 +5,64 @@
 $kendo-fab-border-width: 1px !default;
 /// The border radius of the FAB.
 /// @group floating-action-button
-$kendo-fab-border-radius: $kendo-border-radius-md !default;
+$kendo-fab-border-radius: k-border-radius(md) !default;
 
 /// The font family of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-family: $kendo-font-family !default;
+$kendo-fab-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FAB.
 /// @group floating-action-button
-$kendo-fab-font-size: $kendo-font-size-md !default;
+$kendo-fab-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FAB.
 /// @group floating-action-button
-$kendo-fab-line-height: $kendo-line-height-md !default;
+$kendo-fab-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal padding of the FAB.
 /// @group floating-action-button
-$kendo-fab-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-padding-x: k-spacing(4) !default;
 /// The horizontal padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-x: k-math-div( $kendo-fab-padding-x, 2 ) !default;
+$kendo-fab-sm-padding-x: calc( #{$kendo-fab-padding-x} / 2 ) !default;
 /// The horizontal padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-x: $kendo-fab-padding-x !default;
 /// The horizontal padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-x: ( $kendo-fab-padding-x * 1.5 ) !default;
+$kendo-fab-lg-padding-x: calc( #{$kendo-fab-padding-x} * 1.5 ) !default;
 
 /// The vertical padding of the FAB.
 /// @group floating-action-button
 $kendo-fab-padding-y: $kendo-fab-padding-x !default;
 /// The vertical padding of the small FAB.
 /// @group floating-action-button
-$kendo-fab-sm-padding-y: k-math-div( $kendo-fab-padding-y, 2 ) !default;
+$kendo-fab-sm-padding-y: calc( #{$kendo-fab-padding-y} / 2 ) !default;
 /// The vertical padding of the medium FAB.
 /// @group floating-action-button
 $kendo-fab-md-padding-y: $kendo-fab-padding-y !default;
 /// The vertical padding of the large FAB.
 /// @group floating-action-button
-$kendo-fab-lg-padding-y: ( $kendo-fab-padding-y * 1.5 ) !default;
+$kendo-fab-lg-padding-y: calc( #{$kendo-fab-padding-y} * 1.5 ) !default;
 
 /// The horizontal padding of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the FAB icon.
 /// @group floating-action-button
 $kendo-fab-icon-padding-y: $kendo-fab-icon-padding-x !default;
 /// The spacing of the FAB icon.
 /// @group floating-action-button
-$kendo-fab-icon-spacing: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-icon-spacing: k-spacing(0.5) !default;
 
 /// The horizontal padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-x: 0px !default;
+$kendo-fab-items-padding-x: k-spacing(0) !default;
 /// The vertical padding of the FAB items.
 /// @group floating-action-button
-$kendo-fab-items-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-fab-items-padding-y: k-spacing(4) !default;
 
 /// The horizontal padding of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-fab-item-text-padding-x: k-spacing(1) !default;
 /// The vertical padding of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-padding-y: $kendo-fab-item-text-padding-x !default;
@@ -74,14 +74,14 @@ $kendo-fab-item-text-border-width: 1px !default;
 $kendo-fab-item-text-border-radius: 2px !default;
 /// The font size of the FAB item text.
 /// @group floating-action-button
-$kendo-fab-item-text-font-size: $kendo-font-size-xs !default;
+$kendo-fab-item-text-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The line height of the FAB item text.
 /// @group floating-action-button
 $kendo-fab-item-text-line-height: 1.2 !default;
 
 /// The horizontal padding of the FAB item icon.
 /// @group floating-action-button
-$kendo-fab-item-icon-padding-x: k-map-get( $kendo-spacing, 2 ) + $kendo-fab-icon-padding-x !default;
+$kendo-fab-item-icon-padding-x: calc( #{k-spacing(2)} + #{$kendo-fab-icon-padding-x} ) !default;
 /// The vertical padding of the FAB item icon.
 /// @group floating-action-button
 $kendo-fab-item-icon-padding-y: $kendo-fab-item-icon-padding-x !default;
@@ -127,7 +127,7 @@ $kendo-fab-active-shadow: null !default;
 $kendo-fab-outline-style: solid !default;
 /// The outline width of the FAB.
 /// @group floating-action-button
-$kendo-fab-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-outline-width: k-spacing(0.5) !default;
 
 
 /// The base text color of the FAB item.
@@ -164,7 +164,7 @@ $kendo-fab-item-active-shadow: $kendo-fab-active-shadow !default;
 $kendo-fab-item-outline-style: solid !default;
 /// The outline width of the FAB item.
 /// @group floating-action-button
-$kendo-fab-item-outline-width: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-fab-item-outline-width: k-spacing(0.5) !default;
 /// The outline color of the FAB item.
 /// @group floating-action-button
 $kendo-fab-item-outline-color: rgba(0, 0, 0, .08) !default;

package/scss/filemanager/_variables.scss

@@ -2,19 +2,19 @@
 
 /// The space between the FileManager items.
 /// @group filemanager
-$kendo-file-manager-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-spacer: k-spacing(4) !default;
 /// The border width of the FileManager.
 /// @group filemanager
 $kendo-file-manager-border-width: 1px !default;
 /// The font family of the FileManager.
 /// @group filemanager
-$kendo-file-manager-font-family: $kendo-font-family !default;
+$kendo-file-manager-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the FileManager.
 /// @group filemanager
-$kendo-file-manager-font-size: $kendo-font-size-md !default;
+$kendo-file-manager-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the FileManager.
 /// @group filemanager
-$kendo-file-manager-line-height: $kendo-line-height-md !default;
+$kendo-file-manager-line-height: var( --kendo-line-height, normal ) !default;
 /// The background color of the FileManager.
 /// @group filemanager
 $kendo-file-manager-bg: $kendo-component-bg !default;
@@ -65,10 +65,10 @@ $kendo-file-manager-navigation-border: null !default;
 
 /// The horizontal padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-x: k-spacing(2) !default;
 /// The vertical padding of the FileManager Breadcrumb.
 /// @group filemanager
-$kendo-file-manager-breadcrumb-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-file-manager-breadcrumb-padding-y: k-spacing(2) !default;
 /// The border width of the FileManager Breadcrumb.
 /// @group filemanager
 $kendo-file-manager-breadcrumb-border-width: $kendo-file-manager-border-width !default;
@@ -94,10 +94,10 @@ $kendo-file-manager-listview-border: null !default;
 
 /// The horizontal padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the FileManager ListView item.
 /// @group filemanager
-$kendo-file-manager-listview-item-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-file-manager-listview-item-padding-y: k-spacing(4) !default;
 /// The width of the FileManager ListView item.
 /// @group filemanager
 $kendo-file-manager-listview-item-width: 120px !default;
@@ -160,7 +160,7 @@ $kendo-file-manager-preview-border-width: $kendo-file-manager-border-width !defa
 $kendo-file-manager-preview-spacing: $kendo-file-manager-spacer !default;
 /// The gap between the columns in the FileManager preview.
 /// @group filemanager
-$kendo-file-manager-preview-column-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-file-manager-preview-column-gap: k-spacing(1) !default;
 /// The background color of the FileManager preview.
 /// @group filemanager
 $kendo-file-manager-preview-bg: null !default;

package/scss/filter/_variables.scss

@@ -9,7 +9,7 @@ $kendo-filter-padding-y: $kendo-padding-md-y !default;
 
 /// The bottom margin of the Filter.
 /// @group filter
-$kendo-filter-bottom-margin: 30px !default;
+$kendo-filter-bottom-margin: k-spacing(7.5) !default;
 /// The width of the line that connects the Filter items.
 /// @group filter
 $kendo-filter-line-size: 1px !default;
@@ -27,4 +27,4 @@ $kendo-filter-preview-operator-text: $kendo-subtle-text !default;
 
 /// The box shadow of the focused Filter toolbar.
 /// @group filter
-$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;
+$kendo-filter-toolbar-focus-shadow: 0 0 0 2px rgba(0, 0, 0, .08) !default;

package/scss/forms/_variables.scss

@@ -8,37 +8,37 @@
 
 /// The padding of the inline Form.
 /// @group form
-$kendo-form-spacer: $kendo-padding-md-x * 2 !default;
+$kendo-form-spacer: calc( #{$kendo-padding-md-x} * 2 ) !default;
 
 /// The font size of the Form.
 /// @group form
-$kendo-form-font-size: $kendo-font-size-md !default;
+$kendo-form-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Form.
 /// @group form
-$kendo-form-line-height: $kendo-line-height-md !default;
+$kendo-form-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height of the Form in em units.
 /// @group form
 $kendo-form-line-height-em: calc( #{$kendo-form-line-height} * 1em ) !default;
 /// The line height of the small Form.
 /// @group form
-$kendo-form-sm-line-height: $kendo-line-height-sm !default;
+$kendo-form-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The line height of the large Form.
 /// @group form
-$kendo-form-lg-line-height: $kendo-line-height-lg !default;
+$kendo-form-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The margin of the Form fieldset.
 /// @group form
 $kendo-form-fieldset-margin: 2em 0 0 !default;
 /// The padding of the Form fieldset.
 /// @group form
-$kendo-form-fieldset-padding: 0px !default;
+$kendo-form-fieldset-padding: k-spacing(0) !default;
 
 /// The margin of the Form legend.
 /// @group form
 $kendo-form-legend-margin: 0 0 1em !default;
 /// The padding of the Form legend.
 /// @group form
-$kendo-form-legend-padding: 0px !default;
+$kendo-form-legend-padding: k-spacing(0) !default;
 /// The border width of the Form legend.
 /// @group form
 $kendo-form-legend-border-width: 0 0 2px !default;
@@ -60,11 +60,11 @@ $kendo-form-legend-text-transform: uppercase !default;
 
 /// The bottom margin of the Form label.
 /// @group form
-$kendo-form-label-margin-bottom: 0px !default;
+$kendo-form-label-margin-bottom: k-spacing(0) !default;
 
 /// The horizontal margin of the Form buttons.
 /// @group form
-$kendo-form-button-margin-x: 8px !default;
+$kendo-form-button-margin-x: k-spacing(2) !default;
 
 /// The font size of the Form hint.
 /// @group form
@@ -74,7 +74,7 @@ $kendo-form-hint-font-size: 12px !default;
 $kendo-form-hint-font-style: italic !default;
 /// The top margin of the Form hint.
 /// @group form
-$kendo-form-hint-margin-top: 4px !default;
+$kendo-form-hint-margin-top: k-spacing(1) !default;
 
 /// The row spacing of the small Form.
 /// @group form
@@ -95,10 +95,10 @@ $kendo-form-separator-border-color: $kendo-form-legend-border-color !default;
 
 /// The top padding of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-padding-top: 5px !default;
+$kendo-horizontal-form-label-padding-top: calc( #{k-spacing(2.5)} / 2 ) !default;
 /// The horizontal margin of the label in the horizontal Form.
 /// @group form
-$kendo-horizontal-form-label-margin-x: 10px !default;
+$kendo-horizontal-form-label-margin-x: k-spacing(2.5) !default;
 /// The width of the label in the horizontal Form.
 /// @group form
 $kendo-horizontal-form-label-width: 25% !default;
@@ -121,7 +121,7 @@ $kendo-forms-invalid-color: $kendo-color-error !default;
 
 /// The horizontal margin of the optional label in the Form.
 /// @group form
-$kendo-label-optional-margin-x: 6px !default;
+$kendo-label-optional-margin-x: k-spacing(1.5) !default;
 /// The font size of the optional label in the Form.
 /// @group form
 $kendo-label-optional-font-size: 12px !default;
@@ -132,7 +132,7 @@ $kendo-label-optional-font-style: italic !default;
 
 /// The margin of the Form fieldset.
 /// @group form
-$kendo-fieldset-margin: 30px !default;
+$kendo-fieldset-margin: k-spacing(7.5) !default;
 /// The font size of the Form fieldset.
 /// @group form
 $kendo-fieldset-font-size: $kendo-h4-font-size !default;

package/scss/gantt/_variables.scss

@@ -1,93 +1,238 @@
 // Gantt
-$kendo-gantt-border-width: 1px !default;
-$kendo-gantt-font-family: $kendo-font-family !default;
-$kendo-gantt-font-size: $kendo-font-size-md !default;
-$kendo-gantt-line-height: $kendo-line-height-md !default;
 
+/// The border width of the Gantt.
+/// @group gantt
+$kendo-gantt-border-width: 1px !default;
+/// The font family of the Gantt.
+/// @group gantt
+$kendo-gantt-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the Gantt.
+/// @group gantt
+$kendo-gantt-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the Gantt.
+/// @group gantt
+$kendo-gantt-line-height: var( --kendo-line-height-sm, normal ) !default;
+
+/// The background color of the Gantt.
+/// @group gantt
 $kendo-gantt-bg: $kendo-component-bg !default;
+/// The text color of the Gantt.
+/// @group gantt
 $kendo-gantt-text: $kendo-component-text !default;
+/// The border color of the Gantt.
+/// @group gantt
 $kendo-gantt-border: $kendo-component-border !default;
 
+/// The background color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-bg: null !default;
+/// The text color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-text: null !default;
+/// The border color of the Gantt TreeList.
+/// @group gantt
 $kendo-gantt-treelist-border: null !default;
 
+/// The background color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( on-base ) 3%, transparent), rgba( k-contrast-color( $kendo-gantt-bg ), .025 )) !default;
+/// The text color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-text: null !default;
+/// The border color of the Gantt non-working days.
+/// @group gantt
 $kendo-gantt-nonwork-border: null !default;
 
+/// The size of the Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-size: 2px !default;
+/// The background fill color of the Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-fill: if($kendo-enable-color-system, k-color( on-base ), k-contrast-color( $kendo-gantt-bg )) !default;
+/// The background fill of the selected Gantt connecting lines.
+/// @group gantt
 $kendo-gantt-line-selected-fill: $kendo-color-primary !default;
 
+/// The size of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-size: 8px !default;
-$kendo-gantt-dot-spacing: 4px !default;
+/// The spacing of the Gantt task dot.
+/// @group gantt
+$kendo-gantt-dot-spacing: k-spacing(1) !default;
+/// The background color of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-bg: $kendo-gantt-text !default;
+/// The border color of the Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-border: null !default;
+/// The background color of the hovered Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-hover-bg: $kendo-gantt-bg !default;
+/// The border color of the hovered Gantt task dot.
+/// @group gantt
 $kendo-gantt-dot-hover-border: $kendo-gantt-text !default;
 
+/// The background color of the Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-bg: $kendo-gantt-text !default;
+/// The border color of the Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-border: $kendo-gantt-border !default;
+/// The background color of the selected Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-selected-bg: $kendo-selected-bg !default;
+/// The border color of the selected Gantt milestone.
+/// @group gantt
 $kendo-gantt-milestone-selected-border: $kendo-selected-border !default;
 
+/// The background color of the Gantt summary.
+/// @group gantt
 $kendo-gantt-summary-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 1 )) !default;
+/// The background color of the Gantt summary progress.
+/// @group gantt
 $kendo-gantt-summary-progress-bg: if($kendo-enable-color-system, k-color( on-base ), k-try-shade( $kendo-gantt-text, 5 )) !default;
+/// The background color of the selected Gantt summary.
+/// @group gantt
 $kendo-gantt-summary-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+/// The background color of the selected Gantt summary progress.
+/// @group gantt
 $kendo-gantt-summary-progress-selected-bg: $kendo-selected-bg !default;
 
+/// The border width of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-border-width: 0px !default;
-$kendo-gantt-task-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-gantt-task-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+/// The horizontal padding of the Gantt task.
+/// @group gantt
+$kendo-gantt-task-padding-x: k-spacing(2) !default;
+/// The vertical padding of the Gantt task.
+/// @group gantt
+$kendo-gantt-task-padding-y: k-spacing(1) !default;
+/// The background color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-bg: if($kendo-enable-color-system, k-color( subtle ), k-try-tint( $kendo-gantt-text, 2 )) !default;
+/// The text color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-text: if($kendo-enable-color-system, k-color( base-subtle ), k-contrast-color( $kendo-gantt-text )) !default;
+/// The border color of the Gantt task.
+/// @group gantt
 $kendo-gantt-task-border: null !default;
+/// The background color of the Gantt task progress.
+/// @group gantt
 $kendo-gantt-task-progress-bg: $kendo-gantt-text !default;
+/// The background color of selected the Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-bg: if($kendo-enable-color-system, k-color( primary-subtle-active ), k-try-tint( $kendo-selected-bg, 6 )) !default;
+/// The text color of the selected Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-text: $kendo-selected-text !default;
+/// The border color of the selected Gantt task.
+/// @group gantt
 $kendo-gantt-task-selected-border: null !default;
+/// The background color of the selected Gantt task progress.
+/// @group gantt
 $kendo-gantt-task-progress-selected-bg: $kendo-selected-bg !default;
 
+/// The vertical margin of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-margin-y: .35em !default;
+/// The border width of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-border-width: 2px !default;
+/// The line height of the Gantt task planned line.
+/// @group gantt
 $kendo-gantt-planned-line-height: .75em !default;
 
+/// The vertical margin of the Gantt planned dependencies.
+/// @group gantt
 $kendo-gantt-planned-dependency-margin-y: .55em !default;
 
+/// The default width of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-width: 6px !default;
+/// The default height of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-height: $kendo-gantt-planned-moment-width !default;
+/// The border radius of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-border-radius: calc( ( #{$kendo-gantt-planned-border-width * 2} + #{$kendo-gantt-planned-moment-width} ) / 2 ) !default;
+/// The horizontal margin of the Gantt planned line dot.
+/// @group gantt
 $kendo-gantt-planned-moment-left-margin-x: calc( #{k-math-div( $kendo-gantt-planned-border-width, 2 )} - #{$kendo-gantt-planned-moment-border-radius} ) !default;
+/// The horizontal margin of the Gantt milestone planned line dot.
+/// @group gantt
 $kendo-gantt-planned-milestone-moment-margin-x: k-math-div( $kendo-gantt-planned-moment-width, 2 ) !default;
 
+/// The default height of the Gantt planned line.
+/// @group gantt
 $kendo-gantt-planned-duration-height: $kendo-gantt-planned-border-width !default;
+/// The height of the hovered Gantt planned line.
+/// @group gantt
 $kendo-gantt-planned-duration-hover-height: calc( #{$kendo-gantt-planned-border-width} + 1px ) !default;
 
+/// The top position of the Gantt drag hint.
+/// @group gantt
 $kendo-gantt-planned-single-drag-hint-top: 0 !default;
+/// The top position of the Gantt summary drag hint.
+/// @group gantt
 $kendo-gantt-planned-summary-drag-hint-top: .5em !default;
+/// The top position of the Gantt planned milestone drag hint.
+/// @group gantt
 $kendo-gantt-planned-milestone-drag-hint-top: .3em !default;
 
+/// The horizontal margin of the Gantt milestone wrap.
+/// @group gantt
 $kendo-gantt-rtl-milestone-wrap-margin-x: -2.4em !default;
+/// The horizontal margin of the Gantt milestone line dot.
+/// @group gantt
 $kendo-gantt-rtl-milestone-planned-moment-margin-x: .2em !default;
+/// The horizontal margin of the Gantt milestone task dot.
+/// @group gantt
 $kendo-gantt-rtl-milestone-dot-start-margin-x: -.1em !default;
 
+/// The horizontal offset of the Gantt delayed task resize handler.
+/// @group gantt
 $kendo-gantt-planned-offset-resize-handler-margin-x: 1.4em !default;
 
+/// The background color of the Gantt planned Tooltip.
+/// @group gantt
 $kendo-gantt-planned-bg: $kendo-color-primary !default;
+/// The border color of the Gantt planned Tooltip.
+/// @group gantt
 $kendo-gantt-planned-border: $kendo-gantt-planned-bg !default;
 
+/// The background color of the Gantt delayed task.
+/// @group gantt
 $kendo-gantt-delayed-bg: $kendo-color-error !default;
+/// The complement background color of the Gantt delayed task.
+/// @group gantt
 $kendo-gantt-delayed-bg-lighter: if($kendo-enable-color-system, k-color( error-emphasis ), k-color-tint($kendo-gantt-delayed-bg, 5)) !default;
 
+/// The background color of the Gantt advanced task.
+/// @group gantt
 $kendo-gantt-advanced-bg: $kendo-color-success !default;
+/// The complement background color of the Gantt advanced task.
+/// @group gantt
 $kendo-gantt-advanced-bg-lighter: if($kendo-enable-color-system, k-color( success-emphasis ), k-color-tint($kendo-gantt-advanced-bg, 5)) !default;
 
+/// The text color of the Gantt delayed task action.
+/// @group gantt
 $kendo-gantt-action-on-offset-text: #000000 !default;
+/// The top position of the Gantt delayed task resize handler.
+/// @group gantt
 $kendo-gantt-offset-resize-handler-top: 50% !default;
 
+/// The default width of the Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-width: 200px !default;
+/// The default width of the Gantt validation Tooltip label.
+/// @group gantt
 $kendo-gantt-validation-tooltip-label-width: 50px !default;
+/// The border color of the Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-border: #656565 !default;
+/// The border color of the valid Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-valid-border: $kendo-color-success !default;
+/// The border color of the invalid Gantt validation Tooltip.
+/// @group gantt
 $kendo-gantt-validation-tooltip-invalid-border: $kendo-color-error !default;