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

package/scss/popover/_layout.scss

@@ -2,15 +2,15 @@
 
     // Popover
     .k-popover {
-        @include border-radius( $popover-border-radius );
+        @include border-radius( $kendo-popover-border-radius );
         padding: 0;
-        border-width: $popover-border-width;
-        border-style: $popover-border-style;
+        border-width: $kendo-popover-border-width;
+        border-style: $kendo-popover-border-style;
         box-sizing: border-box;
         outline: 0;
-        font-size: $popover-font-size;
-        font-family: $popover-font-family;
-        line-height: $popover-line-height;
+        font-size: $kendo-popover-font-size;
+        font-family: $kendo-popover-font-family;
+        line-height: $kendo-popover-line-height;
         display: flex;
         flex-flow: column nowrap;
         z-index: 12000;
@@ -25,27 +25,29 @@
     }
 
     .k-popover-inner {
+        height: inherit;
         position: relative;
         border-radius: inherit;
-        height: inherit;
+        border-color: inherit;
     }
 
     // Header
     .k-popover-header {
-        @include border-top-radius( $popover-border-radius );
-        padding: $popover-header-padding-y $popover-header-padding-x;
-        border-width: 0 0 $popover-header-border-width;
-        border-style: $popover-header-border-style;
+        @include border-top-radius( $kendo-popover-border-radius );
+        padding: $kendo-popover-header-padding-y $kendo-popover-header-padding-x;
+        border-width: 0 0 $kendo-popover-header-border-width;
+        border-style: $kendo-popover-header-border-style;
+        border-color: inherit;
     }
 
     // Body
     .k-popover-body {
-        padding: $popover-body-padding-y $popover-body-padding-x;
+        padding: $kendo-popover-body-padding-y $kendo-popover-body-padding-x;
     }
 
     // Actions
     .k-popover-actions {
-        border-width: $popover-actions-border-width 0 0;
+        border-width: $kendo-popover-actions-border-width 0 0;
     }
 
 }
