@progress/kendo-theme-default 5.12.1-dev.0 → 5.12.1-dev.1

package/scss/bottom-navigation/_variables.scss

@@ -1,5 +1,5 @@
 // Bottom-navigation
-$bottom-nav-padding-x: map-get( $spacing, 1 ) !default;
+$bottom-nav-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $bottom-nav-padding-y: $bottom-nav-padding-x !default;
 $bottom-nav-gap: $bottom-nav-padding-x !default;
 $bottom-nav-border-width: 1px 0px 0px 0px !default;
@@ -9,23 +9,21 @@ $bottom-nav-font-size: $font-size !default;
 $bottom-nav-line-height: normal !default;
 $bottom-nav-letter-spacing: .2px !default;
 
-$bottom-nav-item-padding-x: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 $bottom-nav-item-padding-y: 0 !default;
 $bottom-nav-item-min-width: 72px !default;
 $bottom-nav-item-max-width: null !default;
-$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{$padding-x * 2} - #{$bottom-nav-padding-x * 2} ) !default;
+$bottom-nav-item-min-height: calc( #{$icon-size * 2.5} + #{$kendo-padding-md-x * 2} - #{$bottom-nav-padding-x * 2} ) !default;
 $bottom-nav-item-border-radius: $kendo-border-radius-md !default;
-$bottom-nav-item-gap: 0 map-get( $spacing, 1 ) !default;
+$bottom-nav-item-gap: 0 k-map-get( $kendo-spacing, 1 ) !default;
 
-$bottom-nav-item-icon-margin-y: map-get( $spacing, 2 ) !default;
+$bottom-nav-item-icon-margin-y: k-map-get( $kendo-spacing, 2 ) !default;
 $bottom-nav-item-icon-margin-x: $bottom-nav-item-icon-margin-y !default;
-$bottom-nav-item-icon-size: map-get( $spacing, 6 ) !default;
+$bottom-nav-item-icon-size: k-map-get( $kendo-spacing, 6 ) !default;
 $bottom-nav-item-disabled-opacity: .5 !default;
 
 $bottom-nav-shadow: 0px 0px 5px rgba(0, 0, 0, .12) !default;
 
-$bottom-nav-flat-bg: $component-bg !default;
-$bottom-nav-flat-text: $component-text !default;
-$bottom-nav-flat-border: $component-border !default;
-
-
+$bottom-nav-flat-bg: $kendo-component-bg !default;
+$bottom-nav-flat-text: $kendo-component-text !default;
+$bottom-nav-flat-border: $kendo-component-border !default;

package/scss/breadcrumb/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/breadcrumb/_layout.scss

@@ -14,7 +14,7 @@
         display: flex;
         flex-direction: row;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -78,7 +78,7 @@
         align-items: center;
         align-self: stretch;
         overflow: hidden;
-        transition: $transition;
+        transition: $kendo-transition;
     }
 
     .k-breadcrumb-root-link {
@@ -100,7 +100,7 @@
     .k-breadcrumb-delimiter-icon {
         color: inherit;
         font-size: $breadcrumb-delimiter-icon-font-size;
-        opacity: $disabled-opacity;
+        opacity: $kendo-disabled-opacity;
     }
 
 

package/scss/breadcrumb/_theme.scss

@@ -10,7 +10,7 @@
 
         &:focus,
         &.k-focus {
-            @include box-shadow( $breadcrumb-focused-shadow );
+            @include box-shadow( $breadcrumb-focus-shadow );
         }
     }
 
@@ -27,9 +27,9 @@
         &:hover,
         &.k-hover {
             @include fill(
-                $breadcrumb-link-hovered-text,
-                $breadcrumb-link-hovered-bg,
-                $breadcrumb-link-hovered-border
+                $breadcrumb-link-hover-text,
+                $breadcrumb-link-hover-bg,
+                $breadcrumb-link-hover-border
             );
         }
 
