@progress/kendo-theme-fluent 5.7.0 → 5.8.1-dev.1

package/scss/pivotgrid/_theme.scss

@@ -0,0 +1,218 @@
+@use "../core/mixins" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-pivotgrid--theme() {
+
+    .k-pivotgrid {
+        @include fill (
+            var( --kendo-pivotgrid-text, #{$kendo-pivotgrid-text} ),
+            var( --kendo-pivotgrid-bg, #{$kendo-pivotgrid-bg} ),
+            var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} )
+        );
+    }
+
+    .k-pivotgrid-column-headers,
+    .k-pivotgrid-row-headers,
+    .k-pivotgrid-empty-cell {
+        @include fill (
+            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
+            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
+            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
+        );
+    }
+
+    .k-pivotgrid-empty-cell {
+        @include fill (
+            $border: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} )
+        );
+    }
+
+    .k-pivotgrid-row-headers .k-pivotgrid-row .k-pivotgrid-cell:last-child {
+        border-right-color: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} );
+    }
+
+    .k-pivotgrid-column-headers .k-pivotgrid-column-total:nth-last-of-type(2) .k-pivotgrid-cell:not(.k-pivotgrid-expanded),
+    .k-pivotgrid-column-headers .k-pivotgrid-row:last-child {
+        border-bottom-color: var( --kendo-pivotgrid-alt-border, #{$kendo-pivotgrid-alt-border} );
+    }
+
+
+    .k-pivotgrid-header-total,
+    .k-pivotgrid-total {
+        @include fill (
+            var( --kendo-pivotgrid-total-text, #{$kendo-pivotgrid-total-text} ),
+            var( --kendo-pivotgrid-total-bg, #{$kendo-pivotgrid-total-bg} ),
+            var( --kendo-pivotgrid-total-border, #{$kendo-pivotgrid-total-border} )
+        );
+    }
+
+
+    // Hover state
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-row-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-column-headers tbody > .k-pivotgrid-row.k-hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row:hover,
+    .k-pivotgrid-values tbody > .k-pivotgrid-row.k-hover {
+        @include fill (
+            var( --kendo-pivotgrid-hover-text, #{$kendo-pivotgrid-hover-text} ),
+            var( --kendo-pivotgrid-hover-bg, #{$kendo-pivotgrid-hover-bg} ),
+            var( --kendo-pivotgrid-hover-border, #{$kendo-pivotgrid-hover-border} )
+        );
+    }
+
+    // Focus state
+    .k-pivotgrid-cell:focus,
+    .k-pivotgrid-cell.k-focus,
+    .k-pivotgrid-empty-cell:focus,
+    .k-pivotgrid-empty-cell.k-focus,
+    .k-master-row > .k-pivotgrid-cell:focus,
+    .k-grouping-row > .k-pivotgrid-cell:focus,
+    .k-detail-row > .k-pivotgrid-cell:focus,
+    .k-group-footer > .k-pivotgrid-cell:focus {
+        @include box-shadow( var( --kendo-pivotgrid-focus-shadow, #{$kendo-pivotgrid-focus-shadow} ) );
+    }
+
+    // Selected state
+    .k-pivotgrid-cell.k-selected,
+    .k-pivotgrid-row.k-selected > .k-pivotgrid-cell {
+        @include fill (
+            var( --kendo-pivotgrid-selected-text, #{$kendo-pivotgrid-selected-text} ),
+            var( --kendo-pivotgrid-selected-bg, #{$kendo-pivotgrid-selected-bg} ),
+            var( --kendo-pivotgrid-selected-border, #{$kendo-pivotgrid-selected-border} )
+        );
+    }
+
+}
+
+
+
+@mixin kendo-pivotgrid-configurator--theme() {
+
+    .k-pivotgrid-configurator-button,
+    .k-pivotgrid-configurator-panel {
+        @include fill (
+            var( --kendo-pivotgrid-configurator-text, #{$kendo-pivotgrid-configurator-text} ),
+            var( --kendo-pivotgrid-configurator-bg, #{$kendo-pivotgrid-configurator-bg} ),
+            var( --kendo-pivotgrid-configurator-border, #{$kendo-pivotgrid-configurator-border} )
+        );
+    }
+
+    .k-pivotgrid-configurator-header {
+        @include fill(
+            var( --kendo-pivotgrid-configurator-header-text, #{$kendo-pivotgrid-configurator-header-text} ),
+            var( --kendo-pivotgrid-configurator-header-bg, #{$kendo-pivotgrid-configurator-header-bg} ),
+            var( --kendo-pivotgrid-configurator-header-border, #{$kendo-pivotgrid-configurator-header-border} )
+        );
+    }
+
+    .k-pivotgrid-configurator-content .k-fields-list-wrapper {
+        @include fill(
+            $border: var( --kendo-pivotgrid-configurator-border, #{$kendo-pivotgrid-configurator-border} )
+        );
+    }
+
+
+    // Calculated field
+    .k-calculated-field {
+        @include fill (
+            var( --kendo-pivotgrid-calculated-field-text, #{$kendo-pivotgrid-calculated-field-text} ),
+            var( --kendo-pivotgrid-calculated-field-bg, #{$kendo-pivotgrid-calculated-field-bg} ),
+            var( --kendo-pivotgrid-calculated-field-border, #{$kendo-pivotgrid-calculated-field-border} )
+        );
+    }
+
+    .k-calculated-field-header {
+        @include fill(
+            var( --kendo-pivotgrid-calculated-field-header-text, #{$kendo-pivotgrid-calculated-field-header-text} ),
+            var( --kendo-pivotgrid-calculated-field-header-bg, #{$kendo-pivotgrid-calculated-field-header-bg} ),
+            var( --kendo-pivotgrid-calculated-field-header-border, #{$kendo-pivotgrid-calculated-field-header-border} )
+        );
+    }
+
+    .k-filter-menu .k-calculated-item {
+        @include fill( $border: var( --kendo-component-border, inherit ) );
+    }
+
+    .k-pivotgrid-configurator-content .k-form-field-wrapper {
+        @include fill( $border: var( --kendo-component-border, inherit ) );
+    }
+
+}
+
+@mixin kendo-pivotgrid-legacy--theme() {
+
+    .k-pivot {
+        @include fill (
+            var( --kendo-pivotgrid-text, #{$kendo-pivotgrid-text} ),
+            var( --kendo-pivotgrid-bg, #{$kendo-pivotgrid-bg} ),
+            var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} )
+        );
+    }
+    .k-pivot-table {
+        border-color: var( --kendo-pivotgrid-border, #{$kendo-pivotgrid-border} );
+    }
+
+    // Pivotgrid header
+    .k-pivot-rowheaders {
+        @include fill(
+            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
+            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
+            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
+        );
+    }
+
+
+    // Pivotgrid toolbar
+    .k-pivot-toolbar {
+        @include fill(
+            var( --kendo-pivotgrid-headers-text, #{$kendo-pivotgrid-headers-text} ),
+            var( --kendo-pivotgrid-headers-bg, #{$kendo-pivotgrid-headers-bg} ),
+            var( --kendo-pivotgrid-headers-border, #{$kendo-pivotgrid-headers-border} )
+        );
+
+        .k-empty {
+            color: var( --kendo-subtle-text, inherit );
+        }
+    }
+
+    .k-pivot-toolbar,
+    .k-pivot-table,
+    .k-pivot-rowheaders > .k-grid td:first-child,
+    .k-pivot-table .k-grid-header .k-header.k-first {
+        border-color: var( --kendo-pivotgrid-chrome-border, #{$kendo-pivotgrid-chrome-border} );
+    }
+
+    .k-pivot-layout .k-grid-footer {
+        color: var( --kendo-pivotgrid-alt-text, #{$kendo-pivotgrid-alt-text} );
+        background-color: var( --kendo-pivotgrid-alt-bg, #{$kendo-pivotgrid-alt-bg} );
+    }
+
+    // KPI icons
+    .k-i-kpi-trend-increase,
+    .k-i-kpi-trend-decrease,
+    .k-i-kpi-trend-equal {
+        color: inherit;
+    }
+
+    .k-i-kpi-status-hold {
+        color: var( --kendo-warning-100, initial );
+    }
+
+    .k-i-kpi-status-deny {
+        color: var( --kendo-error-100, initial );
+    }
+
+    .k-i-kpi-status-open {
+        color: var( --kendo-success-100, initial );
+    }
+
+
+    // Configurator
+    .k-pivotgrid-configurator-panel.kendo-jquery {
+        .k-column-fields {
+            border-color: var( --kendo-component-border, inherit );
+        }
+    }
+
+}

package/scss/pivotgrid/_variables.scss

@@ -0,0 +1,239 @@
+@use "sass:math";
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../grid/_variables.scss" as *;
+@use "../table/_variables.scss" as *;
+@use "../list/_variables.scss" as *;
+
+/// Spacer of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-spacer: map-get( $kendo-spacing, 3 ) !default;
+
+/// Horizontal padding of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-padding-x: 0px !default;
+/// Vertical of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-padding-y: 0px !default;
+/// Font family of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-font-family: var( --kendo-font-family, inherit ) !default;
+///  Font size of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-font-size:  var( --kendo-font-size, inherit ) !default;
+///  Line height of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-line-height: var( --kendo-line-height, normal ) !default;
+/// Border width of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-border-width: 1px !default;
+/// Icon spacing of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-icon-spacing: var( --kendo-icon-spacing, .5rem ) !default;
+
+/// Background color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-bg: var( --kendo-component-bg, initial ) !default;
+/// Text color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-text: var( --kendo-component-text, initial ) !default;
+///  Border color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-border: var( --kendo-component-border, initial ) !default;
+/// Alt border color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-alt-border: $kendo-pivotgrid-border !default;
+
+/// Default width of the PivotGrid row header.
+/// @group pivotgrid
+$kendo-pivotgrid-row-header-width: 300px !default;
+/// Default height of the PivotGrid column header.
+/// @group pivotgrid
+$kendo-pivotgrid-column-header-height: 75px !default;
+
+/// Horizontal padding of the PivotGrid cell.
+/// @group pivotgrid
+$kendo-pivotgrid-cell-padding-x: $kendo-table-cell-padding-x !default;
+/// Vertical padding of the PivotGrid cell.
+/// @group pivotgrid
+$kendo-pivotgrid-cell-padding-y: $kendo-table-cell-padding-y !default;
+/// Border width of the PivotGrid cell.
+/// @group pivotgrid
+$kendo-pivotgrid-cell-border-width: 1px !default;
+
+/// Background color of the PivotGrid header.
+/// @group pivotgrid
+$kendo-pivotgrid-headers-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PivotGrid header.
+/// @group pivotgrid
+$kendo-pivotgrid-headers-text: get-theme-color-var( neutral-190 ) !default;
+/// Border color of the PivotGrid header.
+/// @group pivotgrid
+$kendo-pivotgrid-headers-border: var( --kendo-component-border, inherit ) !default;
+
+/// Background color of the PivotGrid total cells.
+/// @group pivotgrid
+$kendo-pivotgrid-total-bg: get-theme-color-var( neutral-20 ) !default;
+/// Text color of the PivotGrid total cells.
+/// @group pivotgrid
+$kendo-pivotgrid-total-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the PivotGrid total cells.
+/// @group pivotgrid
+$kendo-pivotgrid-total-border: var( --kendo-component-border, inherit ) !default;
+
+/// Hover background color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-hover-bg: var( --kendo-hover-bg, inherit ) !default;
+/// Hover text color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-hover-text: inherit !default;
+/// Hover border color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-hover-border: inherit !default;
+
+/// Selected background color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-selected-bg: var( --kendo-selected-bg, inherit ) !default;
+/// Selected text color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-selected-text: inherit !default;
+/// Selected border color of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-selected-border: inherit !default;
+
+/// Focus shadow of the PivotGrid.
+/// @group pivotgrid
+$kendo-pivotgrid-focus-shadow: $kendo-list-item-focus-shadow !default;
+
+/// Horizontal padding of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-padding-x: 0px !default;
+/// Vertical padding of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-padding-y: 0px !default;
+/// Border width of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-border-width: 1px !default;
+
+/// Horizontal padding of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-padding-x: $kendo-pivotgrid-spacer !default;
+/// Vertical padding of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-padding-y: $kendo-pivotgrid-configurator-header-padding-x !default;
+/// Font size of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-font-size: calc( var( --kendo-font-size-xl, 2rem ) * .9 ) !default;
+/// Font weight of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-font-weight: var( --kendo-font-weight-bold, bold ) !default;
+
+/// Horizontal padding of the PivotGrid configurator content.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-content-padding-x: $kendo-pivotgrid-spacer !default;
+/// Vertical padding of the PivotGrid configurator content.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-content-padding-y: 0px !default;
+
+/// Horizontal margin of the PivotGrid configurator fields.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-fields-margin-x: 0px !default;
+/// Vertical margin of the PivotGrid configurator fields.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-fields-margin-y: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+/// Spacing of the PivotGrid configurator fields.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-fields-gap: map-get( $kendo-spacing, 2) !default;
+
+/// Default width of the PivotGrid vertical configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-vertical-width: 320px !default;
+/// Default height of the PivotGrid horizontal configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-horizontal-height: 420px !default;
+
+/// Background color of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-text: get-theme-color-var( neutral-190 ) !default;
+/// Border color of the PivotGrid configurator.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-border: var( --kendo-component-border, inherit )!default;
+
+/// Background color of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the PivotGrid configurator header.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-header-border: inherit !default;
+
+/// Horizontal padding of the PivotGrid configurator button.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-button-padding-x: map-get( $kendo-spacing, 1 ) !default;
+/// Vertical padding of the PivotGrid configurator button.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-button-padding-y: map-get( $kendo-spacing, 1 ) !default;
+/// Border width of the PivotGrid configurator button.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-button-border-width: 1px !default;
+/// Size of the PivotGrid configurator button.
+/// @group pivotgrid
+$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;
+/// Icon spacing of the PivotGrid configurator button.
+/// @group pivotgrid
+$kendo-pivotgrid-configurator-button-icon-spacing: map-get( $kendo-spacing, 2 );
+
+/// Horizontal padding of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-padding-x: $kendo-pivotgrid-spacer !default;
+/// Vertical padding of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-padding-y: $kendo-pivotgrid-spacer !default;
+/// Border width of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-border-width: 1px !default;
+/// Border radius of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-border-radius: var( --kendo-border-radius-md, 0 ) !default;
+/// Spacing of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-gap: $kendo-pivotgrid-spacer !default;
+/// Background color of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the PivotGrid calculated field.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-border: var( --kendo-component-border, inherit ) !default;
+
+/// Background color of the PivotGrid calculated field header.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-header-bg: inherit !default;
+/// Text color of the PivotGrid calculated field header.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-header-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the PivotGrid calculated field header.
+/// @group pivotgrid
+$kendo-pivotgrid-calculated-field-header-border: inherit !default;
+
+/// Horizontal padding of the PivotGrid treeview.
+/// @group pivotgrid
+$kendo-pivotgrid-treeview-padding-x: math.div( $kendo-pivotgrid-spacer, 2 ) !default;
+/// Vertical padding of the PivotGrid treeview.
+/// @group pivotgrid
+$kendo-pivotgrid-treeview-padding-y: 0px !default;
+
+// Legacy variables
+$kendo-pivotgrid-alt-bg: $kendo-grid-header-bg !default;
+$kendo-pivotgrid-alt-text: $kendo-grid-header-text !default;
+$kendo-pivotgrid-chrome-border: $kendo-grid-border !default;
+
+$kendo-pivotgrid-container-bg: var( --kendo-component-bg, inherit ) !default;
+$kendo-pivotgrid-row-headers-bg: var( --kendo-component-bg, inherit ) !default;

package/scss/pivotgrid/index.scss

@@ -0,0 +1,36 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "pivotgrid",
+    dependencies: (
+        "icon",
+        "list",
+        "dialog",
+        "treeview",
+        "grid"
+    )
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "pivotgrid" ) {
+        @include kendo-pivotgrid--layout();
+        @include kendo-pivotgrid-configurator--layout();
+        @include kendo-pivotgrid-export--layout();
+        @include kendo-pivotgrid-legacy--layout();
+        @include kendo-pivotgrid-configurator-legacy--layout();
+
+        @include kendo-pivotgrid--theme();
+        @include kendo-pivotgrid-configurator--theme();
+        @include kendo-pivotgrid-legacy--theme();
+    }
+}

package/scss/popup/_variables.scss

@@ -16,10 +16,10 @@ $kendo-popup-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 
 /// Font size of the popup.
 /// @group popup
-$kendo-popup-font-size: var(--kendo-font-size, inherit) !default;
+$kendo-popup-font-size: var( --kendo-font-size, inherit) !default;
 /// Line height of the popup.
 /// @group popup
-$kendo-popup-line-height: var(--kendo-line-height, normal) !default;
+$kendo-popup-line-height: var( --kendo-line-height, normal) !default;
 
 /// Horizontal padding of the content inside the popup.
 /// @group popup

package/scss/progressbar/_variables.scss

@@ -111,4 +111,4 @@ $kendo-circular-progressbar-arc-stroke: get-theme-color-var( primary-100 ) !defa
 /// @group progressbar
 $kendo-circular-progressbar-scale-stroke: $kendo-progressbar-bg !default;
 
-$kendo-progressbar-item-border-width: calc( map-get( $kendo-spacing, thin ) + map-get( $kendo-spacing, hair ) ) !default;
+$kendo-progressbar-item-border-width: map-get( $kendo-spacing, thin ) !default;

package/scss/radio/_layout.scss

@@ -1,7 +1,8 @@
+@use "sass:math";
 @use "_variables.scss" as *;
 @use "../core/_variables.scss" as *;
-@use "../core/mixins/border-radius" as *; 
-@use "../core/mixins/disabled" as *; 
+@use "../core/mixins/border-radius" as *;
+@use "../core/mixins/disabled" as *;
 
 @mixin kendo-radio--layout() {
 
@@ -79,8 +80,8 @@
             border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
             box-sizing: border-box;
             position: absolute;
-            top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
-            left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+            top: var( --INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
+            left: var( --INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
         }
     }
 
@@ -96,8 +97,8 @@
             border-radius: var( --kendo-radio-border-radius, #{ $kendo-radio-border-radius } );
             box-sizing: border-box;
             position: absolute;
-            top: var(--INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
-            left: var(--INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
+            top: var( --INTERNAL-kendo-radio-checked-top, #{ $kendo-radio-checked-top } );
+            left: var( --INTERNAL-kendo-radio-checked-left, #{ $kendo-radio-checked-left } );
         }
 
         @if $kendo-radio-indicator-type == "glyph" {
@@ -252,14 +253,14 @@
                 --INTERNAL-kendo-radio-font-size: #{ $_glyph-size };
             }
         }
-        
+
         .k-radio-#{$size}.k-checked,
         .k-radio-#{$size}:checked,
         .k-radio-#{$size}.k-hover,
         .k-radio-#{$size}:hover {
             &::after {
-                --INTERNAL-kendo-radio-checked-width: calc( #{ $_size } / 2 );
-                --INTERNAL-kendo-radio-checked-height: calc( #{ $_size } / 2 );
+                --INTERNAL-kendo-radio-checked-width: #{math.div( $_size, 2 )};
+                --INTERNAL-kendo-radio-checked-height: #{math.div( $_size, 2 )};
                 --INTERNAL-kendo-radio-checked-border-width: #{ $_checked-border-width };
                 --INTERNAL-kendo-radio-checked-top: #{ $_checked-position };
                 --INTERNAL-kendo-radio-checked-left: #{ $_checked-position };

package/scss/radio/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core/color-system" as *;
 @use "../core/_variables.scss" as *;
 @use "../core/functions/" as *;
@@ -49,10 +50,10 @@ $kendo-radio-height: map-get( $kendo-spacing, 5 ) !default;
 $kendo-radio-font-size: ( map-get( $kendo-spacing, 5 ) - map-get( $kendo-spacing, thin ) ) !default;
 /// Default ripple width of radio button.
 /// @group radio
-$kendo-radio-ripple-width: calc( map-get( $kendo-spacing, 5 ) * 3 ) !default;
+$kendo-radio-ripple-width: ( map-get( $kendo-spacing, 5 ) * 3 ) !default;
 /// Default ripple height of radio button.
 /// @group radio
-$kendo-radio-ripple-height: calc( map-get( $kendo-spacing, 5 ) * 3 ) !default;
+$kendo-radio-ripple-height: ( map-get( $kendo-spacing, 5 ) * 3 ) !default;
 
 /// Background color of radio button.
 /// @group radio
@@ -92,10 +93,10 @@ $kendo-radio-checked-left: map-get( $kendo-spacing, 1 ) !default;
 $kendo-radio-checked-border-width: ( map-get( $kendo-spacing, 1) + map-get( $kendo-spacing, hair) ) !default;
 /// Width of checked radio button.
 /// @group radio
-$kendo-radio-checked-width: calc( $kendo-radio-width / 2 ) !default;
+$kendo-radio-checked-width: math.div( $kendo-radio-width, 2 ) !default;
 /// Height of checked radio button.
 /// @group radio
-$kendo-radio-checked-height: calc( $kendo-radio-height / 2 ) !default;
+$kendo-radio-checked-height: math.div( $kendo-radio-height, 2 ) !default;
 /// Background color of checked radio button.
 /// @group radio
 $kendo-radio-checked-bg: var( --kendo-component-bg, initial ) !default;

package/scss/rating/_variables.scss

@@ -5,7 +5,7 @@
 $kendo-rating-font-family: var( --kendo-font-family, inherit ) !default;
 /// Font size of the rating.
 /// @group rating
-$kendo-rating-font-size: var(--kendo-font-size-sm, inherit ) !default;
+$kendo-rating-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Line height of the rating.
 /// @group rating
 $kendo-rating-line-height: var( --kendo-line-height, normal ) !default;

package/scss/scheduler/_layout.scss

@@ -331,7 +331,7 @@
     // Scheduler view header
     .k-scheduler-header,
     .k-scheduler-view-header {
-        padding-inline-end: var(--kendo-scrollbar-width, #{$default-scrollbar-width});
+        padding-inline-end: var( --kendo-scrollbar-width, #{$default-scrollbar-width});
     }
 
     .k-scheduler-header th {
@@ -973,7 +973,7 @@
         }
 
         .k-scheduler-yearview .k-calendar-view .k-month {
-            margin-inline: calc(var( --kendo-scheduler-yearview-calendar-gap, #{$kendo-scheduler-yearview-calendar-gap} ) / 2);
+            margin-inline: calc( var( --kendo-scheduler-yearview-calendar-gap, #{$kendo-scheduler-yearview-calendar-gap} ) / 2);
         }
     }
 }

package/scss/scheduler/_variables.scss

@@ -66,7 +66,7 @@ $kendo-scheduler-event-padding-x: map-get( $kendo-spacing, 2 ) !default;
 $kendo-scheduler-event-padding-y: map-get( $kendo-spacing, thin ) !default;
 /// Minumum height of the scheduler event.
 /// @group scheduler
-$kendo-scheduler-event-min-height: calc( $kendo-scheduler-line-height + 2 * $kendo-scheduler-event-padding-y ) !default;
+$kendo-scheduler-event-min-height: calc( #{$kendo-scheduler-line-height} + 2 * #{$kendo-scheduler-event-padding-y} ) !default;
 
 /// Background color of the scheduler event.
 /// @group scheduler