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

package/scss/button/_variables.scss

@@ -8,23 +8,23 @@ $kendo-button-border-width: 1px !default;
 
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-sm-padding-x: k-spacing(5) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-md-padding-x: k-spacing(5) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: map.get( $kendo-spacing, 5 ) !default;
+$kendo-button-lg-padding-x: k-spacing(5) !default;
 
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-button-sm-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-button-md-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: map.get( $kendo-spacing, 2 ) !default;
+$kendo-button-lg-padding-y: k-spacing(2) !default;
 
 /// The font size of the small Button.
 /// @group button
@@ -93,11 +93,11 @@ $kendo-button-sizes: (
 
 /// The content spacing of the Button.
 /// @group button
-$kendo-button-spacing: map.get( $kendo-spacing, 2 ) !default;
+$kendo-button-spacing: k-spacing(2) !default;
 
 /// The offset of the focused Button.
 /// @group button
-$kendo-button-focus-offset: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-button-focus-offset: k-spacing(0.5) !default;
 /// The Outline width of the focused Button.
 /// @group button
 $kendo-button-focus-outline-width: 1px !default;
@@ -110,7 +110,7 @@ $kendo-button-focus-outline-style: solid !default;
 $kendo-button-flat-focus-offset: 1px !default;
 /// The outline width of the flat focused Button.
 /// @group button
-$kendo-button-flat-focus-outline-width: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-button-flat-focus-outline-width: k-spacing(0.5) !default;
 
 /// The offset of the link focused Button.
 /// @group button
@@ -145,12 +145,12 @@ $_tc-base-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, on-color, currentColor), (transparent, 160, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
         hover: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
-        focus: if($kendo-enable-color-system, (transparent, on-color, currentColor, inherit), (transparent, 160, currentColor, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor, inherit), (transparent, 160, currentColor, inherit)),
         focus-hover: if($kendo-enable-color-system, (on-color, color, on-color, inherit), (190, $kendo-color-white, 190, inherit)),
         active: if($kendo-enable-color-system, (on-color, color, on-color), (190, $kendo-color-white, 190)),
-        active-hover: if($kendo-enable-color-system, (color-hover, on-color, border), (20, 190, 110)),
+        active-hover: if($kendo-enable-color-system, (on-color, color, on-color), (20, 190, 110)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent)), (initial, var( --kendo-disabled-text, inherit ), 90))
     ),
     link: (
@@ -163,12 +163,12 @@ $_tc-base-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 160, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, on-color, transparent, color-active), (30, 160, transparent, 130)),
-        focus-hover:  if($kendo-enable-color-system, (transparent, on-color, transparent, color-active), (transparent, 190, transparent, 130)),
-        active: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, on-color, transparent), (transparent, 190, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent, color-active), (30, 160, transparent, 130)),
+        focus-hover:  if($kendo-enable-color-system, (transparent, color-on-surface, transparent, color-active), (transparent, 190, transparent, 130)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 190, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -185,18 +185,18 @@ $_tc-brand-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 100, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 100, 100, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 100, 100, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-white, 100, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-white, 100)),
@@ -212,12 +212,12 @@ $_tc-brand-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 100, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -234,18 +234,18 @@ $_tc-warning-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 100, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 100, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 100, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 100, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 110, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 110, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 100, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 100, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 100, 100, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color-on-surface, inherit), (transparent, 100, 100, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (100, $kendo-color-black, 100, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (100, $kendo-color-black, 100)),
@@ -261,12 +261,12 @@ $_tc-warning-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 100, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 100, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 120, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 110, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 100, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 100, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 120, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 110, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -283,18 +283,18 @@ $_tc-dark-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 160, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 160, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 160, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 160, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 170, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 170, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 170, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 160, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 160, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 160, 160, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 160, 160, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (160, $kendo-color-white, 160, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (160, $kendo-color-white, 160)),
@@ -310,12 +310,12 @@ $_tc-dark-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 160, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 160, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 170, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 170, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 160, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 160, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 170, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;
@@ -332,18 +332,18 @@ $_tc-light-matrix: (
         disabled: if($kendo-enable-color-system, (color-mix(in srgb, k-color( on-app-surface ) 6%, transparent), color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), transparent), (var( --kendo-disabled-bg, inherit ), var( --kendo-disabled-text, inherit ), var( --kendo-disabled-border, inherit )))
     ),
     flat: (
-        normal: if($kendo-enable-color-system, (initial, color, transparent), (initial, 50, transparent)),
+        normal: if($kendo-enable-color-system, (initial, color-on-surface, transparent), (initial, 50, transparent)),
         hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
-        focus: if($kendo-enable-color-system, (initial, color, transparent, color-subtle-active), (initial, 50, transparent, 30)),
+        focus: if($kendo-enable-color-system, (initial, color-on-surface, transparent, color-subtle-active), (initial, 50, transparent, 30)),
         focus-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent, color-subtle-active), (10, 60, transparent, 30)),
         active: if($kendo-enable-color-system, (color-subtle-hover, color-hover, transparent), (20, 60, transparent)),
         active-hover: if($kendo-enable-color-system, (color-subtle, color-hover, transparent), (10, 60, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), initial))
     ),
     outline: (
-        normal: if($kendo-enable-color-system, (transparent, color, currentColor), (transparent, 50, currentColor)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, currentColor), (transparent, 50, currentColor)),
         hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