@@ -54,10 +56,10 @@
 
     .k-popover-callout {
         margin: 0;
-        width: $popover-callout-width;
-        height: $popover-callout-height;
-        border-width: $popover-callout-border-width;
-        border-style: $popover-callout-border-style;
+        width: $kendo-popover-callout-width;
+        height: $kendo-popover-callout-height;
+        border-width: $kendo-popover-callout-border-width;
+        border-style: $kendo-popover-callout-border-style;
         position: absolute;
 
         &.k-callout-n {

package/scss/popover/_theme.scss

@@ -2,12 +2,12 @@
 
     // Popover
     .k-popover {
-        @include box-shadow( $popover-shadow );
+        @include box-shadow( $kendo-popover-shadow );
 
         @include fill(
-            $popover-text,
-            $popover-bg,
-            $popover-border
+            $kendo-popover-text,
+            $kendo-popover-bg,
+            $kendo-popover-border
         );
     }
 
@@ -19,9 +19,9 @@
     // Header
     .k-popover-header {
         @include fill(
-            $popover-header-text,
-            $popover-header-bg,
-            $popover-header-border
+            $kendo-popover-header-text,
+            $kendo-popover-header-bg,
+            $kendo-popover-header-border
         );
     }
 

package/scss/popover/_variables.scss

@@ -1,31 +1,31 @@
 // Popover
-$popover-border-width: $card-border-width !default;
-$popover-border-style: solid !default;
-$popover-border-radius: $card-border-radius !default;
-$popover-font-size: $card-font-size !default;
-$popover-font-family: $card-font-family !default;
-$popover-line-height: $card-line-height !default;
-$popover-bg: $kendo-component-bg !default;
-$popover-text: $kendo-component-text !default;
-$popover-border: $kendo-component-border !default;
-$popover-shadow: $popup-shadow !default;
+$kendo-popover-border-width: $card-border-width !default;
+$kendo-popover-border-style: solid !default;
+$kendo-popover-border-radius: $card-border-radius !default;
+$kendo-popover-font-size: $card-font-size !default;
+$kendo-popover-font-family: $card-font-family !default;
+$kendo-popover-line-height: $card-line-height !default;
+$kendo-popover-bg: $kendo-component-bg !default;
+$kendo-popover-text: $kendo-component-text !default;
+$kendo-popover-border: $kendo-component-border !default;
+$kendo-popover-shadow: $popup-shadow !default;
 
-$popover-header-padding-y: $card-header-padding-y !default;
-$popover-header-padding-x: $card-header-padding-x !default;
-$popover-header-border-width: $card-header-border-width !default;
-$popover-header-border-style: $popover-border-style !default;
-$popover-header-bg: $card-header-bg !default;
-$popover-header-text: $card-header-text !default;
-$popover-header-border: $card-header-border !default;
+$kendo-popover-header-padding-y: $card-header-padding-y !default;
+$kendo-popover-header-padding-x: $card-header-padding-x !default;
+$kendo-popover-header-border-width: $card-header-border-width !default;
+$kendo-popover-header-border-style: $kendo-popover-border-style !default;
+$kendo-popover-header-bg: $card-header-bg !default;
+$kendo-popover-header-text: $card-header-text !default;
+$kendo-popover-header-border: $card-header-border !default;
 
-$popover-body-padding-y: $card-body-padding-y !default;
-$popover-body-padding-x: $card-body-padding-x !default;
+$kendo-popover-body-padding-y: $card-body-padding-y !default;
+$kendo-popover-body-padding-x: $card-body-padding-x !default;
 
-$popover-actions-border-width: $popover-border-width !default;
+$kendo-popover-actions-border-width: $kendo-popover-border-width !default;
 
-$popover-callout-width: $card-callout-width !default;
-$popover-callout-height: $card-callout-height !default;
-$popover-callout-border-width: $popover-border-width !default;
-$popover-callout-border-style: $popover-border-style !default;
-$popover-callout-bg: $popover-bg !default;
-$popover-callout-border: $popover-border !default;
+$kendo-popover-callout-width: $card-callout-width !default;
+$kendo-popover-callout-height: $card-callout-height !default;
+$kendo-popover-callout-border-width: $kendo-popover-border-width !default;
+$kendo-popover-callout-border-style: $kendo-popover-border-style !default;
+$kendo-popover-callout-bg: $kendo-popover-bg !default;
+$kendo-popover-callout-border: $kendo-popover-border !default;

package/scss/progressbar/_layout.scss

@@ -73,7 +73,7 @@
     }
     .k-progress-status {
         padding-block: 0;
-        padding-inline: k-math-div( $spacer-x, 2 );
+        padding-inline: k-map-get( $kendo-spacing, 2 );
         min-width: 10px;
         text-align: center;
         display: inline-block;

package/scss/radio/_index.scss

@@ -2,9 +2,6 @@
 
 
 // Dependencies
-@import "../typography/_variables.scss";
-@import "../list/_variables.scss";
-@import "../checkbox/_variables.scss";
 
 
 // Component

package/scss/radio/_theme.scss

@@ -25,7 +25,7 @@
     .k-radio:focus,
     .k-radio.k-focus {
         @include fill( $border: $kendo-radio-focus-border );
-        @include box-shadow( $kendo-radio-focus-shadow );
+        @include focus-indicator( $kendo-radio-focus-shadow );
     }
 
 
@@ -54,7 +54,7 @@
     .k-radio:checked:focus,
     .k-radio.k-checked.k-focus {
         @include fill( $border: $kendo-radio-focus-checked-border );
-        @include box-shadow( $kendo-radio-focus-checked-shadow );
+        @include focus-indicator( $kendo-radio-focus-checked-shadow );
     }
 
 

package/scss/radio/_variables.scss

@@ -1,3 +1,7 @@
+@import "../list/_variables.scss";
+@import "../checkbox/_variables.scss";
+
+
 // Radio button
 
 /// Border radius of radio button.

package/scss/rating/_variables.scss

@@ -1,4 +1,5 @@
 // Rating
+
 $rating-font-family: $font-family !default;
 $rating-font-size: $font-size !default;
 $rating-line-height: $line-height !default;
@@ -12,7 +13,7 @@ $rating-label-margin-x: $kendo-padding-md-x !default;
 $rating-label-margin-y: $kendo-padding-md-y !default;
 $rating-label-line-height: $line-height-lg !default;
 
-$rating-icon-size: ($icon-size * 1.5) !default;
+$rating-icon-size: ($kendo-icon-size * 1.5) !default;
 
 $rating-icon-text: $kendo-component-text !default;
 $rating-icon-selected-text: $kendo-selected-bg !default;

package/scss/scheduler/_layout.scss

@@ -220,16 +220,8 @@
             display: inline-flex;
             flex-flow: row nowrap;
             align-items: center;
-            gap: $icon-spacing;
+            gap: $kendo-icon-spacing;
             cursor: pointer;
-
-            .k-sm-date-format,
-            .k-lg-date-format {
-                white-space: nowrap;
-                overflow: hidden;
-                text-overflow: ellipsis;
-            }
-            .k-sm-date-format { display: none; }
         }
 
 
@@ -238,17 +230,6 @@
             display: inline-flex;
             flex-flow: row nowrap;
         }
