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

package/scss/chat/_variables.scss

@@ -0,0 +1,213 @@
+@use "../core/color-system" as *;
+@use "../core/_variables.scss" as *;
+@use "../toolbar/_variables.scss" as *;
+
+// Chat
+
+/// The box shadow transition of the chat.
+/// @group chat
+$kendo-chat-transition: var( --kendo-transition, inherit );
+/// The hover text of links in the bubble of the chat.
+/// @group chat
+$kendo-chat-link-hover-text: var( --kendo-link-hover-text, inherit );
+/// The text of links in the bubble of the chat.
+/// @group chat
+$kendo-chat-link-text: var( --kendo-link-text, inherit );
+/// The horizontal padding of the chat.
+/// @group chat
+$kendo-chat-padding-x: map-get( $kendo-spacing, 4 ) !default;
+/// The vertical padding of the chat.
+/// @group chat
+$kendo-chat-padding-y: map-get( $kendo-spacing, 4 ) !default;
+/// the width of the chat.
+/// @group chat
+$kendo-chat-width: 500px !default;
+/// The height of the chat.
+/// @group chat
+$kendo-chat-height: 600px !default;
+/// The border width of the chat.
+/// @group chat
+$kendo-chat-border-width: 1px !default;
+/// The font family of the chat.
+/// @group chat
+$kendo-chat-font-family: var( --kendo-font-family, inherit ) !default;
+/// The font size of the chat.
+/// @group chat
+$kendo-chat-font-size: var( --kendo-font-size, inherit ) !default;
+/// The line height of the chat.
+/// @group chat
+$kendo-chat-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The size of the chat typeing indicator dot in the chat.
+/// @group chat
+$kendo-chat-typing-indicator-dot-size: 8px !default;
+/// The spacing of the chat typeing indicator dot in the chat.
+/// @group chat
+$kendo-chat-typing-indicator-dot-spacing: 5px !default;
+
+/// The horizontal spacing between items of the chat.
+/// @group chat
+$kendo-chat-item-spacing-x: map-get( $kendo-spacing, 2 ) !default;
+/// The vertical spacing between items of the chat.
+/// @group chat
+$kendo-chat-item-spacing-y: map-get( $kendo-spacing, 4 ) !default;
+
+/// The horizontal padding of message list of the chat.
+/// @group chat
+$kendo-chat-message-list-padding-x: $kendo-chat-padding-x !default;
+/// The vertical padding of message list of the chat.
+/// @group chat
+$kendo-chat-message-list-padding-y: $kendo-chat-padding-y !default;
+/// The spacing of message list of the chat.
+/// @group chat
+$kendo-chat-message-list-spacing: $kendo-chat-item-spacing-y !default;
+
+/// The font size of the timestap.
+/// @group chat
+$kendo-chat-timestamp-font-size: smaller !default;
+/// The line height of the timestamp.
+/// @group chat
+$kendo-chat-timestamp-line-height: var( --kendo-line-height, normal ) !default;
+/// the text transform of the timestamp.
+/// @group chat
+$kendo-chat-timestamp-transform: uppercase !default;
+/// The text of the timestamp.
+/// @group chat
+$kendo-chat-timestamp-text: var( --kendo-subtle-text, inherit ) !default;
+/// the background of the timestamp.
+/// @group chat
+$kendo-chat-timestamp-bg: normal !default;
+
+/// The horizontal padding of the bubble message.
+/// @group chat
+$kendo-chat-bubble-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of the bubble message.
+/// @group chat
+$kendo-chat-bubble-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// The spacing of the bubble message.
+/// @group chat
+$kendo-chat-bubble-spacing: map-get( $kendo-spacing, thin ) !default;
+/// The line height of the bubble message.
+/// @group chat
+$kendo-chat-bubble-line-height: var( --kendo-line-height, normal ) !default;
+
+/// The padding of the scroll button in the chat.
+/// @group chat
+$kendo-chat-scroll-button: map-get( $kendo-spacing, 2 ) !default;
+/// The size of the card deck scrollbar in the chat.
+/// @group chat
+$kendo-card-deck-scrollbar-size: 20px !default;
+
+/// The border radius of the bubble message.
+/// @group chat
+$kendo-chat-bubble-border-radius: map-get( $kendo-spacing, 3 ) !default;
+/// The border radius of the small bubble message
+/// @group chat
+$kendo-chat-bubble-border-radius-sm: var( --kendo-border-radius, 0 ) !default;
+
+/// The size of the avatar.
+/// @group chat
+$kendo-chat-avatar-size: 32px !default;
+/// The spacing of the avatar.
+/// @group chat
+$kendo-chat-avatar-spacing: $kendo-chat-item-spacing-x !default;
+
+/// The horizontal padding of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-padding-x: $kendo-toolbar-padding-x !default;
+/// The vertical padding of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-padding-y: $kendo-toolbar-padding-y !default;
+/// The spacing of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-spacing: $kendo-toolbar-spacing !default;
+/// The background of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-bg: $kendo-toolbar-bg !default;
+/// The text of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-text: $kendo-toolbar-text !default;
+/// The border of the toolbar in the chat.
+/// @group chat
+$kendo-chat-toolbar-border: inherit !default;
+
+/// The horizontal padding of the quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-padding-x: map-get( $kendo-spacing, 3 ) !default;
+/// The vertical padding of the quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// The spacing of the quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-spacing: map-get( $kendo-spacing, 2 ) !default;
+/// The line height of the quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-line-height: $kendo-chat-bubble-line-height !default;
+
+/// The background of the chat.
+/// @group chat
+$kendo-chat-bg: get-theme-color-var( neutral-10 ) !default;
+/// The text of the chat.
+/// @group chat
+$kendo-chat-text: get-theme-color-var( neutral-190 ) !default;
+/// The border of the chat.
+/// @group chat
+$kendo-chat-border: get-theme-color-var( neutral-30 ) !default;
+
+/// The background of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-bg: var( --kendo-component-bg, inherit ) !default;
+/// The text of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-text: var( --kendo-component-text, inherit ) !default;
+/// The border of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
+/// The box shadow of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+/// The hover shadow of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-hover-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+/// The selected shadow of the bubble in the chat.
+/// @group chat
+$kendo-chat-bubble-selected-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+
+/// The background of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-bg: get-theme-color-var( primary-100 ) !default;
+/// The text of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-text: var( --kendo-component-bg, inherit ) !default;
+/// The border of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
+/// The shadow of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+/// The hover shadow of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-hover-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+/// The selected shadow of the alt bubble in the chat.
+/// @group chat
+$kendo-chat-alt-bubble-selected-shadow: var( --kendo-box-shadow-depth-1, none ) !default;
+
+/// The background of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-bg: transparent !default;
+/// The text of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-text: get-theme-color-var( primary-100 ) !default;
+/// The border of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-border: get-theme-color-var( primary-100 ) !default;
+
+/// The hover background of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-hover-bg: get-theme-color-var( primary-100 ) !default;
+/// The text of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-hover-text: var( --kendo-component-bg, inherit ) !default;
+/// The hover border of quick reply in the chat.
+/// @group chat
+$kendo-chat-quick-reply-hover-border: get-theme-color-var( primary-100 ) !default;

