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

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 focus-indicator( $breadcrumb-link-focus-shadow, true );
         }
     }
 
@@ -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 focus-indicator( $breadcrumb-root-link-focus-shadow, true );
         }
     }
 

package/scss/breadcrumb/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Breadcrumb
+
 $breadcrumb-margin-x: null !default;
 $breadcrumb-margin-y: null !default;
 $breadcrumb-padding-x: null !default;
@@ -9,23 +13,21 @@ $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-delimiter-icon-font-size: $kendo-icon-size * .75 !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;
 $breadcrumb-icon-link-padding-y: $breadcrumb-icon-link-padding-x !default;
 
 $breadcrumb-root-link-spacing: $breadcrumb-link-padding-x !default;
-$breadcrumb-link-icon-spacing: $icon-spacing !default;
+$breadcrumb-link-icon-spacing: $kendo-icon-spacing !default;
 
 $breadcrumb-link-initial-text: inherit !default;
 
@@ -33,26 +35,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

@@ -4,10 +4,9 @@
 // Dependencies
 @import "../badge/_index.scss";
 @import "../icons/_index.scss";
-@import "../typography/_variables.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/button/_layout.scss

@@ -15,7 +15,7 @@
         display: inline-flex;
         align-items: center;
         justify-content: center;
-        gap: $icon-spacing;
+        gap: $kendo-icon-spacing;
         vertical-align: middle;
         user-select: none;
         cursor: pointer;
@@ -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 );
@@ -181,7 +181,7 @@
 
         &:focus::after,
         &.k-focus::after {
-            opacity: .12;
+            opacity: $kendo-flat-button-focus-ring-opacity;
         }
     }
 
@@ -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

@@ -25,7 +25,7 @@
         // Focus state
         &:focus,
         &.k-focus {
-            @include box-shadow( $kendo-button-focus-shadow );
+            @include focus-indicator( $kendo-button-focus-shadow, true, true );
         }
 
         // Active state
@@ -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(
@@ -102,7 +102,7 @@
                 &:focus,
                 &.k-focus {
                     @if ( $kendo-solid-button-shadow ) {
-                        box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity );
+                        @include focus-indicator( 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity ), true, true );
                     }
                 }
 
@@ -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
                 );
@@ -163,7 +163,7 @@
             &:focus,
             &.k-focus {
                 @if $kendo-outline-button-shadow {
-                    box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity );
+                    @include focus-indicator( 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity ), true, true );
                 }
             }
 
@@ -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,33 +210,33 @@
 
 
     // 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
             &:focus,
             &.k-focus {
                 @if ( $kendo-link-button-shadow ) {
-                    box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity );
+                    @include focus-indicator( 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity ), true, true );
                 }
             }
 
             // 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;
@@ -215,6 +221,9 @@ $kendo-flat-button-active-opacity: .16 !default;
 /// The overlay opacity of selected flat button. Used to create background for the flat button.
 /// @group button
 $kendo-flat-button-selected-opacity: .2 !default;
+/// The opacity of the flat button focus ring. Used to create border for the flat button.
+/// @group button
+$kendo-flat-button-focus-ring-opacity: .12 !default;
 
 /// The color transition of the flat button.
 /// @group button

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; }
@@ -498,10 +491,6 @@
     .k-rtl .k-calendar,
     .k-calendar[dir="rtl"] {
 
-        .k-nav-prev,
-        .k-nav-next,
-        .k-prev-view,
-        .k-next-view,
         .k-calendar-nav-prev,
         .k-calendar-nav-next {
             transform: scaleX(-1);

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;
+                    @include focus-indicator( $indicator: ( inset 0 0 0 1px $calendar-today-color, $calendar-cell-focus-shadow ), $inset: true );
                 }
             } @else if $calendar-today-style == color {
                 color: $calendar-today-color;
@@ -114,11 +100,11 @@
         }
         .k-calendar-td:focus .k-calendar-cell-inner,
         .k-calendar-td.k-focus .k-calendar-cell-inner {
-            box-shadow: $calendar-cell-focused-shadow;
+            @include focus-indicator( $calendar-cell-focus-shadow, true );
         }
         .k-calendar-td.k-selected:focus .k-calendar-cell-inner,
         .k-calendar-td.k-selected.k-focus .k-calendar-cell-inner {
-            box-shadow: $calendar-cell-selected-focus-shadow;
+            @include focus-indicator( $calendar-cell-selected-focus-shadow, true );
         }
 
 
@@ -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;
         }
     }