-
-
-        // Responsive scheduler toolbar
-        @media (max-width: 1400px) {
-            .k-nav-current .k-lg-date-format { max-width: 200px; }
-        }
-
-        @media (max-width: 1024px) {
-            .k-nav-current .k-lg-date-format { display: none; }
-            .k-nav-current .k-sm-date-format { display: inline-block; }
-        }
     }
 
 
@@ -425,7 +406,7 @@
             line-height: $scheduler-event-line-height;
             padding: $kendo-padding-md-y $kendo-padding-md-x;
             // TODO: incompatible units
-            // padding-right: $kendo-padding-sm-x + $spacer;
+            // padding-right: $kendo-padding-sm-x + k-map-get( $kendo-spacing, 4 );
         }
         .k-event-time {
             padding-bottom: 0;
@@ -495,7 +476,7 @@
         }
         .k-resize-n::before,
         .k-resize-s::before {
-            width: $spacer * 2;
+            width: k-map-get( $kendo-spacing, 8 );
             border-bottom-width: 1px;
         }
         .k-resize-w {
@@ -508,7 +489,7 @@
         }
         .k-resize-w::before,
         .k-resize-e::before {
-            height: $spacer * 2;
+            height: k-map-get( $kendo-spacing, 8 );
             border-left-width: 1px;
         }
 

package/scss/scrollview/_theme.scss

@@ -54,7 +54,7 @@
             opacity: $scrollview-navigation-hover-opacity;
 
             .k-icon::before {
-                box-shadow: $scrollview-pagebutton-shadow;
+                @include focus-indicator( $scrollview-pagebutton-shadow );
             }
         }
 
@@ -79,7 +79,7 @@
 
         &:focus,
         &.k-focus {
-            box-shadow: $scrollview-pagebutton-shadow;
+            @include focus-indicator( $scrollview-pagebutton-shadow );
         }
     }
 

package/scss/slider/_theme.scss

@@ -48,13 +48,13 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $slider-draghandle-focus-shadow );
+                @include focus-indicator( $slider-draghandle-focus-shadow );
             }
         }
 
         &.k-focus {
             .k-draghandle {
-                @include box-shadow( $slider-draghandle-focus-shadow );
+                @include focus-indicator( $slider-draghandle-focus-shadow );
             }
         }
 

package/scss/split-button/_theme.scss

@@ -3,7 +3,7 @@
     // Split button
     .k-split-button:focus,
     .k-split-button.k-focus {
-        @include box-shadow( $kendo-split-button-focus-shadow );
+        @include focus-indicator( $kendo-split-button-focus-shadow );
     }
 
 }

package/scss/spreadsheet/_layout.scss