@@ -37,11 +37,11 @@
         &:focus,
         &.k-focus {
             @include fill(
-                $breadcrumb-link-focused-text,
-                $breadcrumb-link-focused-bg,
-                $breadcrumb-link-focused-border
+                $breadcrumb-link-focus-text,
+                $breadcrumb-link-focus-bg,
+                $breadcrumb-link-focus-border
             );
-            @include box-shadow( $breadcrumb-link-focused-shadow );
+            @include box-shadow( $breadcrumb-link-focus-shadow );
         }
     }
 
@@ -58,9 +58,9 @@
         &:hover,
         &.k-hover {
             @include fill(
-                $breadcrumb-root-link-hovered-text,
-                $breadcrumb-root-link-hovered-bg,
-                $breadcrumb-root-link-hovered-border
+                $breadcrumb-root-link-hover-text,
+                $breadcrumb-root-link-hover-bg,
+                $breadcrumb-root-link-hover-border
             );
         }
 
@@ -68,11 +68,11 @@
         &:focus,
         &.k-focus {
             @include fill(
-                $breadcrumb-root-link-focused-text,
-                $breadcrumb-root-link-focused-bg,
-                $breadcrumb-root-link-focused-border
+                $breadcrumb-root-link-focus-text,
+                $breadcrumb-root-link-focus-bg,
+                $breadcrumb-root-link-focus-border
             );
-            @include box-shadow( $breadcrumb-root-link-focused-shadow );
+            @include box-shadow( $breadcrumb-root-link-focus-shadow );
         }
     }
 

package/scss/breadcrumb/_variables.scss

@@ -9,16 +9,14 @@ $breadcrumb-font-family: $font-family !default;
 $breadcrumb-font-size: $font-size !default;
 $breadcrumb-line-height: $line-height !default;
 
-$breadcrumb-bg: $component-bg !default;
-$breadcrumb-text: $component-text !default;
-$breadcrumb-border: $component-border !default;
+$breadcrumb-bg: $kendo-component-bg !default;
+$breadcrumb-text: $kendo-component-text !default;
+$breadcrumb-border: $kendo-component-border !default;
 
 $breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
-$breadcrumb-delimiter-icon-padding-x: $padding-x-lg / 2 !default;
-$breadcrumb-delimiter-icon-padding-y: 0px !default;
 
-$breadcrumb-link-padding-x: $padding-x !default;
-$breadcrumb-link-padding-y: $padding-y-lg !default;
+$breadcrumb-link-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$breadcrumb-link-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 $breadcrumb-link-border-radius: $kendo-border-radius-md !default;
 
 $breadcrumb-icon-link-padding-x: $breadcrumb-link-padding-x !default;
@@ -33,26 +31,26 @@ $breadcrumb-link-bg: null !default;
 $breadcrumb-link-text: $link-text !default;
 $breadcrumb-link-border: null !default;
 
-$breadcrumb-link-hovered-bg: $base-bg !default;
-$breadcrumb-link-hovered-text: $link-hover-text !default;
-$breadcrumb-link-hovered-border: null !default;
+$breadcrumb-link-hover-bg: $base-bg !default;
+$breadcrumb-link-hover-text: $link-hover-text !default;
+$breadcrumb-link-hover-border: null !default;
 
-$breadcrumb-link-focused-bg: null !default;
-$breadcrumb-link-focused-text: $link-text !default;
-$breadcrumb-link-focused-border: null !default;
-$breadcrumb-link-focused-shadow: $focused-shadow !default;
+$breadcrumb-link-focus-bg: null !default;
+$breadcrumb-link-focus-text: $link-text !default;
+$breadcrumb-link-focus-border: null !default;
+$breadcrumb-link-focus-shadow: $kendo-focus-shadow !default;
 
 $breadcrumb-root-link-bg: null !default;
 $breadcrumb-root-link-text: null !default;
 $breadcrumb-root-link-border: null !default;
 
-$breadcrumb-root-link-hovered-bg: $base-bg !default;
-$breadcrumb-root-link-hovered-text: null !default;
-$breadcrumb-root-link-hovered-border: null !default;
+$breadcrumb-root-link-hover-bg: $base-bg !default;
+$breadcrumb-root-link-hover-text: null !default;
+$breadcrumb-root-link-hover-border: null !default;
 
