@progress/kendo-theme-fluent 12.0.0-dev.1 → 12.0.0-dev.3

package/scss/button/_variables.scss

@@ -8,43 +8,43 @@ $kendo-button-border-width: var( --kendo-button-border-width, 1px ) !default;
 
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(5) ) !default;
+$kendo-button-sm-padding-x: var( --kendo-button-sm-padding-x, k-spacing(2) ) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-x: var( --kendo-button-md-padding-x, k-spacing(5) ) !default;
+$kendo-button-md-padding-x: var( --kendo-button-md-padding-x, k-spacing(3) ) !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(5) ) !default;
+$kendo-button-lg-padding-x: var( --kendo-button-lg-padding-x, k-spacing(4) ) !default;
 
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: var( --kendo-button-sm-padding-y, k-spacing(1) ) !default;
+$kendo-button-sm-padding-y: calc(var( --kendo-button-sm-padding-y, #{k-spacing(0.5)} ) + 1px) !default;
 /// The vertical padding of the medium Button.
 /// @group button
-$kendo-button-md-padding-y: var( --kendo-button-md-padding-y, k-spacing(1.5) ) !default;
+$kendo-button-md-padding-y: calc(var( --kendo-button-md-padding-y, #{k-spacing(1)} ) + 1px) !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: var( --kendo-button-lg-padding-y, k-spacing(2) ) !default;
+$kendo-button-lg-padding-y: calc(var( --kendo-button-lg-padding-y, #{k-spacing(2)} ) + 1px) !default;
 
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-sm-font-size: var( --kendo-font-size-sm, inherit ) !default;
 /// The font size of the medium Button.
 /// @group button
 $kendo-button-md-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the large Button.
 /// @group button
-$kendo-button-lg-font-size: var( --kendo-font-size, inherit ) !default;
+$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size variable of the small Button.
 /// @group button
-$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-sm-line-height: var( --kendo-line-height-lg, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the medium Button.
 /// @group button
 $kendo-button-md-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size variable of the large Button.
 /// @group button
-$kendo-button-lg-line-height: var( --kendo-line-height, normal ) !default;
+$kendo-button-lg-line-height: var( --kendo-line-height-sm, normal ) !default;
 
 /// The font family of the Button.
 /// @group button
@@ -52,7 +52,7 @@ $kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font weight of the Button.
 /// @group button
-$kendo-button-font-weight: var( --kendo-font-weight-bold, normal ) !default;
+$kendo-button-font-weight: var( --kendo-font-weight-semibold, normal ) !default;
 
 /// The calculated height of the Button.
 /// @group button
@@ -91,16 +91,9 @@ $kendo-button-sizes: (
     )
 ) !default;
 
-/// The content spacing of the Button.
-/// @group button
-$kendo-button-spacing: var( --kendo-button-spacing, k-spacing(2) ) !default;
-
-/// The offset of the focused Button.
-/// @group button
-$kendo-button-focus-offset: var( --kendo-button-focus-offset, k-spacing(0.5) ) !default;
 /// The Outline width of the focused Button.
 /// @group button
-$kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 1px ) !default;
+$kendo-button-focus-outline-width: var( --kendo-button-focus-outline-width, 2px ) !default;
 /// The outline style of the focused Button.
 /// @group button
 $kendo-button-focus-outline-style: var( --kendo-button-focus-outline-style, solid ) !default;
@@ -108,16 +101,10 @@ $kendo-button-focus-outline-style: var( --kendo-button-focus-outline-style, soli
 /// The offset of the flat focused Button.
 /// @group button
 $kendo-button-flat-focus-offset: var( --kendo-button-flat-focus-offset, 1px ) !default;
-/// The outline width of the flat focused Button.
-/// @group button
-$kendo-button-flat-focus-outline-width: var( --kendo-button-flat-focus-outline-width, k-spacing(0.5) ) !default;
 
 /// The offset of the link focused Button.
 /// @group button
 $kendo-button-link-focus-offset: var( --kendo-button-link-focus-offset, 0 ) !default;
-/// The outline width of the flat focused Button.
-/// @group button
-$kendo-button-link-focus-outline-width: var( --kendo-button-link-focus-outline-width, 1px ) !default;
 
 /// The opacity of the pulsing animation for the generating Button.
 /// @group button
@@ -147,7 +134,7 @@ $kendo-button-bg: var( --kendo-button-bg, k-color(base) ) !default;
 $kendo-button-text: var( --kendo-button-text, k-color(on-base) ) !default;
 /// The base border color of the Button.
 /// @group button
-$kendo-button-border: var( --kendo-button-border, k-color(border) ) !default;
+$kendo-button-border: var( --kendo-button-border, color-mix(in srgb, k-color(border) 26%, transparent) ) !default;
 /// The base background gradient of the Button.
 /// @group button
 $kendo-button-gradient: linear-gradient( var( --kendo-button-gradient, transparent, transparent ) ) !default;
@@ -163,32 +150,14 @@ $kendo-button-hover-bg: var( --kendo-button-hover-bg, k-color(base-hover) ) !def
 $kendo-button-hover-text: var( --kendo-button-hover-text, k-color(on-base) ) !default;
 /// The base border color of the hovered Button.
 /// @group button
-$kendo-button-hover-border: var( --kendo-button-hover-border, k-color(border) ) !default;
+$kendo-button-hover-border: var( --kendo-button-hover-border, color-mix( in srgb, k-color(border) 34%, transparent ) ) !default;
 
-/// The base background of the focused Button.
-/// @group button
-$kendo-button-focus-bg: var( --kendo-button-focus-bg, k-color(base) ) !default;
-/// The base text color of the focused Button.
-/// @group button
-$kendo-button-focus-text: var( --kendo-button-focus-text, k-color(on-base) ) !default;
 /// The base border color of the focused Button.
 /// @group button
-$kendo-button-focus-border: var( --kendo-button-focus-border, k-color(border) ) !default;
+$kendo-button-focus-border: var( --kendo-button-focus-border, k-color(border-alt) ) !default;
 /// The base outline color of the focused Button.
 /// @group button
 $kendo-button-focus-outline: var( --kendo-button-focus-outline, k-color(on-base) ) !default;
-/// The base background of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-bg: var( --kendo-button-focus-hover-bg, k-color(base-hover) ) !default;
-/// The base text color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-text: var( --kendo-button-focus-hover-text, k-color(on-base) ) !default;
-/// The base border color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-border: var( --kendo-button-focus-hover-border, k-color(border) ) !default;
-/// The base outline color of the focused Button when hovered.
-/// @group button
-$kendo-button-focus-hover-outline: var( --kendo-button-focus-hover-outline, k-color(on-base) ) !default;
 
 /// The base background of the active Button.
 /// @group button
@@ -198,43 +167,34 @@ $kendo-button-active-bg: var( --kendo-button-active-bg, k-color(base-active) ) !
 $kendo-button-active-text: var( --kendo-button-active-text, k-color(on-base) ) !default;
 /// The base border color of the active Button.
 /// @group button
-$kendo-button-active-border: var( --kendo-button-active-border, k-color(border) ) !default;
-/// The base background of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-bg: var( --kendo-button-active-hover-bg, k-color(base-hover) ) !default;
-/// The base text color of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-text: var( --kendo-button-active-hover-text, k-color(on-base) ) !default;
-/// The base border color of the active Button when hovered.
-/// @group button
-$kendo-button-active-hover-border: var( --kendo-button-active-hover-border, k-color(border) ) !default;
+$kendo-button-active-border: var( --kendo-button-active-border, $kendo-button-border ) !default;
 
 /// The base background of the disabled Button.
 /// @group button
-$kendo-button-disabled-bg: var( --kendo-button-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 6%, transparent) ) !default;
+$kendo-button-disabled-bg: var( --kendo-button-disabled-bg, color-mix(in srgb, k-color(on-app-surface) 7%, transparent) ) !default;
 /// The base text color of the disabled Button.
 /// @group button
-$kendo-button-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled Button.
 /// @group button
-$kendo-button-disabled-border: var( --kendo-button-disabled-border, transparent ) !default;
+$kendo-button-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The base background of the disabled outline Button.
 /// @group button
 $kendo-button-outline-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
 /// The base text color of the disabled outline Button.
 /// @group button
-$kendo-button-outline-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-outline-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled outline Button.
 /// @group button
-$kendo-button-outline-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-outline-disabled-border: var( --kendo-button-disabled-border, color-mix(in srgb, k-color(on-app-surface) 14%, transparent) ) !default;
 
 /// The base background of the disabled flat Button.
 /// @group button
 $kendo-button-flat-disabled-bg: var( --kendo-button-disabled-bg, initial ) !default;
 /// The base text color of the disabled flat Button.
 /// @group button
-$kendo-button-flat-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-button-flat-disabled-text: var( --kendo-button-disabled-text, color-mix(in srgb, k-color(on-app-surface) 30%, transparent) ) !default;
 /// The base border color of the disabled flat Button.
 /// @group button
 $kendo-button-flat-disabled-border: var( --kendo-button-disabled-border, initial ) !default;

package/scss/calendar/_layout.scss

@@ -22,8 +22,18 @@
         text-align: center;
     }
 
+    .k-calendar-th {
+        box-sizing: border-box;
+    }
+
     .k-calendar-td {
         font-size: inherit;
+        padding: $kendo-calendar-cell-padding;
+        box-sizing: border-box;
+
+        &.k-selected {
+            border-width: 1px;
+        }
     }
 
     .k-calendar-header {
@@ -67,11 +77,6 @@
         }
     }
 
-    .k-calendar .k-content.k-scrollable,
-    .k-calendar .k-calendar-content.k-scrollable {
-        @include hide-scrollbar-dir-agnostic();
-    }
-
     .k-calendar-infinite {
         .k-calendar-header {
             margin-inline-start: calc( -1 * #{$kendo-infinite-calendar-view-padding-x} );
@@ -92,63 +97,11 @@
                 flex-direction: column;
             }
         }
-    }
-
-    .k-range-start,
-    .k-range-end,
-    .k-range-mid {
-        position: relative;
 
-        &::before {
-            content: "";
-            position: absolute;
-            inset: 0px;
-            border-style: solid;
+        .k-range-start,
+        .k-range-end {
+            border-radius: $kendo-calendar-range-cell-border-radius;
         }
-
-        &:hover .k-link,
-        &.k-hover .k-link {
-            border-radius: 0;
-        }
-    }
-
-    .k-range-mid::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-inline-width: 0;
-        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( --kendo-calendar-range-border-width, 1px );
-        border-inline-end-width: 0;
-        border-radius: 0;
-
-        @if ( $kendo-enable-rounded ) {
-            border-start-start-radius: $kendo-calendar-cell-border-radius;
-            border-end-start-radius: $kendo-calendar-cell-border-radius;
-        }
-    }
-
-    .k-range-end::before,
-    .k-range-mid:last-child::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-inline-start-width: 0;
-        border-radius: 0;
-
-        @if ( $kendo-enable-rounded ) {
-            border-start-end-radius: $kendo-calendar-cell-border-radius;
-            border-end-end-radius: $kendo-calendar-cell-border-radius;
-        }
-    }
-
-    .k-range-start.k-range-end::before {
-        border-width: var( --kendo-calendar-range-border-width, 1px );
-        border-radius: $kendo-calendar-cell-border-radius;
     }
 
     .k-calendar-navigation::before,

package/scss/calendar/_theme.scss

@@ -19,57 +19,83 @@
         .k-calendar-td {
 
             &.k-today .k-link {
-                color: $kendo-calendar-today-text;
-                background-color: $kendo-calendar-today-bg;
+                @include fill(
+                    $kendo-calendar-today-text,
+                    $kendo-calendar-today-bg
+                );
                 box-shadow: none;
             }
 
-            &.k-today:hover .k-link,
-            &.k-today.k-hover .k-link {
-                color: $kendo-calendar-today-hover-text;
-                background-color: $kendo-calendar-today-hover-bg;
+            &:hover,
+            &.k-hover {
+                @include fill(
+                    $kendo-calendar-cell-hover-text,
+                    $kendo-calendar-cell-hover-bg
+                );
             }
 
-            &.k-weekend .k-link {
-                color: $kendo-calendar-weekend-text;
-                background-color: $kendo-calendar-weekend-bg;
+            &:focus,
+            &.k-focus {
+                box-shadow: $kendo-calendar-cell-focus-shadow;
             }
 
-            &.k-other-month .k-link {
-                color: $kendo-calendar-other-month-text;
-                background-color: $kendo-calendar-other-month-bg;
+
+            &.k-selected {
+                @include fill(
+                    $kendo-calendar-cell-selected-text,
+                    $kendo-calendar-cell-selected-bg,
+                    $kendo-calendar-cell-selected-border
+                );
+                box-shadow: $kendo-calendar-cell-selected-shadow;
             }
 
-            &:hover .k-link,
-            &.k-hover .k-link {
-                color: $kendo-calendar-cell-hover-text;
-                background-color: $kendo-calendar-cell-hover-bg;
+            &.k-selected:focus,
+            &.k-selected.k-focus {
+                box-shadow: $kendo-calendar-cell-selected-focus-shadow;
             }
 
-            &:focus .k-link,
-            &.k-focus .k-link {
-                box-shadow: $kendo-calendar-cell-focus-shadow;
+            &.k-selected:hover,
+            &.k-selected.k-hover {
+                @include fill(
+                    $kendo-calendar-cell-selected-hover-text,
+                    $kendo-calendar-cell-selected-hover-bg
+                );
             }
 
-            &.k-selected .k-link{
-                color: $kendo-calendar-cell-selected-text;
-                background-color: $kendo-calendar-cell-selected-bg;
-                box-shadow: $kendo-calendar-cell-selected-shadow;
+            &.k-today:hover .k-link,
+            &.k-today.k-hover .k-link {
+                @include fill(
+                    $kendo-calendar-today-hover-text,
+                    $kendo-calendar-today-hover-bg
+                );
             }
 
-            &.k-selected:hover .k-link,
-            &.k-selected.k-hover .k-link {
-                color: $kendo-calendar-cell-selected-hover-text;
-                background-color: $kendo-calendar-cell-selected-hover-bg;
+            &.k-weekend .k-link {
+                @include fill(
+                    $kendo-calendar-weekend-text,
+                    $kendo-calendar-weekend-bg
+                );
+            }
+
+            &.k-other-month .k-link {
+                @include fill(
+                    $kendo-calendar-other-month-text,
+                    $kendo-calendar-other-month-bg
+                );
             }
 
+            &:focus .k-link,
+            &.k-focus .k-link,
             &.k-selected:focus .k-link,
             &.k-selected.k-focus .k-link {
-                box-shadow: $kendo-calendar-cell-selected-focus-shadow;
+                box-shadow: none;
             }
 
             &.k-disabled {
-                color: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
+                @include fill(
+                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
+                    $kendo-calendar-bg
+                );
             }
         }
 
@@ -81,39 +107,15 @@
         }
     }
 
-    .k-calendar[dir="rtl"],
-    .k-rtl .k-calendar {
-        .k-calendar-td {
-
-            &.k-range-start:hover .k-link,
-            &.k-range-start.k-hover .k-link {
-                box-shadow: $kendo-calendar-end-range-hover-shadow;
-
-            }
-
-            &.k-range-mid:last-child:hover .k-link,
-            &.k-range-mid:last-child.k-hover .k-link,
-            &.k-range-end:hover .k-link,
-            &.k-range-end.k-hover .k-link {
-                box-shadow: $kendo-calendar-start-range-hover-shadow;
-            }
-
-            &.k-range-mid:first-child:hover .k-link,
-            &.k-range-mid:first-child.k-hover .k-link,
-            &.k-alt + .k-range-mid:hover .k-link,
-            &.k-alt + .k-range-mid.k-hover .k-link {
-                box-shadow: $kendo-calendar-end-range-hover-shadow;
-            }
-        }
-    }
-
     .k-calendar .k-calendar-td  {
 
         &.k-range-start,
         &.k-range-end,
         &.k-range-mid {
-            background-color: $kendo-calendar-range-bg;
-            color: $kendo-calendar-range-text;
+            @include fill(
+                $kendo-calendar-range-text,
+                $kendo-calendar-range-bg
+            );
 
             .k-link {
                 background-color: transparent;
@@ -124,12 +126,11 @@
                 }
             }
 
-            &::before {
-                border-color: $kendo-calendar-range-border;
-            }
-
             &.k-disabled {
-                color: color-mix(in srgb, #{k-color(on-app-surface)} 46%, transparent);
+                @include fill(
+                    color-mix(in srgb, k-color(on-app-surface) 30%, transparent),
+                    $kendo-calendar-bg
+                );
             }
 
             &:hover .k-link,
@@ -137,35 +138,6 @@
                 background-color: $kendo-calendar-cell-selected-hover-bg;
             }
         }
-
-        &.k-range-start:hover .k-link,
-        &.k-range-start.k-hover .k-link {
-            box-shadow: $kendo-calendar-start-range-hover-shadow;
-
-        }
-
-        &.k-range-mid:hover .k-link,
-        &.k-range-mid.k-hover .k-link {
-            box-shadow: $kendo-calendar-mid-range-hover-shadow;
-        }
-
-        &.k-range-mid:last-child:hover .k-link,
-        &.k-range-mid:last-child.k-hover .k-link,
-        &.k-range-end:hover .k-link,
-        &.k-range-end.k-hover .k-link {
-            box-shadow: $kendo-calendar-end-range-hover-shadow;
-        }
-
-        &.k-range-mid:first-child:hover .k-link,
-        &.k-range-mid:first-child.k-hover .k-link,
-        &.k-alt + .k-range-mid:hover .k-link,
-        &.k-alt + .k-range-mid.k-hover .k-link {
-            box-shadow: $kendo-calendar-start-range-hover-shadow;
-        }
-
-        &.k-range-start.k-range-end:hover .k-link {
-            box-shadow: $kendo-calendar-start-end-range-hover-shadow;
-        }
     }
 
 }

package/scss/calendar/_variables.scss

@@ -19,7 +19,10 @@ $kendo-calendar-border-radius: var( --kendo-calendar-border-radius, 0 ) !default
 
 /// The size of the calendar cell.
 /// @group calendar
-$kendo-calendar-cell-size: var( --kendo-calendar-cell-size, 28px ) !default;
+$kendo-calendar-cell-size: var( --kendo-calendar-cell-size, 32px ) !default;
+/// The spacing of the calendar cell.
+/// @group calendar
+$kendo-calendar-cell-padding: var( --kendo-calendar-cell-padding, k-spacing(0.5) ) !default;
 
 /// The background color of the Calendar.
 /// @group calendar
@@ -75,10 +78,10 @@ $kendo-calendar-cell-border-radius: var( --kendo-calendar-cell-border-radius, va
 
 /// The horizontal padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-x: var( --kendo-calendar-header-cell-padding-x, k-spacing(0) ) !default;
+$kendo-calendar-header-cell-padding-x: var( --kendo-calendar-header-cell-padding-x, k-spacing(0.5) ) !default;
 /// Th vertical padding of the calendar header cell.
 /// @group calendar
-$kendo-calendar-header-cell-padding-y: var( --kendo-calendar-header-cell-padding-y, k-spacing(0) ) !default;
+$kendo-calendar-header-cell-padding-y: var( --kendo-calendar-header-cell-padding-y, k-spacing(0.5) ) !default;
 /// The width of the calendar header cell.
 /// @group calendar
 $kendo-calendar-header-cell-width: var( --kendo-calendar-header-cell-width, #{$kendo-calendar-cell-size} ) !default;
@@ -140,22 +143,22 @@ $kendo-calendar-weekend-text: var( --kendo-calendar-weekend-text, inherit ) !def
 
 /// The text color of the calendar today cell.
 /// @group calendar
-$kendo-calendar-today-text: var( --kendo-calendar-today-text, k-color(app-surface) ) !default; // use contrast function
+$kendo-calendar-today-text: var( --kendo-calendar-today-text, k-color(on-primary) ) !default; // use contrast function
 /// The background color of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-bg: var( --kendo-calendar-today-bg, k-color(primary) ) !default;
 /// The text color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-text: var( --kendo-calendar-today-hover-text, k-color(app-surface) ) !default;  // use contrast function
+$kendo-calendar-today-hover-text: var( --kendo-calendar-today-hover-text, k-color(on-primary) ) !default;  // use contrast function
 /// The background color of the calendar today cell when hovered.
 /// @group calendar
-$kendo-calendar-today-hover-bg: var( --kendo-calendar-today-hover-bg, k-color(primary-hover) ) !default;
+$kendo-calendar-today-hover-bg: var( --kendo-calendar-today-hover-bg, $kendo-calendar-today-bg ) !default;
 /// The border radius of the calendar today cell.
 /// @group calendar
 $kendo-calendar-today-border-radius: var( --kendo-calendar-today-border-radius, 9999px ) !default;
 /// The font weight of the current day in the Calendar.
 /// @group calendar
-$kendo-calendar-today-font-weight: var( --kendo-calendar-today-font-weight, var( --kendo-calendar-font-weight-bold, var( --kendo-font-weight-bold, normal ) ) ) !default;
+$kendo-calendar-today-font-weight: var( --kendo-calendar-today-font-weight, var( --kendo-calendar-font-weight-normal, var( --kendo-font-weight-normal, normal ) ) ) !default;
 /// The box shadow of the current day in the Calendar.
 /// @group calendar
 $kendo-calendar-today-box-shadow: var( --kendo-calendar-today-box-shadow, null ) !default;
@@ -172,38 +175,38 @@ $kendo-calendar-week-number-text: var( --kendo-calendar-week-number-text, k-colo
 $kendo-calendar-other-month-bg: var( --kendo-calendar-other-month-bg, inherit ) !default;
 /// The text color of the other months calendar cells.
 /// @group calendar
-$kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, color-mix(in srgb, k-color(on-app-surface) 46%, transparent) ) !default;
+$kendo-calendar-other-month-text: var( --kendo-calendar-other-month-text, k-color(subtle)) !default;
 
 /// The background color of the calendar cells when hovered.
 /// @group calendar
-$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(base-hover) ) !default;
+$kendo-calendar-cell-hover-bg: var( --kendo-calendar-cell-hover-bg, k-color(primary-subtle) ) !default;
 /// The text color of the calendar cells when hovered.
 /// @group calendar
 $kendo-calendar-cell-hover-text: var( --kendo-calendar-cell-hover-text, k-color(on-base) ) !default;
 
 /// The background color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-bg: var( --kendo-calendar-cell-selected-bg, k-color(base-active) ) !default;
+$kendo-calendar-cell-selected-bg: var( --kendo-calendar-cell-selected-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the selected calendar cell.
 /// @group calendar
 $kendo-calendar-cell-selected-text: var( --kendo-calendar-cell-selected-text, k-color(on-base) ) !default;
 /// The border color of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-border: var( --kendo-calendar-cell-selected-border, color-mix(in srgb, k-color(border-alt) 76%, transparent) ) !default;
+$kendo-calendar-cell-selected-border: var( --kendo-calendar-cell-selected-border, k-color(primary-on-surface) ) !default;
 /// The shadow of the selected calendar cell.
 /// @group calendar
-$kendo-calendar-cell-selected-shadow: var( --kendo-calendar-cell-selected-shadow, inset 0 0 0 1px #{$kendo-calendar-cell-selected-border} ) !default;
+$kendo-calendar-cell-selected-shadow: var( --kendo-calendar-cell-selected-shadow, null ) !default;
 
 /// The background color of the selected calendar cell when hovered.
 /// @group calendar
-$kendo-calendar-cell-selected-hover-bg: var( --kendo-calendar-cell-selected-hover-bg, k-color(base-subtle-active) ) !default;
+$kendo-calendar-cell-selected-hover-bg: var( --kendo-calendar-cell-selected-hover-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the selected calendar cell when hovered.
 /// @group calendar
 $kendo-calendar-cell-selected-hover-text: var( --kendo-calendar-cell-selected-hover-text, k-color(on-base) ) !default;
 
 /// The shadow of the selected calendar cell when focused.
 /// @group calendar
-$kendo-calendar-cell-focus-shadow: var( --kendo-calendar-cell-focus-shadow, inset 0 0 0 1px k-color(base-emphasis) ) !default;
+$kendo-calendar-cell-focus-shadow: var( --kendo-calendar-cell-focus-shadow, inset 0 0 0 2px k-color(primary) ) !default;
 /// The shadow of the selected calendar cell when selected and focused.
 /// @group calendar
 $kendo-calendar-cell-selected-focus-shadow: var( --kendo-calendar-cell-selected-focus-shadow, #{$kendo-calendar-cell-focus-shadow} ) !default;
@@ -260,26 +263,13 @@ $kendo-infinite-calendar-view-height: var( --kendo-infinite-calendar-view-height
 // Range calendar
 /// The background color of the range selection in the Calendar.
 /// @group calendar
-$kendo-calendar-range-bg: var( --kendo-calendar-range-bg, k-color(base-active) ) !default;
+$kendo-calendar-range-bg: var( --kendo-calendar-range-bg, k-color(primary-subtle-hover) ) !default;
 /// The text color of the range selection in the Calendar.
 /// @group calendar
 $kendo-calendar-range-text: var( --kendo-calendar-range-text, inherit ) !default;
-/// The border color of the range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-range-border: var( --kendo-calendar-range-border, k-color(base-emphasis) ) !default;
-/// The shadow of the hovered start range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-start-range-hover-shadow: var( --kendo-calendar-start-range-hover-shadow, inset 1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered mid range selection in the Calendar.
+/// The border radius of the range cells in the Calendar.
 /// @group calendar
-$kendo-calendar-mid-range-hover-shadow: var( --kendo-calendar-mid-range-hover-shadow, inset 0 -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered end range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-end-range-hover-shadow: var( --kendo-calendar-end-range-hover-shadow, inset -1px -1px 0 0 k-color(base-emphasis), inset 0 1px 0 0 k-color(base-emphasis) ) !default;
-/// The shadow of the hovered start-end range selection in the Calendar.
-/// @group calendar
-$kendo-calendar-start-end-range-hover-shadow: var( --kendo-calendar-start-end-range-hover-shadow, inset 1px -1px 0 0 k-color(base-emphasis), inset -1px 1px 0 0 k-color(base-emphasis) ) !default;
-
+$kendo-calendar-range-cell-border-radius: k-border-radius(md) !default;
 
 // Calendar sizes
 
@@ -310,7 +300,7 @@ $kendo-calendar-md-font-size: var( --kendo-calendar-md-font-size, var( --kendo-c
 $kendo-calendar-md-line-height: var( --kendo-calendar-md-line-height, var( --kendo-calendar-line-height, var( --kendo-line-height, normal ) ) ) !default;
 /// The size of the cells in the medium Calendar.
 /// @group calendar
-$kendo-calendar-md-cell-size: var( --kendo-calendar-md-cell-size, 28px ) !default;
+$kendo-calendar-md-cell-size: var( --kendo-calendar-md-cell-size, $kendo-calendar-cell-size ) !default;
 /// The horizontal padding of the cells in the medium Calendar.
 /// @group calendar
 $kendo-calendar-md-cell-padding-x: var( --kendo-calendar-md-cell-padding-x, k-spacing(1) ) !default;
@@ -329,7 +319,7 @@ $kendo-calendar-lg-font-size: var( --kendo-calendar-lg-font-size, var( --kendo-c
 $kendo-calendar-lg-line-height: var( --kendo-calendar-lg-line-height, var( --kendo-calendar-line-height, var( --kendo-line-height, normal ) ) ) !default;
 /// The size of the cells in the large Calendar.
 /// @group calendar
-$kendo-calendar-lg-cell-size: var( --kendo-calendar-lg-cell-size, 32px ) !default;
+$kendo-calendar-lg-cell-size: var( --kendo-calendar-lg-cell-size, 36px ) !default;
 /// The horizontal padding of the cells in the large Calendar.
 /// @group calendar
 $kendo-calendar-lg-cell-padding-x: var( --kendo-calendar-lg-cell-padding-x, k-spacing(1) ) !default;
@@ -431,6 +421,7 @@ $kendo-calendar-sizes: (
     $kendo-calendar-navigation-hover-text: $kendo-calendar-navigation-hover-text,
     $kendo-calendar-navigation-marker-text: $kendo-calendar-navigation-marker-text,
     $kendo-calendar-range-bg: $kendo-calendar-range-bg,
+    $kendo-calendar-range-cell-border-radius: $kendo-calendar-range-cell-border-radius,
     $kendo-infinite-calendar-header-padding-x: $kendo-infinite-calendar-header-padding-x,
     $kendo-infinite-calendar-header-padding-y: $kendo-infinite-calendar-header-padding-y,
     $kendo-infinite-calendar-view-padding-x: $kendo-infinite-calendar-view-padding-x,