@@ -232,8 +232,8 @@
             }
 
             .k-spreadsheet-sheets-remove {
-                margin-right: k-math-div( $spacer, 2 );
-                margin-left: - k-math-div( $spacer, 2 );
+                margin-right: k-map-get( $kendo-spacing, 2 );
+                margin-left: - k-map-get( $kendo-spacing, 2 );
                 padding: 0;
                 line-height: 1;
                 display: inline-flex;
@@ -551,7 +551,7 @@
 
 @include exports( "spreadsheet/filter/layout" ) {
 
-    $filter-menu-padding-left: calc( #{$icon-size} + #{2 * $kendo-padding-md-y} );
+    $filter-menu-padding-left: calc( #{$kendo-icon-size} + #{2 * $kendo-padding-md-y} );
 
     // Filter button
     .k-spreadsheet .k-filter-wrapper {
@@ -593,7 +593,7 @@
                 padding-left: $filter-menu-padding-left;
             }
             .k-icon {
-                margin-left: calc(-1 * ( #{$icon-size} + #{$kendo-padding-md-y} ) );
+                margin-left: calc(-1 * ( #{$kendo-icon-size} + #{$kendo-padding-md-y} ) );
                 margin-right: $kendo-padding-md-y;
             }
 
@@ -735,12 +735,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-top: k-math-div( $spacer, 2 );
+            margin-top: k-map-get( $kendo-spacing, 2 );
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-top: k-math-div( $spacer, 2 );
+            margin-top: k-map-get( $kendo-spacing, 2 );
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -770,7 +770,7 @@
         .k-page-orientation {
             position: absolute;
             right: 0;
-            top: k-math-div( $spacer-y, 2 );
+            top: k-map-get( $kendo-spacing, 2 );
 
             .k-icon {
                 font-size: 6em;

package/scss/stepper/_layout.scss

@@ -87,7 +87,6 @@
             }
         }
 
-        .k-step-focus,
         .k-step.k-focus,
         .k-step-link:focus {
             .k-step-indicator::after {
@@ -111,13 +110,13 @@
             border-width: 0;
         }
         .k-step-label .k-step-text {
-            max-width: calc(10em - (#{$icon-size} + #{$icon-spacing}));
+            max-width: calc(10em - (#{$kendo-icon-size} + #{$kendo-icon-spacing}));
             flex-grow: 1;
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
         }
-        .k-step-label .k-icon { margin-left: $icon-spacing; }
+        .k-step-label .k-icon { margin-left: $kendo-icon-spacing; }
 
         .k-step-current .k-step-label {
             font-weight: bold;
@@ -248,7 +247,7 @@
 
         .k-step-label .k-icon {
             margin-left: 0;
-            margin-right: $icon-spacing;
+            margin-right: $kendo-icon-spacing;
         }
 
         // Horizontal

package/scss/stepper/_theme.scss

@@ -28,12 +28,11 @@
                 }
             }
 
-            &.k-step-focus,
             &.k-focus,
             .k-step-link:focus  {
                 // Labels only
                 .k-step-label:only-child {
-                    @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-border );
+                    @include focus-indicator( $indicator: ( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-border ), $inset: true );
                 }
             }
 

package/scss/switch/_index.scss

@@ -3,7 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_border.scss";
+// @import "../utils/_border.scss";
 
 
 // Component

package/scss/switch/_theme.scss

@@ -57,7 +57,11 @@
                     $kendo-switch-off-track-focus-border,
                     $kendo-switch-off-track-focus-gradient
                 );
-                outline: $kendo-switch-off-track-focus-ring;
+                @if $kendo-enable-focus-contrast {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+                } @else {
+                    outline: $kendo-switch-off-track-focus-ring;
+                }
             }
         }
 
@@ -133,7 +137,11 @@
                     $kendo-switch-on-track-focus-border,
                     $kendo-switch-on-track-focus-gradient
                 );
-                outline: $kendo-switch-on-track-focus-ring;
+                @if $kendo-enable-focus-contrast {
+                    @include box-shadow( 0 0 0 2px if( $dark-theme, $kendo-color-white, $kendo-color-black ) );
+                } @else {
+                    outline: $kendo-switch-on-track-focus-ring;
+                }
             }
         }
 

package/scss/table/_index.scss

@@ -3,17 +3,9 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../input/_index.scss";
-@import "../floating-label/_index.scss";
-@import "../combobox/_index.scss";
-@import "../popup/_index.scss";
-@import "../toolbar/_variables.scss";
-@import "../menu/_variables.scss";
-@import "../list/_variables.scss";
 
 
 // Component
 @import "./_variables.scss";
 @import "./_layout.scss";
 @import "./_theme.scss";
-

package/scss/table/_theme.scss

@@ -69,7 +69,7 @@
             border-color: $kendo-table-focus-border;
             color: $kendo-table-focus-text;
             background-color: $kendo-table-focus-bg;
-            box-shadow: $kendo-table-focus-shadow;
+            @include focus-indicator( $kendo-table-focus-shadow, inset );
         }
     }
 

package/scss/table/_variables.scss

@@ -1,3 +1,6 @@
+@import "../list/_variables.scss";
+
+
 // Table
 
 /// The width of the table border.

package/scss/tabstrip/_theme.scss

@@ -49,11 +49,11 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $tabstrip-item-focus-shadow );
+                @include focus-indicator( $tabstrip-item-focus-shadow, true );
             }
 
             &.k-tabstrip-dragging {
-                @include box-shadow( $tabstrip-item-dragging-shadow );
+                @include focus-indicator( $tabstrip-item-dragging-shadow );
             }
         }
 

