@progress/kendo-theme-default 8.0.0-dev.0 → 8.0.0-dev.10

package/scss/gantt/_layout.scss

@@ -1,6 +1,6 @@
 @mixin kendo-gantt--layout-base() {
 
-    $row-height: #{$kendo-line-height-em} + #{2 * $kendo-table-md-cell-padding-y} + #{$kendo-grid-cell-horizontal-border-width};
+    $row-height: #{$kendo-line-height-em} + calc( 2 * #{$kendo-table-md-cell-padding-y} ) + #{$kendo-grid-cell-horizontal-border-width};
 
     .k-gantt {
         border-width: $kendo-gantt-border-width;
@@ -28,7 +28,7 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
         .k-grid-header .k-header {
             position: static;
@@ -37,11 +37,11 @@
             position: relative;
         }
         .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         &.k-gantt-planned .k-grid-content tr {
-            height: calc( #{$kendo-line-height-em} * 1.7 + #{$kendo-grid-cell-padding-y * 2} + #{$kendo-grid-cell-horizontal-border-width} );
+            height: calc( #{$kendo-line-height-em} * 1.7 + calc( #{$kendo-grid-cell-padding-y} * 2 ) + #{$kendo-grid-cell-horizontal-border-width} );
         }
 
         // Layout
@@ -273,7 +273,7 @@
             padding: 0 !important; // stylelint-disable-line declaration-no-important
         }
         .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} * 2 + #{$kendo-grid-header-padding-y * 4} + 2px );
+            height: calc( #{$kendo-line-height-em} * 2 + calc( #{$kendo-grid-header-padding-y} * 4 ) + 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -284,7 +284,7 @@
             vertical-align: middle;
         }
         .k-gantt-treelist-nested-columns .k-grid-header tr {
-            height: calc( #{$kendo-line-height-em} + #{$kendo-grid-header-padding-y * 2} + 1px );
+            height: calc( #{$kendo-line-height-em} + calc( #{$kendo-grid-header-padding-y} * 2 ) + 1px );
         }
 
         &.k-gantt-treelist-scrollable {
@@ -423,8 +423,8 @@
         flex: 1 1 auto;
     }
     .k-task-dot {
-        width: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
-        height: calc( #{$kendo-gantt-dot-size} + #{$kendo-gantt-dot-spacing * 2} );
+        width: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
+        height: calc( #{$kendo-gantt-dot-size} + calc( #{$kendo-gantt-dot-spacing} * 2 ) );
         line-height: 1;
         cursor: pointer;
         display: none;
@@ -533,7 +533,7 @@
     // Single task
     .k-single-wrap {}
     .k-task-single {
-        @include border-radius( $kendo-border-radius-md );
+        @include border-radius( k-border-radius(md) );
         border-width: $kendo-gantt-task-border-width;
         border-style: solid;
         box-sizing: border-box;
@@ -566,7 +566,7 @@
         }
     }
     .k-task-complete {
-        @include border-radius( $kendo-border-radius-md );
+        @include border-radius( k-border-radius(md) );
         width: 20%;
         position: absolute;
         z-index: 1;
@@ -627,7 +627,7 @@
         white-space: nowrap;
 
         strong {
-            font-size: $kendo-font-size-lg;
+            font-size: var( --kendo-font-size-lg, inherit );
             font-weight: normal;
             display: block;
         }
@@ -766,7 +766,7 @@
     }
     .k-gantt-tooltip-validation-value {
         // TODO: extract to variable
-        font-weight: $kendo-font-weight-bold;
+        font-weight: var( --kendo-font-weight-bold, normal );
     }
     .k-gantt-tooltip-validation-label,
     .k-gantt-tooltip-validation-value {

package/scss/gantt/_variables.scss

@@ -3,95 +3,239 @@
 
 // Gantt
 
+/// The border width of the Gantt.
+/// @group 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 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, 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-legacy( $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-legacy( $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 ), k-contrast-legacy( $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;

package/scss/grid/_layout.scss

@@ -410,7 +410,7 @@
         > .k-grouping-drop-container {
             flex-grow: 1;
             padding-block: $kendo-grid-grouping-header-padding-y;
-            margin-block: -$kendo-grid-grouping-header-padding-y;
+            margin-block: calc( #{$kendo-grid-grouping-header-padding-y} * -1 );
             display: inline-flex;
             align-self: stretch;
             align-items: center;
@@ -937,14 +937,14 @@
                 gap: $_grouping-header-padding-y;
 
                 &::before {
-                    margin-inline-start: -$_grouping-header-padding-y;
+                    margin-inline-start: calc( #{$_grouping-header-padding-y} * -1 );
                 }
             }
 
             .k-grid-header {
                 .k-table-th > .k-link {
-                    margin-block: (-$_header-padding-y);
-                    margin-inline: (-$_header-padding-x);
+                    margin-block: calc( #{$_header-padding-y} * -1 );
+                    margin-inline: calc( #{$_header-padding-x} * -1 );
                     padding-block: $_header-padding-y;
                     padding-inline: $_header-padding-x;
                 }
@@ -962,8 +962,8 @@
 
             .k-table-th {
                 > .k-cell-inner {
-                    margin-block: (-$_header-padding-y);
-                    margin-inline: (-$_header-padding-x);
+                    margin-block: calc( #{$_header-padding-y} * -1 );
+                    margin-inline: calc( #{$_header-padding-x} * -1 );
 
                     > .k-link {
                         padding-block: $_header-padding-y;
@@ -1014,7 +1014,7 @@
             .k-filtercell {
                 > span,
                 .k-filtercell-wrapper {
-                    gap: k-math-div( $_cell-padding-y, 2 );
+                    gap: calc( #{$_cell-padding-y} / 2 );
                 }
             }
 
@@ -1124,12 +1124,12 @@
         box-sizing: border-box;
     }
     .k-filter-menu-container {
-        padding: k-map-get( $kendo-spacing, 2 );
+        padding: k-spacing(2);
         box-sizing: border-box;
         display: flex;
         flex-flow: column nowrap;
         align-items: stretch;
-        gap: k-map-get( $kendo-spacing, 2 );
+        gap: k-spacing(2);
 
         .k-filter-and {
             width: min-content;
@@ -1154,7 +1154,7 @@
             display: flex;
             flex-flow: column nowrap;
             align-items: stretch;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
     }