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

package/scss/avatar/_variables.scss

@@ -6,20 +6,20 @@ $kendo-avatar-border-width: 1px !default;
 
 /// The font family of the Avatar.
 /// @group avatar
-$kendo-avatar-font-family: $kendo-font-family !default;
+$kendo-avatar-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the Avatar.
 /// @group avatar
-$kendo-avatar-font-size: $kendo-font-size-md !default;
+$kendo-avatar-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the Avatar.
 /// @group avatar
-$kendo-avatar-line-height: $kendo-line-height-md !default;
+$kendo-avatar-line-height: var( --kendo-line-height, normal ) !default;
 
 /// The sizes map of the Avatar.
 /// @group avatar
 $kendo-avatar-sizes: (
-    sm: k-map-get( $kendo-spacing, 4 ),
-    md: k-map-get( $kendo-spacing, 8 ),
-    lg: k-map-get( $kendo-spacing, 16 )
+    sm: k-spacing(4),
+    md: k-spacing(8),
+    lg: k-spacing(16)
 ) !default;
 
 /// The theme colors map of the Avatar.

package/scss/badge/_theme.scss

@@ -12,7 +12,7 @@
     // Outline badges
     .k-badge-outline {
         border-color: currentColor;
-        background-color: $kendo-component-bg;
+        background-color: transparent;
     }
 
     @each $name, $color in $kendo-theme-colors {

package/scss/badge/_variables.scss

@@ -6,47 +6,47 @@ $kendo-badge-border-width: 1px !default;
 
 /// The border radius of the Badge.
 /// @group badge
-$kendo-badge-border-radius: $kendo-border-radius-md !default;
+$kendo-badge-border-radius: k-border-radius(md) !default;
 
 
 /// The horizontal padding of the Badge.
 /// @group badge
-$kendo-badge-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-x: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-x: k-spacing(0.5) !default;
 /// The horizontal padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-x: k-spacing(1) !default;
 /// The horizontal padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-x: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-x: k-spacing(1.5) !default;
 
 /// The vertical padding of the Badge.
 /// @group badge
-$kendo-badge-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Badge.
 /// @group badge
-$kendo-badge-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-badge-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Badge.
 /// @group badge
-$kendo-badge-md-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-badge-md-padding-y: k-spacing(1) !default;
 /// The vertical padding of the large Badge.
 /// @group badge
-$kendo-badge-lg-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-badge-lg-padding-y: k-spacing(1.5) !default;
 
 /// The font sizes of the Badge.
 /// @group badge
-$kendo-badge-font-size: $kendo-font-size-xs !default;
+$kendo-badge-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The font size of the small Badge.
 /// @group badge
-$kendo-badge-sm-font-size: $kendo-font-size-xs !default;
+$kendo-badge-sm-font-size: var( --kendo-font-size-xs, inherit ) !default;
 /// The font size of the medium Badge.
 /// @group badge
-$kendo-badge-md-font-size: $kendo-font-size-xs !default;
+$kendo-badge-md-font-size: var( --kendo-font-size-xs, inherit )!default;
 /// The font size of the large Badge.
 /// @group badge
-$kendo-badge-lg-font-size: $kendo-font-size-xs !default;
+$kendo-badge-lg-font-size: var( --kendo-font-size-xs, inherit ) !default;
 
 /// The line heights used along with the $kendo-font-size variable.
 /// @group badge
@@ -63,16 +63,16 @@ $kendo-badge-lg-line-height: $kendo-badge-line-height !default;
 
 /// The calculated minimum width of the circular Badge.
 /// @group badge
-$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + #{$kendo-badge-padding-y * 2} + #{$kendo-badge-border-width * 2}) !default;
+$kendo-badge-min-width: calc( #{$kendo-badge-line-height * 1em} + calc( #{$kendo-badge-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 )) !default;
 /// The calculated minimum width of the small circular Badge.
 /// @group badge
-$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + #{$kendo-badge-sm-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-sm-min-width: calc( #{$kendo-badge-sm-line-height * 1em} + calc( #{$kendo-badge-sm-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 /// The calculated minimum width of the medium circular Badge.
 /// @group badge
-$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + #{$kendo-badge-md-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-md-min-width: calc( #{$kendo-badge-md-line-height * 1em} + calc( #{$kendo-badge-md-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 /// The calculated minimum width of the large circular Badge.
 /// @group badge
-$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + #{$kendo-badge-lg-padding-y * 2} + #{$kendo-badge-border-width * 2} ) !default;
+$kendo-badge-lg-min-width: calc( #{$kendo-badge-lg-line-height * 1em} + calc( #{$kendo-badge-lg-padding-y} * 2 ) + calc( #{$kendo-badge-border-width} * 2 ) ) !default;
 
 /// The sizes map for the Badge.
 /// @group badge

package/scss/bottom-navigation/_layout.scss

@@ -71,8 +71,8 @@
         }
 
         > .k-bottom-nav-link {
-            margin-block: (-$kendo-bottom-nav-item-padding-y);
-            margin-inline: (-$kendo-bottom-nav-item-padding-x);
+            margin-block: calc( #{$kendo-bottom-nav-item-padding-y} * -1 );
+            margin-inline: calc( #{$kendo-bottom-nav-item-padding-x} * -1 );
             padding-block: $kendo-bottom-nav-item-padding-y;
             padding-inline: $kendo-bottom-nav-item-padding-x;
             width: 100%;

package/scss/bottom-navigation/_variables.scss

@@ -2,7 +2,7 @@
 
 /// The horizontal padding of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-padding-x: k-spacing(1) !default;
 /// The vertical padding of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-padding-y: $kendo-bottom-nav-padding-x !default;
@@ -14,23 +14,23 @@ $kendo-bottom-nav-gap: $kendo-bottom-nav-padding-x !default;
 $kendo-bottom-nav-border-width: 1px 0px 0px 0px !default;
 /// The font family of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-family: $kendo-font-family !default;
+$kendo-bottom-nav-font-family: var( --kendo-font-family, inherit ) !default;
 /// The font size of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-font-size: $kendo-font-size-md !default;
+$kendo-bottom-nav-font-size: var( --kendo-font-size, inherit ) !default;
 /// The line height of the BottomNavigation.
 /// @group bottom-navigation
-$kendo-bottom-nav-line-height: normal !default;
+$kendo-bottom-nav-line-height: var( --kendo-line-height-sm, normal ) !default;
 /// The letter spacing of the BottomNavigation.
 /// @group bottom-navigation
 $kendo-bottom-nav-letter-spacing: .2px !default;
 
 /// The horizontal padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-bottom-nav-item-padding-x: k-spacing(2) !default;
 /// The vertical padding of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-padding-y: 0 !default;
+$kendo-bottom-nav-item-padding-y: k-spacing(0) !default;
 /// The minimum width of the BottomNavigation item.
 /// @group bottom-navigation
 $kendo-bottom-nav-item-min-width: 72px !default;
@@ -39,13 +39,13 @@ $kendo-bottom-nav-item-min-width: 72px !default;
 $kendo-bottom-nav-item-max-width: null !default;
 /// The minimum height of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$kendo-bottom-nav-padding-x * 2} ) !default;
+$kendo-bottom-nav-item-min-height: calc( #{$kendo-icon-size * 2.5} + calc( #{$kendo-padding-md-x} * 2 ) - calc( #{$kendo-bottom-nav-padding-x} * 2 ) ) !default;
 /// The border radius of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-border-radius: $kendo-border-radius-md !default;
+$kendo-bottom-nav-item-border-radius: k-border-radius(md) !default;
 /// The spacing of the BottomNavigation item.
 /// @group bottom-navigation
-$kendo-bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-bottom-nav-item-gap: 0 k-spacing(1) !default;
 
 /// The box shadow of the BottomNavigation.
 /// @group bottom-navigation

package/scss/breadcrumb/_variables.scss

@@ -19,33 +19,33 @@ $kendo-breadcrumb-padding-y: null !default;
 
 /// The font family of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-family: $kendo-font-family !default;
+$kendo-breadcrumb-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-font-size: $kendo-font-size-md !default;
+$kendo-breadcrumb-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-font-size: $kendo-breadcrumb-font-size !default;
 /// The font size of the large Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-font-size: $kendo-font-size-lg !default;
+$kendo-breadcrumb-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line-height of the Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-line-height: var( --kendo-line-height, normal ) !default;
 /// The line-height of the small Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-line-height: $kendo-line-height-md !default;
+$kendo-breadcrumb-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line-height of the medium Breadcrumb.
 /// @group breadcrumb
 $kendo-breadcrumb-md-line-height: $kendo-breadcrumb-line-height !default;
 /// The line-height of the height Breadcrumb.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-line-height: $kendo-line-height-lg !default;
+$kendo-breadcrumb-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The base background of the Breadcrumb.
 /// @group breadcrumb
@@ -63,46 +63,46 @@ $kendo-breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
 
 /// The horizontal padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-sm-link-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-x: $kendo-breadcrumb-link-padding-x !default;
 /// The horizontal padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-lg-link-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the small Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-link-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-breadcrumb-sm-link-padding-y: k-spacing(1) !default;
 /// The vertical padding of the medium Breadcrumb link.
 /// @group breadcrumb
 $kendo-breadcrumb-md-link-padding-y: $kendo-breadcrumb-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-lg-link-padding-y: k-spacing(2) !default;
 
 /// The border-radius of the Breadcrumb link.
 /// @group breadcrumb
-$kendo-breadcrumb-link-border-radius: $kendo-border-radius-md !default;
+$kendo-breadcrumb-link-border-radius: k-border-radius(md) !default;
 
 /// The vertical padding of the Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-icon-link-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-breadcrumb-icon-link-padding-y: k-spacing(2) !default;
 /// The vertical padding of the small Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-sm-icon-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-breadcrumb-sm-icon-link-padding-y: k-spacing(1.5) !default;
 /// The vertical padding of the medium Breadcrumb link icon.
 /// @group breadcrumb
 $kendo-breadcrumb-md-icon-link-padding-y: $kendo-breadcrumb-icon-link-padding-y !default;
 /// The vertical padding of the large Breadcrumb link icon.
 /// @group breadcrumb
-$kendo-breadcrumb-lg-icon-link-padding-y: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-breadcrumb-lg-icon-link-padding-y: k-spacing(3) !default;
 
 /// The horizontal padding of the Breadcrumb link icon.
 /// @group breadcrumb

package/scss/button/_theme.scss

@@ -154,9 +154,9 @@
             &.k-hover {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -184,9 +184,9 @@
             &.k-active {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -201,9 +201,9 @@
             &.k-selected {
                 @if $name == "base" {
                     @include fill(
-                        if($kendo-enable-color-system, $kendo-base-bg, k-contrast-legacy( $color )),
-                        $color,
-                        $color
+                        if($kendo-enable-color-system, k-color( base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color )),
+                        if($kendo-enable-color-system, k-color( on-base ), k-contrast-legacy( $color ))
                     );
                 } @else {
                     @include fill(
@@ -226,7 +226,11 @@
     // Flat button
     @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
         .k-button-flat-#{$name} {
-            color: $color;
+            @if $name == "base" {
+                color: inherit;
+            } @else {
+                color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
+            }
 
             // Disabled state
             &:disabled,
@@ -295,7 +299,7 @@
     // Clear button
     @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $kendo-base-text ) ) {
         .k-button-clear-#{$name} {
-            color: $color;
+            color: if($kendo-enable-color-system, k-color( #{$name}-on-surface ), $color);
 
             &:focus,
             &.k-focus,

package/scss/button/_variables.scss

@@ -10,73 +10,73 @@ $kendo-button-border-radius: null !default;
 
 /// The horizontal padding of the Button.
 /// @group button
-$kendo-button-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-sm-padding-x: k-spacing(2) !default;
 /// The horizontal padding of the medium Button.
 /// @group button
 $kendo-button-md-padding-x: $kendo-button-padding-x !default;
 /// The horizontal padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-lg-padding-x: k-spacing(2) !default;
 
 /// The vertical padding of the Button.
 /// @group button
-$kendo-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-button-padding-y: k-spacing(1) !default;
 /// The vertical padding of the small Button.
 /// @group button
-$kendo-button-sm-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default;
+$kendo-button-sm-padding-y: k-spacing(0.5) !default;
 /// The vertical padding of the medium Button.
 /// @group button
 $kendo-button-md-padding-y: $kendo-button-padding-y !default;
 /// The vertical padding of the large Button.
 /// @group button
-$kendo-button-lg-padding-y: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-lg-padding-y: k-spacing(2) !default;
 
 /// The font family of the Button.
 /// @group button
-$kendo-button-font-family: $kendo-font-family !default;
+$kendo-button-font-family: var( --kendo-font-family, inherit ) !default;
 
 /// The font size of the Button.
 /// @group button
-$kendo-button-font-size: $kendo-font-size-md !default;
+$kendo-button-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the small Button.
 /// @group button
-$kendo-button-sm-font-size: $kendo-font-size-md !default;
+$kendo-button-sm-font-size: var( --kendo-font-size, inherit ) !default;
 /// The font size of the medium Button.
 /// @group button
 $kendo-button-md-font-size: $kendo-button-font-size !default;
 /// The font size of the large Button.
 /// @group button
-$kendo-button-lg-font-size: $kendo-font-size-lg !default;
+$kendo-button-lg-font-size: var( --kendo-font-size-lg, inherit ) !default;
 
 /// The line height used along with the $kendo-font-size the.
 /// @group button
-$kendo-button-line-height: $kendo-line-height-md !default;
+$kendo-button-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size the of the small Button.
 /// @group button
-$kendo-button-sm-line-height: $kendo-line-height-md !default;
+$kendo-button-sm-line-height: var( --kendo-line-height, normal ) !default;
 /// The line height used along with the $kendo-font-size the of the medium Button.
 /// @group button
 $kendo-button-md-line-height: $kendo-button-line-height !default;
 /// The line height used along with the $kendo-font-size the of the large Button.
 /// @group button
-$kendo-button-lg-line-height: $kendo-line-height-lg !default;
+$kendo-button-lg-line-height: var( --kendo-line-height-lg, normal ) !default;
 
 /// The calculated height of the Button.
 /// @group button
-$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-sm-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-md-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
-$kendo-button-lg-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-sm-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-md-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-lg-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) + #{$kendo-button-border-width * 2} ) !default;
 
 /// The calculated inner height of the Button excluding the border width.
 /// @group button
-$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
-$kendo-button-sm-inner-calc-size: calc( #{$kendo-button-sm-line-height * 1em} + #{$kendo-button-sm-padding-y * 2} ) !default;
-$kendo-button-md-inner-calc-size: calc( #{$kendo-button-md-line-height * 1em} + #{$kendo-button-md-padding-y * 2} ) !default;
-$kendo-button-lg-inner-calc-size: calc( #{$kendo-button-lg-line-height * 1em} + #{$kendo-button-lg-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( calc( #{$kendo-button-line-height} * 1em ) + calc( #{$kendo-button-padding-y} * 2 ) ) !default;
+$kendo-button-sm-inner-calc-size: calc( calc( #{$kendo-button-sm-line-height} * 1em ) + calc( #{$kendo-button-sm-padding-y} * 2 ) ) !default;
+$kendo-button-md-inner-calc-size: calc( calc( #{$kendo-button-md-line-height} * 1em ) + calc( #{$kendo-button-md-padding-y} * 2 ) ) !default;
+$kendo-button-lg-inner-calc-size: calc( calc( #{$kendo-button-lg-line-height} * 1em ) + calc( #{$kendo-button-lg-padding-y} * 2 ) ) !default;
 
 /// The sizes map for the Button.
 /// @group button

package/scss/calendar/_layout.scss

@@ -358,8 +358,8 @@
         }
 
         .k-calendar-header {
-            margin-left: -$kendo-infinite-calendar-view-padding-x;
-            margin-right: -$kendo-infinite-calendar-view-padding-x;
+            margin-left: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
+            margin-right: calc( #{$kendo-infinite-calendar-view-padding-x} * -1 );
             padding-block: $kendo-infinite-calendar-header-padding-y;
             padding-inline: $kendo-infinite-calendar-header-padding-x;
             width: auto;
@@ -449,9 +449,6 @@
         // }
     }
 
-
-
-
     // Multiview calendar
     .k-calendar-range {
         width: auto;
@@ -468,25 +465,34 @@
                 outline: 0;
             }
         }
+    }
 
-        .k-range-start {
-            border-color: inherit;
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-        }
-        .k-range-end {
+    // Range Selection
+    .k-range-start {
+        border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
+            border-radius: inherit;
         }
-        .k-range-mid {
+    }
+    .k-range-end {
+        border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+
+        .k-calendar-cell-inner,
+        .k-link {
             border-color: inherit;
-            border-radius: 0;
+            border-radius: inherit;
         }
     }
-
-
-
+    .k-range-mid {
+        border-color: inherit;
+        border-radius: 0;
+    }
+    .k-range-start.k-range-end {
+        border-radius: $kendo-calendar-range-cell-border-radius;
+    }
 
     // RTL
     .k-rtl .k-calendar,
@@ -499,6 +505,14 @@
             @include hide-scrollbar("left");
         }
 
+        // Range Selection RTL
+        .k-range-start {
+            border-radius: 0 $kendo-calendar-range-cell-border-radius $kendo-calendar-range-cell-border-radius 0;
+        }
+        .k-range-end {
+            border-radius: $kendo-calendar-range-cell-border-radius 0 0 $kendo-calendar-range-cell-border-radius;
+        }
+
     }
 
 }

package/scss/calendar/_theme.scss

@@ -155,7 +155,7 @@
     // Multiview calendar
     .k-calendar { // stylelint-disable-line
 
-        $kendo-calendar-range-gap: 1px !default;
+        $kendo-calendar-range-gap: k-spacing(1px) !default;
         $kendo-calendar-range-bg: if($kendo-enable-color-system, color-mix(in srgb, k-color( primary ) 25%, transparent), rgba( $kendo-calendar-cell-selected-bg, .25 ));
         $kendo-calendar-range-split-size: 5px !default;
 
@@ -165,11 +165,6 @@
             background-color: $kendo-calendar-range-bg;
         }
 
-        .k-range-start.k-range-end {
-            background-image: none;
-            background-color: transparent;
-        }
-
         .k-range-start,
         .k-range-end {
             .k-calendar-cell-inner {