@progress/kendo-theme-default 7.3.0-dev.1 → 8.0.0-dev.1

package/scss/panelbar/_layout.scss

@@ -88,7 +88,7 @@
             @for $i from 1 through $kendo-panelbar-item-level-count {
                 &.k-level-#{$i} {
                     .k-link {
-                        padding-left: ( $kendo-panelbar-item-padding-x * $i );
+                        padding-left: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                     }
                 }
             }
@@ -127,7 +127,7 @@
                     &.k-level-#{$i} {
                         .k-link {
                             padding-left: $kendo-panelbar-item-padding-x;
-                            padding-right: ( $kendo-panelbar-item-padding-x * $i );
+                            padding-right: calc( #{$kendo-panelbar-item-padding-x} * #{$i} );
                         }
                     }
                 }

package/scss/panelbar/_variables.scss

@@ -2,19 +2,19 @@
 
 /// The horizontal padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-x: 0px !default;
+$kendo-panelbar-padding-x: k-spacing(0) !default;
 /// The vertical padding of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-padding-y: 0px !default;
+$kendo-panelbar-padding-y: k-spacing(0) !default;
 /// The font family of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-font-family: $kendo-font-family !default;
+$kendo-panelbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-font-size: $kendo-font-size-md !default;
+$kendo-panelbar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the PanelBar.
 /// @group panelbar
-$kendo-panelbar-line-height: $kendo-line-height-md !default;
+$kendo-panelbar-line-height: var( --kendo-line-height, normal ) !default;
 /// The width of the border around the PanelBar.
 /// @group panelbar
 $kendo-panelbar-border-width: 1px !default;
@@ -30,17 +30,17 @@ $kendo-panelbar-item-border-style: solid !default;
 
 /// The horizontal padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-panelbar-header-padding-x: k-spacing(4) !default;
 /// The vertical padding of the PanelBar header.
 /// @group panelbar
-$kendo-panelbar-header-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-panelbar-header-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-panelbar-item-padding-x: k-spacing(4) !default;
 /// The vertical padding of the PanelBar items.
 /// @group panelbar
-$kendo-panelbar-item-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-panelbar-item-padding-y: k-spacing(2) !default;
 
 /// The maximum nesting of the PanelBar items.
 /// @group panelbar

package/scss/pdf-viewer/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-pdf-viewer-border-width: 1px !default;
 /// The font family of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-font-family: $kendo-font-family !default;
+$kendo-pdf-viewer-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-font-size: $kendo-font-size-md !default;
+$kendo-pdf-viewer-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the PDFViewer.
 /// @group pdf-viewer
-$kendo-pdf-viewer-line-height: $kendo-line-height-md !default;
+$kendo-pdf-viewer-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The background color of the PDFViewer.
 /// @group pdf-viewer
@@ -48,7 +48,7 @@ $kendo-pdf-viewer-canvas-border: null !default;
 
 /// The spacing of the PDFViewer page.
 /// @group pdf-viewer
-$kendo-pdf-viewer-page-spacing: 30px !default;
+$kendo-pdf-viewer-page-spacing: k-spacing(7.5) !default;
 
 /// The background color of the PDFViewer page.
 /// @group pdf-viewer
@@ -96,7 +96,7 @@ $kendo-pdf-viewer-search-panel-matches-spacing: $kendo-padding-sm-x !default;
 
 /// The line height of the PDFViewer selection.
 /// @group pdf-viewer
-$kendo-pdf-viewer-selection-line-height: $kendo-line-height-sm !default;
+$kendo-pdf-viewer-selection-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The background color of the PDFViewer highlight.
 /// @group pdf-viewer

package/scss/pivotgrid/_layout.scss

@@ -282,11 +282,11 @@
             margin-inline: $kendo-pivotgrid-configurator-fields-margin-x;
             display: flex;
             flex-direction: column;
-            gap: k-math-div( $kendo-pivotgrid-spacer, 2 );
+            gap: calc( #{$kendo-pivotgrid-spacer} / 2 );
         }
 
         .k-select-all .k-checkbox {
-            margin-inline-end: k-map-get( $kendo-spacing, 1 );
+            margin-inline-end: k-spacing(1);
         }
 
         .k-fields-list-wrapper {
@@ -299,7 +299,7 @@
         }
 
         .k-settings-description {
-            margin-top: k-map-get( $kendo-spacing, 4 );
+            margin-top: k-spacing(4);
             text-align: center;
         }
 