package/scss/chat/index.scss

@@ -0,0 +1,32 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "chat",
+    dependencies: (
+        "input",
+        "card",
+        "icon",
+        "toolbar"
+    )
+);
+
+
+// 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( "chat" ) {
+        @include kendo-chat--layout();
+        @include kendo-chat-card--layout();
+        @include kendo-chat-typing-indicator--layout();
+        @include kendo-chat-toolbar--layout();
+
+        @include kendo-chat--theme();
+    }
+}

package/scss/checkbox/_layout.scss

@@ -32,7 +32,7 @@
             content: $kendo-checkbox-checked-glyph;
             width: 1em;
             height: 1em;
-            font-size: var( --INTERNAL-kendo-glyph-size, #{ calc(( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) )) });
+            font-size: var( --INTERNAL-kendo-glyph-size, ( map-get( $kendo-spacing, 4 ) - map-get( $kendo-spacing, thin ) ) );
             font-family: var( --kendo-checkbox-glyph-font-family, #{ $kendo-checkbox-glyph-font-family } );
             line-height: 1;
             transform: translate(-50%, -50%) scale(0);
@@ -181,8 +181,8 @@
     .k-ripple-container {
         .k-checkbox::after {
             content: "";
-            width: var( --INTERNAL-kendo-ripple-size-width, calc( map-get( $kendo-spacing, 5 ) * 3 ));
-            height: var( --INTERNAL-kendo-ripple-size-height, calc( map-get( $kendo-spacing, 5 ) * 3 ));
+            width: var( --INTERNAL-kendo-ripple-size-width, ( map-get( $kendo-spacing, 5 ) * 3 ));
+            height: var( --INTERNAL-kendo-ripple-size-height, ( map-get( $kendo-spacing, 5 ) * 3 ));
             display: block;
             position: absolute;
             left: 50%;

package/scss/chip/_layout.scss

@@ -152,5 +152,5 @@
             gap: $size;
         }
     }
-    
+
 }

package/scss/chip/_theme.scss

@@ -21,9 +21,9 @@
 
         &:focus,
         &.k-focus {
-            --INTERNAL-kendo-chip-text: var(--kendo-chip-focus-text );
-            --INTERNAL-kendo-chip-bg: var(--kendo-chip-focus-bg );
-            --INTERNAL-kendo-chip-border: var(--kendo-chip-focus-border );
+            --INTERNAL-kendo-chip-text: var( --kendo-chip-focus-text );
+            --INTERNAL-kendo-chip-bg: var( --kendo-chip-focus-bg );
+            --INTERNAL-kendo-chip-border: var( --kendo-chip-focus-border );
         }
 
         &.k-chip-outline:focus::after,

package/scss/color-preview/_layout.scss

@@ -75,4 +75,3 @@
     }
 
 }