-        focus: if($kendo-enable-color-system, (transparent, color, color, inherit), (transparent, 50, 50, inherit)),
+        focus: if($kendo-enable-color-system, (transparent, color-on-surface, color, inherit), (transparent, 50, 50, inherit)),
         focus-hover: if($kendo-enable-color-system, (color, on-color, color, inherit), (50, $kendo-color-white, 50, inherit)),
         active: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
         active-hover: if($kendo-enable-color-system, (color, on-color, color), (50, $kendo-color-white, 50)),
@@ -359,12 +359,12 @@ $_tc-light-matrix: (
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     ),
     clear: (
-        normal: if($kendo-enable-color-system, (transparent, color, transparent), (transparent, 50, transparent)),
-        hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
-        focus: if($kendo-enable-color-system, (color-subtle, color, transparent), (20, 50, transparent)),
-        focus-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
-        active: if($kendo-enable-color-system, (transparent, color-active, transparent), (transparent, 60, transparent)),
-        active-hover: if($kendo-enable-color-system, (transparent, color-hover, transparent), (transparent, 60, transparent)),
+        normal: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 50, transparent)),
+        hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        focus: if($kendo-enable-color-system, (color-subtle, color-on-surface, transparent), (20, 50, transparent)),
+        focus-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        active: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
+        active-hover: if($kendo-enable-color-system, (transparent, color-on-surface, transparent), (transparent, 60, transparent)),
         disabled: if($kendo-enable-color-system, (initial, color-mix(in srgb, k-color( on-app-surface ) 46%, transparent), initial), (initial, var( --kendo-disabled-text, inherit ), transparent))
     )
 ) !default;

package/scss/calendar/_layout.scss

@@ -416,60 +416,64 @@
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start,
-        .k-range-end,
-        .k-range-mid {
-
-            position: relative;
+    .k-range-start,
+    .k-range-end,
+    .k-range-mid {
 
-            &::before {
-                content: "";
-                position: absolute;
-                inset: 0px;
-                border-style: solid;
-            }
+        position: relative;
 
-            &:hover .k-link,
-            &.k-hover .k-link {
-                border-radius: 0;
-            }
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0px;
+            border-style: solid;
         }
 
-        .k-range-mid::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-width: 0;
+        &:hover .k-link,
+        &.k-hover .k-link {
             border-radius: 0;
         }
+    }
 
-        .k-range-start::before,
-        .k-range-mid:not(
-            .k-range-start + .k-range-mid,
-            .k-range-mid + .k-range-mid,
-            :last-child
-        )::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-end-width: 0;
-            border-radius: 0;
+    .k-range-mid::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-width: 0;
+        border-radius: 0;
+    }
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+    .k-range-start::before,
+    .k-range-mid:not(
+        .k-range-start + .k-range-mid,
+        .k-range-mid + .k-range-mid,
+        :last-child
+    )::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-end-width: 0;
+        border-radius: 0;
+
+        @if ( $kendo-enable-rounded ) {
+            border-start-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-start-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
-        .k-range-end::before,
-        .k-range-mid:last-child::before {
-            border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
-            border-inline-start-width: 0;
-            border-radius: 0;
+    .k-range-end::before,
+    .k-range-mid:last-child::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-inline-start-width: 0;
+        border-radius: 0;
 
-            @if ( $kendo-enable-rounded ) {
-                border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-                border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
-            }
+        @if ( $kendo-enable-rounded ) {
+            border-start-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
+            border-end-end-radius: var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} );
         }
+    }
 