@@ -354,7 +354,7 @@
         align-items: center;
 
         .k-icon {
-            margin-right: k-map-get( $kendo-spacing, 2 );
+            margin-right: k-spacing(2);
         }
         .k-dropdown-list {
             max-width: 100px;
@@ -578,7 +578,7 @@
         display: flex;
         flex-flow: row nowrap;
         align-items: flex-start;
-        gap: k-map-get( $kendo-spacing, 2 );
+        gap: k-spacing(2);
 
         > .k-pivotgrid-configurator-panel {
             max-width: 320px;
@@ -597,11 +597,11 @@
         }
 
         .k-pivotgrid-configurator-content {
-            padding: k-map-get( $kendo-spacing, 4 );
+            padding: k-spacing(4);
             max-height: 100%;
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 4 );
+            gap: k-spacing(4);
             overflow-x: hidden;
             overflow-y: auto;
         }
@@ -609,24 +609,24 @@
         .k-pivotgrid-targets {
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 4 );
+            gap: k-spacing(4);
         }
 
         .k-pivotgrid-configurator-section {
             display: flex;
             flex-flow: column nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
 
         .k-column-fields {
             margin: 0;
-            padding: k-map-get( $kendo-spacing, 1 );
+            padding: k-spacing(1);
             max-height: 200px;
             border-width: 1px;
             border-style: solid;
             display: flex;
             flex-flow: row wrap;
-            gap: k-map-get( $kendo-spacing, 1 );
+            gap: k-spacing(1);
             overflow-x: hidden;
             overflow-y: auto;
 
@@ -638,7 +638,7 @@
 
     // PivotGrid toggle icon
     .k-pivotgrid-toggle {
-        margin-block: -$kendo-icon-padding;
+        margin-block: calc( #{$kendo-icon-padding} * -1 );
         padding: $kendo-icon-padding;
         box-sizing: content-box;
         cursor: pointer;

package/scss/pivotgrid/_variables.scss

@@ -2,14 +2,14 @@
 
 
 // Pivot grid
-$kendo-pivotgrid-spacer: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-pivotgrid-spacer: k-spacing(4) !default;
 $kendo-pivotgrid-padding-x: null !default;
 $kendo-pivotgrid-padding-y: null !default;
-$kendo-pivotgrid-font-family: $kendo-font-family !default;
-$kendo-pivotgrid-font-size: $kendo-font-size-md !default;
-$kendo-pivotgrid-line-height: $kendo-line-height-md !default;
+$kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-pivotgrid-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
 $kendo-pivotgrid-border-width: 1px !default;
-$kendo-pivotgrid-icon-spacing: 4px !default;
+$kendo-pivotgrid-icon-spacing: k-spacing(1) !default;
 
 $kendo-pivotgrid-row-header-width: 300px !default;
 $kendo-pivotgrid-column-header-height: 75px !default;
@@ -48,15 +48,15 @@ $kendo-pivotgrid-configurator-padding-y: null !default;
 $kendo-pivotgrid-configurator-border-width: 1px !default;
 
 $kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default;
-$kendo-pivotgrid-configurator-header-padding-y: ( $kendo-pivotgrid-spacer * .75 ) !default;
+$kendo-pivotgrid-configurator-header-padding-y: calc( #{$kendo-pivotgrid-spacer} * .75 ) !default;
 $kendo-pivotgrid-configurator-header-font-size: 18px !default;
 $kendo-pivotgrid-configurator-header-font-weight: 500 !default;
 
 $kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
-$kendo-pivotgrid-configurator-content-padding-y: 2px !default;
+$kendo-pivotgrid-configurator-content-padding-y: k-spacing(0.5) !default;
 
-$kendo-pivotgrid-configurator-fields-margin-x: 0px !default;
-$kendo-pivotgrid-configurator-fields-margin-y: k-math-div( $kendo-pivotgrid-spacer, 2 ) !default;
+$kendo-pivotgrid-configurator-fields-margin-x: k-spacing(0) !default;
+$kendo-pivotgrid-configurator-fields-margin-y: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
 
 $kendo-pivotgrid-configurator-vertical-width: 320px !default;
 $kendo-pivotgrid-configurator-horizontal-height: 420px !default;
@@ -75,16 +75,16 @@ $kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow
 $kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow  !default; // 0px -3px 6px rgba(0, 0, 0, .16)
 $kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px 3px 6px rgba(0, 0, 0, .16)
 
-$kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-pivotgrid-configurator-button-padding-x: k-spacing(1) !default;
+$kendo-pivotgrid-configurator-button-padding-y: k-spacing(1) !default;
 $kendo-pivotgrid-configurator-button-border-width: 1px !default;
-$kendo-pivotgrid-configurator-button-size: calc( #{$kendo-pivotgrid-line-height * 1em} + #{$kendo-pivotgrid-configurator-button-padding-y * 2} + #{$kendo-pivotgrid-configurator-button-border-width * 2} ) !default;
+$kendo-pivotgrid-configurator-button-size: calc( calc( #{$kendo-pivotgrid-line-height} * 1em ) + calc( #{$kendo-pivotgrid-configurator-button-padding-y} * 2 ) + calc( #{$kendo-pivotgrid-configurator-button-border-width} * 2 ) ) !default;
 
 // Calculated fields
 $kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
 $kendo-pivotgrid-calculated-field-border-width: 1px !default;
-$kendo-pivotgrid-calculated-field-border-radius: $kendo-border-radius-md !default;
+$kendo-pivotgrid-calculated-field-border-radius: k-border-radius(md) !default;
 $kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
 
 $kendo-pivotgrid-calculated-field-bg: $kendo-component-bg !default;
@@ -96,8 +96,8 @@ $kendo-pivotgrid-calculated-field-header-text: $kendo-component-header-text !def
 $kendo-pivotgrid-calculated-field-header-border: null !default;
 
 
-$kendo-pivotgrid-treeview-padding-x: k-math-div( $kendo-pivotgrid-spacer, 2 ) !default;
-$kendo-pivotgrid-treeview-padding-y: 0px !default;
+$kendo-pivotgrid-treeview-padding-x: calc( #{$kendo-pivotgrid-spacer} / 2 ) !default;
+$kendo-pivotgrid-treeview-padding-y: k-spacing(0) !default;
 
 // Legacy variables
 $kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;

package/scss/popup/_layout.scss

@@ -20,7 +20,7 @@
         }
     }
     .k-animation-container {
-        @include border-bottom-radius-only( $kendo-border-radius-md );
+        @include border-bottom-radius-only( k-border-radius(md) );
     }
 
     .k-animation-container-shown {

package/scss/popup/_theme.scss

@@ -10,7 +10,7 @@
     }
 
     .k-animation-container {
-        @include border-bottom-radius-only( $kendo-border-radius );
+        @include border-bottom-radius-only( k-border-radius(md) );
     }
 
 }

package/scss/popup/_variables.scss

@@ -13,17 +13,17 @@ $kendo-popup-border-radius: null !default;
 
 /// Font size of the popup.
 /// @group popup
-$kendo-popup-font-size: $kendo-font-size-md !default;
+$kendo-popup-font-size: var( --kendo-font-size, inherit ) !default;
 /// Line height of the popup.
 /// @group popup
-$kendo-popup-line-height: $kendo-line-height-md !default;
+$kendo-popup-line-height: var( --kendo-line-height, normal ) !default;
 
 /// Horizontal padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-x: k-spacing(2) !default;
 /// Vertical padding of the popup content.
 /// @group popup
-$kendo-popup-content-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-popup-content-padding-y: k-spacing(2) !default;
 
 /// Background color of the popup.
 /// @group popup

package/scss/progressbar/_layout.scss

@@ -2,7 +2,7 @@
 
     // Base
     .k-progressbar {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         --kendo-progressbar-value: 0;
         border-width: $kendo-progressbar-border-width;
         border-style: solid;
@@ -73,7 +73,7 @@
     }
     .k-progress-status {
         padding-block: 0;
-        padding-inline: k-map-get( $kendo-spacing, 2 );
+        padding-inline: k-spacing(2);
         min-width: 10px;
         text-align: center;
         display: inline-block;

package/scss/progressbar/_variables.scss

@@ -14,10 +14,10 @@ $kendo-progressbar-animation-timing: 1s linear infinite !default;
 $kendo-progressbar-border-width: 0px !default;
 /// The font family of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-family: $kendo-font-family !default;
+$kendo-progressbar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ProgressBar.
 /// @group progressbar
-$kendo-progressbar-font-size: $kendo-font-size-sm !default;
+$kendo-progressbar-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the ProgressBar.
 /// @group progressbar
 $kendo-progressbar-line-height: 1 !default;

package/scss/prompt/_variables.scss

@@ -22,13 +22,13 @@ $kendo-prompt-header-border: $kendo-component-header-border !default;
 
 /// The vertical padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-y: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-y: k-spacing(4) !default;
 /// The horizontal padding of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-padding-x: k-spacing(4) !default;
 /// The spacing between the items of the Prompt content.
 /// @group prompt
-$kendo-prompt-content-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-prompt-content-spacing: k-spacing(4) !default;
 /// The text color of the Prompt content.
 /// @group prompt
 $kendo-prompt-content-text: $kendo-component-header-text !default;
@@ -41,17 +41,17 @@ $kendo-prompt-content-border: $kendo-component-header-border !default;
 
 /// The spacing between the items of the Prompt content expander.
 /// @group prompt
-$kendo-prompt-expander-spacing: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-expander-spacing: k-spacing(2) !default;
 
 /// The vertical padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-y: k-spacing(2) !default;
 /// The horizontal padding of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-prompt-suggestion-padding-x: k-spacing(2) !default;
 /// The border radius of the Prompt suggestion container.
 /// @group prompt
-$kendo-prompt-suggestion-border-radius: $kendo-border-radius-md !default;
+$kendo-prompt-suggestion-border-radius: k-border-radius(md) !default;
 /// The text color of the Prompt suggestion container.
 /// @group prompt
 $kendo-prompt-suggestion-text: $kendo-component-text !default;

package/scss/radio/_layout.scss

@@ -140,7 +140,7 @@
         flex-flow: row nowrap;
         align-items: center;
         align-content: center;
-        gap: k-map-get( $kendo-spacing, 1 );
+        gap: k-spacing(1);
 
         .k-radio-label {
             margin: 0;

package/scss/radio/_variables.scss

@@ -13,23 +13,23 @@ $kendo-radio-border-width: 1px !default;
 
 /// The size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-size: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-radio-sm-size: k-spacing(3) !default;
 /// The size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-size: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-radio-md-size: k-spacing(4) !default;
 /// The size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-size: k-map-get( $kendo-spacing, 5 ) !default;
+$kendo-radio-lg-size: k-spacing(5) !default;
 
 /// The glyph size of a small RadioButton.
 /// @group radio
-$kendo-radio-sm-glyph-size: k-map-get( $kendo-spacing, 2.5 ) !default;
+$kendo-radio-sm-glyph-size: k-spacing(2.5) !default;
 /// The glyph size of a medium RadioButton.
 /// @group radio
-$kendo-radio-md-glyph-size: k-map-get( $kendo-spacing, 3.5 ) !default;
+$kendo-radio-md-glyph-size: k-spacing(3.5) !default;
 /// The glyph size of a large RadioButton.
 /// @group radio
-$kendo-radio-lg-glyph-size: k-map-get( $kendo-spacing, 4.5 ) !default;
+$kendo-radio-lg-glyph-size: k-spacing(4.5) !default;
 
 /// The ripple size of a small RadioButton.
 /// @group radio
@@ -161,17 +161,17 @@ $kendo-radio-disabled-checked-image: null !default;
 
 /// The horizontal margin of the RadioButton inside of a label.
 /// @group radio
-$kendo-radio-label-margin-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-radio-label-margin-x: k-spacing(1) !default;
 
 
 // Radio list
 
 /// The horizontal list item margin of the RadioButton.
 /// @group radio
-$kendo-radio-list-spacing: k-map-get( $kendo-spacing, 4 ) !default;
+$kendo-radio-list-spacing: k-spacing(4) !default;
 /// The horizontal list item padding of the RadioButton.
 /// @group radio
-$kendo-radio-list-item-padding-x: 0px !default;
+$kendo-radio-list-item-padding-x: k-spacing(0) !default;
 /// The vertical list item padding of the RadioButton.
 /// @group radio
 $kendo-radio-list-item-padding-y: $kendo-list-md-item-padding-y !default;

package/scss/rating/_variables.scss

@@ -2,13 +2,13 @@
 
 /// The font family of the Rating.
 /// @group rating
-$kendo-rating-font-family: $kendo-font-family !default;
+$kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Rating.
 /// @group rating
-$kendo-rating-font-size: $kendo-font-size-md !default;
+$kendo-rating-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Rating.
 /// @group rating
-$kendo-rating-line-height: $kendo-line-height-md !default;
+$kendo-rating-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The horizontal margin of the Rating container.
 /// @group rating
@@ -29,7 +29,7 @@ $kendo-rating-label-margin-x: $kendo-padding-md-x !default;
 $kendo-rating-label-margin-y: $kendo-padding-md-y !default;
 /// The line height of the Rating label.
 /// @group rating
-$kendo-rating-label-line-height: $kendo-line-height-lg !default;
+$kendo-rating-label-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The size of the Rating icon.
 /// @group rating

package/scss/scheduler/_layout.scss

@@ -373,7 +373,7 @@
     // Appointments
     kendo-scheduler .k-event,
     .k-event {
-        @include border-radius( $kendo-border-radius );
+        @include border-radius( k-border-radius(md) );
         min-height: $kendo-scheduler-event-min-height;
         box-sizing: border-box;
         border-width: 0;
@@ -397,7 +397,7 @@
             padding-block: $kendo-padding-md-y;
             padding-inline: $kendo-padding-md-x;
             // TODO: incompatible units
-            // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
+            // padding-right: $kendo-padding-sm-x + k-spacing(4);
         }
         .k-event-time {
             padding-bottom: 0;
@@ -462,7 +462,7 @@
         }
         .k-resize-n::before,
         .k-resize-s::before {
-            width: k-map-get( $kendo-spacing, 8 );
+            width: k-spacing(8);
             border-bottom-width: 1px;
         }
         .k-resize-w {
@@ -475,7 +475,7 @@
         }
         .k-resize-w::before,
         .k-resize-e::before {
-            height: k-map-get( $kendo-spacing, 8 );
+            height: k-spacing(8);
             border-left-width: 1px;
         }
 
@@ -908,7 +908,7 @@
         .k-scheduler-datetime-picker {
             display: flex;
             flex-flow: row nowrap;
-            gap: k-map-get( $kendo-spacing, 2 );
+            gap: k-spacing(2);
         }
 
     }

package/scss/scheduler/_theme.scss

@@ -110,7 +110,7 @@
         }
 
         &.k-event-inverse {
-            color: if($kendo-enable-color-system, k-color( on-app-surface ), k-contrast-legacy( $kendo-scheduler-event-text ));
+            color: if($kendo-enable-color-system, if($kendo-enable-focus-contrast, black, k-color( on-app-surface )), k-contrast-legacy( $kendo-scheduler-event-text ));
         }
 
         &.k-event-ongoing {

package/scss/scheduler/_variables.scss

@@ -1,8 +1,8 @@
 // Scheduler
 $kendo-scheduler-border-width: 1px !default;
-$kendo-scheduler-font-family: $kendo-font-family !default;
-$kendo-scheduler-font-size: $kendo-font-size-md !default;
-$kendo-scheduler-line-height: $kendo-line-height-md !default;
+$kendo-scheduler-font-family: var( --kendo-font-family, inherit ) !default;
+$kendo-scheduler-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-scheduler-line-height: var( --kendo-line-height, normal ) !default;
 
 $kendo-scheduler-bg: $kendo-component-bg !default;
 $kendo-scheduler-text: $kendo-component-text !default;
@@ -19,7 +19,7 @@ $kendo-scheduler-footer-border: $kendo-toolbar-border !default;
 $kendo-scheduler-footer-gradient: $kendo-toolbar-gradient !default;
 
 $kendo-scheduler-event-min-height: 25px !default;
-$kendo-scheduler-event-border-radius: $kendo-border-radius-md !default;
+$kendo-scheduler-event-border-radius: k-border-radius(md) !default;
 $kendo-scheduler-event-line-height: calc( #{$kendo-scheduler-event-min-height} - (2 * #{$kendo-padding-md-y}) ) !default;
 
 $kendo-scheduler-event-bg: if($kendo-enable-color-system, k-color( primary ), k-color-tint( $kendo-selected-bg, 2 )) !default;
@@ -42,8 +42,8 @@ $kendo-scheduler-event-selected-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !defa
 
 $kendo-scheduler-event-ongoing-shadow: inset 0px 0px 0px 1px #ff0000 !default;
 
-$kendo-scheduler-cell-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-cell-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-cell-padding-x: k-spacing(2) !default;
+$kendo-scheduler-cell-padding-y: k-spacing(2) !default;
 $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
@@ -57,10 +57,10 @@ $kendo-scheduler-weekend-text: null !default;
 $kendo-scheduler-othermonth-bg: if($kendo-enable-color-system, k-color( base ), k-try-shade( $kendo-scheduler-bg, .5 )) !default;
 $kendo-scheduler-othermonth-text: null !default;
 
-$kendo-scheduler-yearview-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-padding-x: k-spacing(3) !default;
 $kendo-scheduler-yearview-padding-y: $kendo-scheduler-yearview-padding-x !default;
 
-$kendo-scheduler-yearview-calendar-gap: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-scheduler-yearview-calendar-gap: k-spacing(3) !default;
 
 $kendo-scheduler-yearview-indicator-size: 3px !default;
 $kendo-scheduler-yearview-indicator-calc-offset-top: calc( #{$kendo-calendar-cell-size} - (#{$kendo-calendar-cell-padding-y} * 2)) !default;
@@ -69,24 +69,24 @@ $kendo-scheduler-yearview-indicator-border-radius: 50% !default;
 $kendo-scheduler-yearview-indicator-bg: $kendo-color-primary !default;
 $kendo-scheduler-yearview-indicator-selected-bg: $kendo-color-primary-contrast !default;
 
-$kendo-scheduler-tooltip-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-tooltip-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-scheduler-tooltip-padding-x: k-spacing(2) !default;
+$kendo-scheduler-tooltip-padding-y: k-spacing(2) !default;
 $kendo-scheduler-tooltip-border-width: 0 !default;
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
 $kendo-scheduler-tooltip-border: null !default;
 $kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
-$kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
-$kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;
-$kendo-scheduler-tooltip-day-font-size: $kendo-scheduler-tooltip-month-font-size * 2 !default;
+$kendo-scheduler-tooltip-title-margin-y: k-spacing(3) !default;
+$kendo-scheduler-tooltip-month-font-size: var( --kendo-font-size-sm, inherit ) !default;
+$kendo-scheduler-tooltip-day-font-size: calc( #{$kendo-scheduler-tooltip-month-font-size} * 2 ) !default;
 
 $kendo-scheduler-tooltip-events-max-height: 250px !default;
-$kendo-scheduler-tooltip-events-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-scheduler-tooltip-events-gap: k-spacing(1) !default;
 
-$kendo-scheduler-tooltip-event-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-scheduler-tooltip-event-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-scheduler-tooltip-event-border-radius: $kendo-border-radius-md !default;
-$kendo-scheduler-tooltip-event-gap: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-scheduler-tooltip-event-padding-x: k-spacing(2) !default;
+$kendo-scheduler-tooltip-event-padding-y: k-spacing(1) !default;
+$kendo-scheduler-tooltip-event-border-radius: k-border-radius(md) !default;
+$kendo-scheduler-tooltip-event-gap: k-spacing(1) !default;
 
 $kendo-scheduler-tooltip-callout-text: $kendo-scheduler-tooltip-bg !default;

package/scss/scrollview/_layout.scss

@@ -97,7 +97,7 @@
 
     .k-scrollview-nav > .k-link {
         margin-block: 0;
-        margin-inline: k-math-div( $kendo-scrollview-pager-item-spacing, 2 );
+        margin-inline: calc( #{$kendo-scrollview-pager-item-spacing} / 2 );
         padding: 0;
         width: $kendo-scrollview-pagebutton-size;
         height: $kendo-scrollview-pagebutton-size;

package/scss/scrollview/_variables.scss

@@ -5,13 +5,13 @@
 $kendo-scrollview-border-width: 1px !default;
 /// The font family of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-font-family: $kendo-font-family !default;
+$kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-font-size: $kendo-font-size-md !default;
+$kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the ScrollView.
 /// @group scrollview
-$kendo-scrollview-line-height: $kendo-line-height-md !default;
+$kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The text color of the ScrollView.
 /// @group scrollview
@@ -47,13 +47,13 @@ $kendo-scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 $kendo-scrollview-pager-offset: 0 !default;
 /// The spacing between the ScrollView pager items.
 /// @group scrollview
-$kendo-scrollview-pager-item-spacing: 20px !default;
+$kendo-scrollview-pager-item-spacing: k-spacing(5) !default;
 /// The border width of the ScrollView pager items.
 /// @group scrollview
 $kendo-scrollview-pager-item-border-width: 0px !default;
 /// The height of the ScrollView pager.
 /// @group scrollview
-$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + calc( #{$kendo-scrollview-pager-item-spacing} * 2 ) ) !default;
 
 /// The text color of the highlight over the tapped ScrollView navigation arrows.
 /// @group scrollview