-

package/scss/coloreditor/_layout.scss

@@ -51,7 +51,7 @@
 
         // Views
         .k-coloreditor-views {
-            min-width: calc( var(--kendo-color-preview-width, #{$kendo-colorpalette-tile-width}) * var(--kendo-color-preview-columns, 10) );
+            min-width: calc( var( --kendo-color-preview-width, #{$kendo-colorpalette-tile-width}) * var( --kendo-color-preview-columns, 10) );
             padding-inline: var( --kendo-coloreditor-views-padding-x, #{$kendo-coloreditor-views-padding-x} );
             padding-block-start: calc( var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} ) * 2 );
             padding-block-end: var( --kendo-coloreditor-views-padding-y, #{$kendo-coloreditor-views-padding-y} );
@@ -76,6 +76,8 @@
 
         // Footer
         .k-coloreditor-footer.k-actions {
+            padding-block: var( --kendo-coloreditor-footer-padding-y, #{$kendo-coloreditor-footer-padding-y} );
+            padding-inline: var( --kendo-coloreditor-footer-padding-y, #{$kendo-coloreditor-footer-padding-y} );
             margin: 0;
         }
 

package/scss/coloreditor/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core/color-system" as *;
 @use "../core/_variables.scss" as *;
 
@@ -7,7 +8,7 @@ $kendo-coloreditor-spacer: map-get( $kendo-spacing, 2 ) !default;
 
 /// Min width of the color editor.
 /// @group coloreditor
-$kendo-coloreditor-min-width: 254px !default;
+$kendo-coloreditor-min-width: 260px !default;
 /// Border width of the color editor.
 /// @group coloreditor
 $kendo-coloreditor-border-width: 1px !default;
@@ -51,7 +52,7 @@ $kendo-coloreditor-header-padding-y: $kendo-coloreditor-spacer !default;
 $kendo-coloreditor-header-padding-x: $kendo-coloreditor-header-padding-y !default;
 /// Spacing of the color editor header.
 /// @group coloreditor
-$kendo-coloreditor-header-actions-spacing: calc( $kendo-coloreditor-spacer / 2 ) !default;
+$kendo-coloreditor-header-actions-spacing: math.div( $kendo-coloreditor-spacer, 2 ) !default;
 
 /// Width of the color editor preview.
 /// @group coloreditor
@@ -73,3 +74,10 @@ $kendo-coloreditor-views-padding-x: $kendo-coloreditor-views-padding-y !default;
 /// Spacing of the color editor views container.
 /// @group coloreditor
 $kendo-coloreditor-views-spacing: $kendo-coloreditor-spacer !default;
+
+/// Horizontal padding of the color editor footer.
+/// @group coloreditor
+$kendo-coloreditor-footer-padding-y: map-get( $kendo-spacing, 2 ) !default;
+/// Vertical padding of the color editor footer.
+/// @group coloreditor
+$kendo-coloreditor-footer-padding-x: map-get( $kendo-spacing, 2 ) !default;

package/scss/colorgradient/_layout.scss

@@ -41,10 +41,10 @@
             position: relative;
             flex: 1 1 auto;
             user-select: none;
+            overflow: hidden;
         }
 
         .k-hsv-gradient {
-            @include border-radius( var( --kendo-colorgradient-canvas-border-radius, #{$kendo-colorgradient-canvas-border-radius} ) );
             height: var( --kendo-colorgradient-canvas-rectangle-height, #{$kendo-colorgradient-canvas-rectangle-height} );
         }
 
@@ -85,6 +85,7 @@
         &.k-slider-vertical .k-slider-track {
             width: var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} );
             border-radius: var( --kendo-colorgradient-slider-border-radius, #{$kendo-colorgradient-slider-border-radius} );
+            margin-inline-start: calc( -1 * (var( --kendo-colorgradient-slider-track-size, #{$kendo-colorgradient-slider-track-size} ) / 2) );
         }
 
         &.k-slider-horizontal {
@@ -111,6 +112,8 @@
         .k-slider-track {
             border-width:  var( --kendo-colorgradient-slider-border-width, #{$kendo-colorgradient-slider-border-width} );
             border-style: solid;
+            transform: none;
+            z-index: auto;
         }
 
         .k-slider-wrap,
@@ -129,6 +132,7 @@
         gap: var( --kendo-colorgradient-input-spacing, #{$kendo-colorgradient-input-spacing} );
 
         .k-colorgradient-input-label {
+            font-size: var( --kendo-colorgradient-input-label-font-size, #{$kendo-colorgradient-input-label-font-size} );
             text-transform: uppercase;
         }
 

package/scss/colorgradient/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core/color-system" as *;
 @use "../core/_variables.scss" as *;
 
@@ -7,7 +8,7 @@ $kendo-colorgradient-spacer: map-get( $kendo-spacing, 4 ) !default;
 
 /// Default width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-width: 254px !default;
+$kendo-colorgradient-width: 260px !default;
 /// Border width of the color gradient.
 /// @group cologradient
 $kendo-colorgradient-border-width: 1px !default;
@@ -19,7 +20,7 @@ $kendo-colorgradient-border-radius: var( --kendo-border-radius-md, 0 ) !default;
 $kendo-colorgradient-padding-y: $kendo-colorgradient-spacer !default;
 /// Horizontal padding of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-padding-x: calc( $kendo-colorgradient-spacer / 2 ) !default;
+$kendo-colorgradient-padding-x: math.div( $kendo-colorgradient-spacer, 2 ) !default;
 /// Spacing of the color gradient.
 /// @group cologradient
 $kendo-colorgradient-spacing: $kendo-colorgradient-spacer !default;
@@ -61,7 +62,7 @@ $kendo-colorgradient-canvas-border-radius: var( --kendo-border-radius-md, 0 ) !d
 $kendo-colorgradient-canvas-border-width: 1px !default;
 /// Spacing of the color gradient canvas.
 /// @group cologradient
-$kendo-colorgradient-canvas-spacing: calc( $kendo-colorgradient-spacer / 2 ) !default;
+$kendo-colorgradient-canvas-spacing: math.div( $kendo-colorgradient-spacer, 2 ) !default;
 /// Height the color gradient canvas hsv rectangle.
 /// @group cologradient
 $kendo-colorgradient-canvas-rectangle-height: 180px !default;
@@ -74,13 +75,16 @@ $kendo-colorgradient-canvas-draghandle-shadow: 0px 0.6px 1.8px rgba(0, 0, 0, 0.1
 
 /// Default input width of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-width: 47px !default;
+$kendo-colorgradient-input-width: 48px !default;
 /// Input spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-spacing: calc( $kendo-colorgradient-spacer / 4 ) !default;
+$kendo-colorgradient-input-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
+/// Input label font size of the color gradient.
+/// @group cologradient
+$kendo-colorgradient-input-label-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// Input label spacing of the color gradient.
 /// @group cologradient
-$kendo-colorgradient-input-label-spacing: calc( $kendo-colorgradient-spacer / 4 ) !default;
+$kendo-colorgradient-input-label-spacing: math.div( $kendo-colorgradient-spacer, 4 ) !default;
 /// Input label text color of the color gradient.
 /// @group cologradient
 $kendo-colorgradient-input-label-text: var( --kendo-subtle-text, inherit ) !default;
@@ -90,7 +94,7 @@ $kendo-colorgradient-input-label-text: var( --kendo-subtle-text, inherit ) !defa
 $kendo-colorgradient-contrast-ratio-font-weight: var( --kendo-font-weight-bold, normal ) !default;
 /// Spacing of the color gradient contrast tool.
 /// @group cologradient
-$kendo-colorgradient-contrast-spacing: calc( $kendo-colorgradient-spacer / 1.5 ) !default;
+$kendo-colorgradient-contrast-spacing: math.div( $kendo-colorgradient-spacer, 1.5 ) !default;
 
 /// The size of the color gradient slider.
 /// @group cologradient
@@ -142,8 +146,7 @@ $kendo-colorgradient-draghandle-hover-shadow: $kendo-colorgradient-draghandle-fo
 
 /// Vertical offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-y: calc( ( $kendo-colorgradient-draghandle-height / 2 ) * -1 ) !default;
+$kendo-colorgradient-canvas-draghandle-offset-y: ( -1 * math.div( $kendo-colorgradient-draghandle-height, 2 ) ) !default;
 /// Horizontal offset of the color gradient canvas draghandle.
 /// @group cologradient
-$kendo-colorgradient-canvas-draghandle-offset-x: calc( ( $kendo-colorgradient-draghandle-width / 2 ) * -1 ) !default;
-
+$kendo-colorgradient-canvas-draghandle-offset-x: ( -1 * math.div( $kendo-colorgradient-draghandle-width, 2 ) ) !default;

package/scss/core/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "sass:meta";
 
 // Options
@@ -64,7 +65,7 @@ $kendo-font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helv
 
 
 /// Line height used along with $font-size.
-$kendo-line-height: calc( 20 / 14 ) !default;
+$kendo-line-height: math.div( 20, 14 ) !default;
 $kendo-line-height-xs: 1 !default;
 $kendo-line-height-sm: 1.25 !default;
 $kendo-line-height-md: $kendo-line-height !default;
@@ -83,17 +84,17 @@ $default-scrollbar-width: 17px !default;
 
 /// Border radius for all components.
 $kendo-border-radius: map-get( $kendo-spacing, thin ) !default;
-$kendo-border-radius-sm: calc( #{$kendo-border-radius} / 2 ) !default;
+$kendo-border-radius-sm: math.div( $kendo-border-radius, 2 ) !default;
 $kendo-border-radius-md: $kendo-border-radius !default;
-$kendo-border-radius-lg: calc( #{$kendo-border-radius} * 2 ) !default;
+$kendo-border-radius-lg: ( $kendo-border-radius * 2 ) !default;
 
 // Metrics
 $kendo-padding-x: map-get( $kendo-spacing, 2 ) !default;
 $kendo-padding-y: map-get( $kendo-spacing, 1 ) !default;
-$kendo-padding-x-sm: calc( #{$kendo-padding-x} / 2) !default;
-$kendo-padding-y-sm: calc( #{$kendo-padding-y} / 2) !default;
-$kendo-padding-x-lg: calc( #{$kendo-padding-x} * 1.5) !default;
-$kendo-padding-y-lg: calc( #{$kendo-padding-y} * 1.5) !default;
+$kendo-padding-x-sm: math.div( $kendo-padding-x, 2) !default;
+$kendo-padding-y-sm: math.div( $kendo-padding-y, 2) !default;
+$kendo-padding-x-lg: ( $kendo-padding-x * 1.5) !default;
+$kendo-padding-y-lg: ( $kendo-padding-y * 1.5) !default;
 
 // Default transition
 $kendo-transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out, opacity .2s ease-in-out, width .2s ease-in-out, height .2s ease-in-out !default;

package/scss/core/color-system/utils/_functions.scss

@@ -10,7 +10,7 @@
     @return map-get( get-theme-palette( $palette ), $hue );
 }
 
-@function get-theme-color-var($name, $fallback: "inherit", $prefix: "kendo") {
+@function get-theme-color-var( $name, $fallback: "inherit", $prefix: "kendo") {
     @return var( --#{$prefix}-#{$name}, #{$fallback} );
 }
 

package/scss/core/helpers/_index.scss

@@ -9,3 +9,4 @@
 @use "resizing";
 @use "selection";
 @use "spacer";
+@use "scrollbar";

package/scss/core/helpers/_scrollbar.scss

@@ -0,0 +1,25 @@
+// virtual scrollbar
+.k-scrollbar {
+    position: absolute;
+    overflow: scroll;
+}
+
+.k-scrollbar-vertical {
+    top: 0;
+    right: 0;
+    width: 17px; // scrollbar width
+    height: 100%;
+    overflow-x: hidden;
+}
+
+.k-touch-scrollbar {
+    display: none;
+    position: absolute;
+    z-index: 200000;
+    height: 8px;
+    width: 8px;
+    border: 1px solid #8a8a8a;
+    background-color: #858585;
+}
+
+

package/scss/core/mixins/_decoration.scss

@@ -25,3 +25,7 @@
         }
     }
 }
+
+@mixin repeating-striped-gradient( $color: rgba(255,255,255,.15), $background: #FFF, $angle: 45deg, $largeStep: 2px, $smallStep: 1px) {
+    background-image: repeating-linear-gradient($angle, $background, $background $smallStep, $color $smallStep, $color $largeStep);
+}

package/scss/dataviz/_layout.scss

@@ -154,11 +154,11 @@
     }
 
     .k-left-handle {
-        inset-inline-start: calc( var( kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
+        inset-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
     }
 
     .k-right-handle {
-        inset-inline-end: calc( var( kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
+        inset-inline-end: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / -2 );
     }
 
     .k-left-handle div {
@@ -177,12 +177,12 @@
 
     .k-left-handle.k-handle-active div {
         margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-start: calc( calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
+        padding-inline-start: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
     }
 
     .k-right-handle.k-handle-active div {
         margin-inline-start: calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 );
-        padding-inline-end: calc( calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + calc( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
+        padding-inline-end: calc( ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) * 2 ) + ( var( --kendo-selection-handle-size, #{$kendo-selection-handle-size} ) / 1.5 ) );
     }
 
     .k-mask {
@@ -462,7 +462,7 @@
             @if $type == "color" {
                 // background-color can store any color
                 background-color: $value;
-            } @else if $type == "string" and string.slice( $value, 1, 4) == "var(" {
+            } @else if $type == "string" and string.slice( $value, 1, 4 ) == "var(" {
                 background-color: $value;
             } @else if $type == "number" {
                 // margin-top can store positive & negative values

package/scss/draggable/_variables.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core/color-system" as *;
 @use "../core/_variables.scss" as *;
 
@@ -53,7 +54,7 @@ $kendo-drag-clue-shadow: var( --kendo-box-shadow-depth-2, none ) !default;
 $kendo-drop-hint-arrow-size: 6px !default;
 /// Arrow spacing of the drop hint.
 /// @group draggable
-$kendo-drop-hint-arrow-spacing: calc( $kendo-drop-hint-arrow-size / 2 ) !default;
+$kendo-drop-hint-arrow-spacing: math.div( $kendo-drop-hint-arrow-size, 2 ) !default;
 /// Width of the horizontal drop hint line.
 /// @group draggable
 $kendo-drop-hint-line-h-width: 20px !default;

package/scss/drawer/_variables.scss

@@ -125,8 +125,7 @@ $kendo-drawer-item-selected-text: $black !default;
 $kendo-drawer-item-selected-icon-text: get-theme-color-var( primary-120 ) !default;
 /// Background color of the selected and hovered drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-bg: var(--kendo-selected-hover-bg, inherit ) !default;
+$kendo-drawer-item-selected-hover-bg: var( --kendo-selected-hover-bg, inherit ) !default;
 /// Text color of the selected and hovered drawer item.
 /// @group drawer
-$kendo-drawer-item-selected-hover-text: var(--kendo-selected-hover-text, inherit ) !default;
-
+$kendo-drawer-item-selected-hover-text: var( --kendo-selected-hover-text, inherit ) !default;

package/scss/editor/_layout.scss

@@ -1,3 +1,4 @@
+@use "sass:math";
 @use "../core/" as *;
 @use "_variables.scss" as *;
 @use "../toolbar/_variables.scss" as *;
@@ -267,8 +268,8 @@
     // Insert table
     .k-ct-popup {
         box-sizing: border-box;
-        width: calc( #{$ct-cell-size} * 10 - (#{$ct-cell-size} / 2) );
-        padding: calc( #{$ct-cell-size} / 4 );
+        width: ( $ct-cell-size * 10 - math.div($ct-cell-size, 2) );
+        padding: math.div( $ct-cell-size, 4 );
 
         .k-button {
             width: 100%;