-$breadcrumb-root-link-focused-bg: null !default;
-$breadcrumb-root-link-focused-text: null !default;
-$breadcrumb-root-link-focused-border: null !default;
-$breadcrumb-root-link-focused-shadow: $breadcrumb-link-focused-shadow !default;
+$breadcrumb-root-link-focus-bg: null !default;
+$breadcrumb-root-link-focus-text: null !default;
+$breadcrumb-root-link-focus-border: null !default;
+$breadcrumb-root-link-focus-shadow: $breadcrumb-link-focus-shadow !default;
 
-$breadcrumb-focused-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;
+$breadcrumb-focus-shadow: 0 0 2px 1px rgba(0, 0, 0, .06) !default;

package/scss/button/_index.scss

@@ -8,6 +8,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/button/_layout.scss

@@ -32,7 +32,7 @@
 
         &:disabled,
         &.k-disabled {
-            @include disabled( $disabled-styling );
+            @include disabled( $kendo-disabled-styling );
         }
 
         &::-moz-focus-inner {
@@ -71,10 +71,10 @@
 
     // Sizes
     @each $size, $size-props in $kendo-button-sizes {
-        $_padding-x: map-get( $size-props, padding-x );
-        $_padding-y: map-get( $size-props, padding-y );
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
+        $_padding-x: k-map-get( $size-props, padding-x );
+        $_padding-y: k-map-get( $size-props, padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
 
         .k-button-#{$size} {
             padding: $_padding-y $_padding-x;
@@ -112,7 +112,7 @@
         vertical-align: middle;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         > .k-button + .k-button {
             margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
@@ -216,15 +216,6 @@
         box-shadow: none !important; // sass-lint:disable-line no-important
     }
 
-
-
-    // IE
-    .k-ie .k-button-group {
-        .k-button {
-            @include border-radius( 0 );
-        }
-    }
-
 }
 
 

package/scss/button/_theme.scss

@@ -64,21 +64,21 @@
         }
     }
 