package/scss/tabstrip/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Tabstrip
+
 $tabstrip-wrapper-padding-x: 0px !default;
 $tabstrip-wrapper-padding-y: 0px !default;
 $tabstrip-wrapper-border-width: 0px !default;

package/scss/taskboard/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../utils/_index.scss";
+// @import "../utils/_index.scss";
 @import "../common/_index.scss";
 @import "../icons/_index.scss";
 @import "../forms/_index.scss";

package/scss/taskboard/_theme.scss

@@ -79,7 +79,7 @@
         &:focus,
         &.k-focus {
             @include fill( $border: $taskboard-card-focus-border );
-            @include box-shadow( $taskboard-card-focus-shadow );
+            @include focus-indicator( $taskboard-card-focus-shadow );
         }
 
         &:hover,

package/scss/tilelayout/_theme.scss

@@ -8,7 +8,7 @@
 
     .k-tilelayout-item:focus,
     .k-tilelayout-item.k-focus {
-        @include box-shadow($tilelayout-card-focus-shadow);
+        @include focus-indicator($tilelayout-card-focus-shadow);
     }
 
     .k-layout-item-hint {

package/scss/timedurationpicker/_index.scss

@@ -2,7 +2,7 @@
 
 
 // Dependencies
-@import "../icons/index";
+@import "../icons/_index.scss";
 @import "../button/_index.scss";
 @import "../input/_index.scss";
 @import "../popup/_index.scss";

package/scss/timeline/_layout.scss

@@ -197,7 +197,7 @@
             }
 
             .k-event-collapse {
-                margin: -$icon-spacing 0;
+                margin: -$kendo-icon-spacing 0;
                 transform: rotate(90deg);
                 transition: transform .2s ease-in-out;
             }

package/scss/timeline/_theme.scss

@@ -62,6 +62,6 @@
     }
 
     .k-timeline-track-item.k-focus .k-timeline-circle {
-        @include box-shadow( $timeline-track-item-focus-shadow );
+        @include focus-indicator( $timeline-track-item-focus-shadow );
     }
 }

package/scss/timeselector/_theme.scss

@@ -15,9 +15,11 @@
     .k-time-selector-header {
 
         .k-time-now {
+            // TODO: use a variable
             color: $link-text;
         }
         .k-time-now:hover {
+            // TODO: use a variable
             color: $link-hover-text;
         }
     }

package/scss/timeselector/_variables.scss

@@ -1,4 +1,8 @@
+@import "../typography/_variables.scss";
+
+
 // Time selector
+
 $time-selector-border-width: 1px !default;
 $time-selector-font-family: $font-family !default;
 $time-selector-font-size: $font-size !default;

package/scss/toolbar/_layout.scss

@@ -229,7 +229,7 @@
             flex-flow: row nowrap;
             align-items: center;
             align-content: center;
-            gap: $icon-spacing;
+            gap: $kendo-icon-spacing;
             justify-content: flex-start;
             position: relative;
         }

package/scss/toolbar/_theme.scss

@@ -21,7 +21,7 @@
         // Template item
         .k-toolbar-item:focus,
         .k-toolbar-item.k-focus {
-            @include box-shadow( $kendo-toolbar-item-shadow );
+            @include focus-indicator( $kendo-toolbar-item-shadow );
         }
 
 
@@ -72,7 +72,7 @@
             // Button focus state
             &:focus,
             &.k-focus {
-                box-shadow: $kendo-menu-popup-item-focus-shadow;
+                @include focus-indicator( $kendo-menu-popup-item-focus-shadow, true );
             }
 
             // Active state