+    .k-range-start.k-range-end::before {
+        border-width: var( --INTERNAL--kendo-calendar-range-border-width, 1px );
+        border-radius:  var( --kendo-calendar-cell-border-radius, #{$kendo-calendar-cell-border-radius} ) ;
     }
 
 

package/scss/calendar/_theme.scss

@@ -235,6 +235,10 @@
         &.k-alt + .k-range-mid.k-hover .k-link {
             --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-range-hover-shadow, #{$kendo-calendar-start-range-hover-shadow} );
         }
+
+        &.k-range-start.k-range-end:hover .k-link {
+            --INTERNAL--kendo-calendar-cell-link-shadow: var( --kendo-calendar-start-end-range-hover-shadow, #{$kendo-calendar-start-end-range-hover-shadow} );
+        }
     }
 
 }

package/scss/calendar/_variables.scss

@@ -30,11 +30,11 @@ $kendo-calendar-border: var( --kendo-component-border, initial) !default;
 
 /// The horizontal padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-header-padding-x: k-spacing(1) !default;
 /// The vertical padding of the calendar header.
 /// @group calendar
-$kendo-calendar-header-padding-y: map.get( $kendo-spacing, 1 ) !default;
-/// The width of the bottom border of the calendar header.
+$kendo-calendar-header-padding-y: k-spacing(1) !default;
+/// Width of the bottom border of the calendar header.
 /// @group calendar
 $kendo-calendar-header-border-width: 1px !default;
 $kendo-calendar-header-min-width: ($kendo-calendar-cell-size * 8) !default;
@@ -51,21 +51,21 @@ $kendo-calendar-header-border: $kendo-calendar-border !default; // $kendo-compon
 
 /// The spacing between the navigation buttons of the Calendar.
 /// @group calendar
-$kendo-calendar-nav-gap: 0 !default;
+$kendo-calendar-nav-gap: k-spacing(0) !default;
 
 /// The horizontal padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-footer-padding-x: k-spacing(1) !default;
 /// The vertical padding of the calendar footer.
 /// @group calendar
-$kendo-calendar-footer-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-footer-padding-y: k-spacing(1) !default;
 
 /// The font size of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The horizontal padding of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-padding-x: map.get( $kendo-spacing, 1.5 ) !default;
+$kendo-calendar-cell-padding-x: k-spacing(1.5) !default;
 /// The vertical padding of the calendar cell.
 /// @group calendar
 $kendo-calendar-cell-padding-y: $kendo-calendar-cell-padding-x !default;
@@ -78,10 +78,10 @@ $kendo-calendar-cell-border-radius: var( --kendo-border-radius-md, 0) !default;
 
 /// The horizontal padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-x: 0 !default;
+$kendo-calendar-header-cell-padding-x: k-spacing(0) !default;
 /// Th vertical padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-y: 0 !default;
+$kendo-calendar-header-cell-padding-y: k-spacing(0) !default;
 /// The width of the calendar header cell.
 /// @group calendar
 $kendo-calendar-header-cell-width: $kendo-calendar-cell-size !default;
@@ -103,10 +103,10 @@ $kendo-calendar-header-cell-text: inherit !default;
 
 /// The horizontal padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-calendar-caption-padding-x: k-spacing(3) !default;
 /// The vertical padding of the calendar captions.
 /// @group calendar
-$kendo-calendar-caption-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-caption-padding-y: k-spacing(1) !default;
 /// The height of the calendar captions.
 /// @group calendar
 $kendo-calendar-caption-height: $kendo-calendar-cell-size !default;
@@ -132,10 +132,10 @@ $kendo-calendar-view-height: ($kendo-calendar-cell-size * 7) !default;
 
 /// The bottom padding of Calendar views.
 /// @group calendar
-$kendo-calendar-view-padding-block-end: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-view-padding-block-end: k-spacing(1) !default;
 /// The spacing between the views in the multiview Calendar.
 /// @group calendar
-$kendo-calendar-view-gap: map.get( $kendo-spacing, 4 ) !default;
+$kendo-calendar-view-gap: k-spacing(4) !default;
 
 /// The background color of the calendar weekend cell.
 /// @group calendar
@@ -243,17 +243,18 @@ $kendo-calendar-navigation-hover-text: $kendo-link-hover-text !default;
 // Infinite calendar
 /// The background color of the navigation in the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-x: map.get( $kendo-spacing, 3 ) !default;
+
+$kendo-infinite-calendar-header-padding-x: k-spacing(3) !default;
 /// The background color of the navigation in the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-header-padding-y: map.get( $kendo-spacing, 3 ) map.get( $kendo-spacing, 1 ) !default;