-    $_shade-fn: get-function( $kendo-solid-button-shade-function );
+    $_shade-fn: k-meta-get-function( $kendo-solid-button-shade-function );
 
     @each $name, $color in $kendo-button-theme-colors {
         @if ($name != "base") {
-            $_button-text: contrast-wcag( $color );
-            $_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
-            $_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
+            $_button-text: k-contrast-legacy( $color );
+            $_button-bg: if( $kendo-solid-button-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
+            $_button-border: if( $kendo-solid-button-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
 
             $_button-hover-text: null;
-            $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
-            $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
+            $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
+            $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
 
             $_button-active-text: null;
-            $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
-            $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
+            $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
+            $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, k-meta-call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
 
             .k-button-solid-#{$name} {
                 @include fill(
@@ -142,7 +142,7 @@
 
 
     // Outline button
-    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
         .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
@@ -153,7 +153,7 @@
             &:hover,
             &.k-hover {
                 @include fill(
-                    contrast-wcag( $color ),
+                    k-contrast-legacy( $color ),
                     $color,
                     $color
                 );
@@ -171,7 +171,7 @@
             &:active,
             &.k-active {
                 @include fill(
-                    contrast-wcag( $color ),
+                    k-contrast-legacy( $color ),
                     $color,
                     $color
                 );
@@ -180,7 +180,7 @@
             // Selected
             &.k-selected {
                 @include fill(
-                    contrast-wcag( $color ),
+                    k-contrast-legacy( $color ),
                     $color,
                     $color
                 );
@@ -196,7 +196,7 @@
 
 
     // Flat button
-    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
         .k-button-flat-#{$name} {
             color: $color;
 
@@ -210,14 +210,14 @@
 
 
     // Link button
-    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
         .k-button-link-#{$name} {
             color: $color;
 
             // Hover
             &:hover,
             &.k-hover {
-                color: try-shade( $color, 2 );
+                color: k-try-shade( $color, 2 );
             }
 
             // Focus
@@ -231,12 +231,12 @@
             // Active
             &:active,
             &.k-active {
-                color: try-shade( $color, 2 );
+                color: k-try-shade( $color, 2 );
             }
 
             // Selected
             &.k-selected {
-                color: try-shade( $color, 2 );
+                color: k-try-shade( $color, 2 );
             }
 
             // Disabled state
@@ -249,7 +249,7 @@
 
 
     // Clear button
-    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+    @each $name, $color in k-map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
         .k-button-clear-#{$name} {
             color: $color;
 

package/scss/button/_variables.scss

@@ -10,10 +10,10 @@ $kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 /// Vertical padding of the button.
 /// @group button
-$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
 /// Font family of the button.
 /// @group button
 $kendo-button-font-family: $font-family !default;
@@ -24,28 +24,34 @@ $kendo-button-font-size: $font-size-md !default;
 /// @group button
 $kendo-button-line-height: $line-height-md !default;
 
-$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
 $kendo-button-font-size-sm: $font-size-md !default;
 $kendo-button-line-height-sm: $line-height-md !default;
 
-$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
-$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-button-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-button-font-size-md: $font-size-md !default;
 $kendo-button-line-height-md: $line-height-md !default;
 
-$kendo-button-padding-x-lg: map-get( $spacing, 3 ) !default;
-$kendo-button-padding-y-lg: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-button-padding-y-lg: k-map-get( $kendo-spacing, 2 ) !default;
 $kendo-button-font-size-lg: $font-size-lg !default;
 $kendo-button-line-height-lg: $line-height-lg !default;
 
 /// 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-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} + #{$kendo-button-border-width * 2} ) !default;
+$kendo-button-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
 $kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size-sm: calc( #{$kendo-button-line-height-sm * 1em} + #{$kendo-button-padding-y-sm * 2} ) !default;
+$kendo-button-inner-calc-size-md: calc( #{$kendo-button-line-height-md * 1em} + #{$kendo-button-padding-y-md * 2} ) !default;
+$kendo-button-inner-calc-size-lg: calc( #{$kendo-button-line-height-lg * 1em} + #{$kendo-button-padding-y-lg * 2} ) !default;
 
 $kendo-button-sizes: (
     sm: (
@@ -70,7 +76,7 @@ $kendo-button-sizes: (
 
 /// Theme colors map for the button.
 /// @group button
-$kendo-button-theme-colors: map-merge(
+$kendo-button-theme-colors: k-map-merge(
     $kendo-theme-colors,
     ( "base": #f5f5f5 )
 ) !default;
@@ -93,7 +99,7 @@ $kendo-button-shadow: null !default;
 
 /// The base background of hovered button.
 /// @group button
-$kendo-button-hover-bg: try-shade( $kendo-button-bg, .5 ) !default;
+$kendo-button-hover-bg: k-try-shade( $kendo-button-bg, .5 ) !default;
 /// The base text color of hovered button.
 /// @group button
 $kendo-button-hover-text: null !default;
@@ -109,7 +115,7 @@ $kendo-button-hover-shadow: null !default;
 
 /// The base background color of active button.
 /// @group button
-$kendo-button-active-bg: try-shade( $kendo-button-bg, 1.5 ) !default;
+$kendo-button-active-bg: k-try-shade( $kendo-button-bg, 1.5 ) !default;
 /// The base text color of active button.
 /// @group button
 $kendo-button-active-text: null !default;
@@ -125,10 +131,10 @@ $kendo-button-active-shadow: null !default;
 
 /// The base background color of selected button.
 /// @group button
-$kendo-button-selected-bg: $primary !default;
+$kendo-button-selected-bg: $kendo-color-primary !default;
 /// The text color of selected buttons.
 /// @group button
-$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
+$kendo-button-selected-text: k-contrast-legacy( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
 $kendo-button-selected-border: $kendo-button-selected-bg !default;
@@ -173,7 +179,7 @@ $kendo-button-disabled-shadow: null !default;
 
 // Solid button
 $kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-$kendo-solid-button-shade-function: "try-shade" !default;
+$kendo-solid-button-shade-function: "k-try-shade" !default;
 $kendo-solid-button-shade-text-amount: 0 !default;
 $kendo-solid-button-shade-bg-amount: 0 !default;
 $kendo-solid-button-shade-border-amount: 0 !default;

package/scss/calendar/_index.scss

@@ -9,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/calendar/_layout.scss

@@ -17,7 +17,7 @@
         flex-flow: column nowrap;
         user-select: none;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
 
         // Nested calendar
@@ -133,13 +133,6 @@
         .k-calendar-title {
             font-weight: bold;
         }
-        .k-today,
-        .k-nav-today,
-        .k-calendar-nav-today {
-            text-decoration: none;
-            cursor: pointer;
-            outline: none;
-        }
 
         .k-calendar-nav {
             display: flex;
@@ -274,11 +267,11 @@
 
     // Calendar sizes
     @each $size, $size-props in $kendo-calendar-sizes {
-        $_font-size: map-get( $size-props, font-size );
-        $_line-height: map-get( $size-props, line-height );
-        $_cell-size: map-get( $size-props, cell-size );
-        $_cell-padding-x: map-get( $size-props, cell-padding-x );
-        $_cell-padding-y: map-get( $size-props, cell-padding-y );
+        $_font-size: k-map-get( $size-props, font-size );
+        $_line-height: k-map-get( $size-props, line-height );
+        $_cell-size: k-map-get( $size-props, cell-size );
+        $_cell-padding-x: k-map-get( $size-props, cell-padding-x );
+        $_cell-padding-y: k-map-get( $size-props, cell-padding-y );
 
         $_month-cell-size: $_cell-size;
         $_year-cell-size: ( 2 * $_cell-size );
@@ -355,7 +348,7 @@
                 z-index: 1;
                 width: 150%;
                 left: -25%;
-                box-shadow: 0 0 $calendar-cell-size ($calendar-cell-size / 2) $calendar-bg;
+                box-shadow: 0 0 $calendar-cell-size k-math-div( $calendar-cell-size, 2 ) $calendar-bg;
             }
         }
 
@@ -394,7 +387,7 @@
             width: 200%;
             left: -50%;
             $shadow-size: 3 * $calendar-navigation-item-height;
-            box-shadow: 0 0 $shadow-size ($shadow-size / 2) $calendar-navigation-bg;
+            box-shadow: 0 0 $shadow-size k-math-div( $shadow-size, 2 ) $calendar-navigation-bg;
         }
 
         &::before { top: 0; }

package/scss/calendar/_theme.scss

@@ -24,20 +24,6 @@
         }
 
 
-        // Today navigation
-        .k-nav-today,
-        .k-calendar-nav-today {
-            color: $calendar-today-nav-text;
-
-            &:hover,
-            &.k-hover,
-            &:focus,
-            &.k-focus {
-                color: $calendar-today-nav-hover-text;
-            }
-        }
-
-
         // Header cells
         .k-calendar-th,
         .k-calendar-caption,
@@ -54,7 +40,7 @@
                     box-shadow: inset 0 0 0 1px $calendar-today-color;
                 }
                 &.k-focus .k-calendar-cell-inner {
-                    box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focused-shadow;
+                    box-shadow: inset 0 0 0 1px $calendar-today-color, $calendar-cell-focus-shadow;
                 }
             } @else if $calendar-today-style == color {
                 color: $calendar-today-color;
@@ -114,7 +100,7 @@
         }
         .k-calendar-td:focus .k-calendar-cell-inner,
         .k-calendar-td.k-focus .k-calendar-cell-inner {
-            box-shadow: $calendar-cell-focused-shadow;
+            box-shadow: $calendar-cell-focus-shadow;
         }
         .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
         .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
@@ -132,7 +118,7 @@
 
             li:hover,
             li.k-hover {
-                color: $calendar-today-nav-hover-text;
+                color: $calendar-navigation-hover-text;
             }
         }
         .k-calendar-navigation-highlight {
@@ -156,7 +142,7 @@
         &.k-invalid:hover,
         &.ng-invalid.ng-touched,
         &.ng-invalid.ng-dirty {
-            border-color: $invalid-border;
+            border-color: $kendo-invalid-border;
         }
     }