+$kendo-infinite-calendar-header-padding-y: k-spacing(3) k-spacing(1) !default;
 
 /// The horizontal padding of the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-x: map.get( $kendo-spacing, 3 ) !default;
+$kendo-infinite-calendar-view-padding-x: k-spacing(3) !default;
 /// The vertical padding of the infinite Calendar.
 /// @group calendar
-$kendo-infinite-calendar-view-padding-y: 0px !default;
+$kendo-infinite-calendar-view-padding-y: k-spacing(0) !default;
 
 /// The height of the infinite Calendar view.
 /// @group calendar
@@ -279,65 +280,69 @@ $kendo-calendar-mid-range-hover-shadow: inset 0 -1px 0 0 if($kendo-enable-color-
 /// The shadow of the hovered end range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-end-range-hover-shadow: inset -1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset 0 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
+/// The shadow of the hovered start-end range selection in the Calendar.
+/// @group calendar
+$kendo-calendar-start-end-range-hover-shadow: inset 1px -1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )), inset -1px 1px 0 0 if($kendo-enable-color-system, k-color( base-emphasis ), k-get-theme-color-var( neutral-130 )) !default;
 
 
 // Calendar sizes
+
 /// The font size of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The line height of the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-line-height: $kendo-line-height-sm !default;
-/// The size of the small calendar cell.
+$kendo-calendar-sm-line-height: var( --kendo-line-height-sm, normal ) !default;
+/// The size of the cells in the small Calendar.
 /// @group calendar
 $kendo-calendar-sm-cell-size: 24px !default;
 /// The horizontal padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-x: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-calendar-sm-cell-padding-x: k-spacing(0.5) !default;
 /// The vertical padding of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-padding-y: map.get( $kendo-spacing, 0.5 ) !default;
+$kendo-calendar-sm-cell-padding-y: k-spacing(0.5) !default;
 /// The font size of the cells in the small Calendar.
 /// @group calendar
-$kendo-calendar-sm-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-sm-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
 /// The font size of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-font-size: $kendo-font-size-md !default;
+$kendo-calendar-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-line-height: $kendo-line-height-md !default;
-/// The size of the medium calendar cell.
+$kendo-calendar-md-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-size: 28px !default;
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-x: k-spacing(1) !default;
 /// The vertical padding of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-md-cell-padding-y: k-spacing(1) !default;
 /// The font size of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-font-size: $kendo-font-size-sm !default;
+$kendo-calendar-md-cell-font-size: var( --kendo-font-size-sm, inherit ) !default;
 
 /// The font size of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-font-size: $kendo-font-size-md !default;
+$kendo-calendar-lg-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-line-height: $kendo-line-height-md !default;
-/// The size of the large calendar cell.
+$kendo-calendar-lg-line-height: var( --kendo-line-height, normal ) !default;
+/// The size of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-size: 32px !default;
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-x: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-x: k-spacing(1) !default;
 /// The vertical padding of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-padding-y: map.get( $kendo-spacing, 1 ) !default;
+$kendo-calendar-lg-cell-padding-y: k-spacing(1) !default;
 /// The font size of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-font-size: $kendo-font-size-md !default;
+$kendo-calendar-lg-cell-font-size: var( --kendo-font-size, inherit ) !default;
 
 /// The sizes Map of the Calendar.
 /// @group calendar

package/scss/captcha/_variables.scss

@@ -4,7 +4,7 @@
 
 /// The spacer of the Captcha.
 /// @group captcha
-$kendo-captcha-spacer: map.get( $kendo-spacing, 2 ) !default;
+$kendo-captcha-spacer: k-spacing(2) !default;
 
 /// The width of the Captcha.
 /// @group captcha
@@ -36,11 +36,11 @@ $kendo-captcha-border: var( --kendo-component-border, initial ) !default;
 $kendo-captcha-image-wrap-spacing: $kendo-captcha-spacer !default;
 /// The spacing of the Captcha image controls.
 /// @group captcha
-$kendo-captcha-image-controls-spacing: math.div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-image-controls-spacing: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 
 /// The offset of the Captcha validation message.
 /// @group captcha
-$kendo-captcha-validation-offset-y: math.div( $kendo-captcha-spacer, 2 ) !default;
+$kendo-captcha-validation-offset-y: calc( #{$kendo-captcha-spacer} / 2 ) !default;
 /// The font size of the Captcha validation message.
 /// @group captcha
 $kendo-captcha-validation-font-size: var( --kendo-font-size-sm, inherit ) !default;