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

package/scss/calendar/_theme.scss

@@ -8,6 +8,7 @@
         );
 
 
+        // TODO: do we even use this?
         // Header / footer
         .k-header {
             @include fill(

package/scss/calendar/_variables.scss

@@ -19,6 +19,7 @@ $kendo-calendar-header-bg: $kendo-component-header-bg !default;
 $kendo-calendar-header-text: $kendo-component-header-text !default;
 $kendo-calendar-header-border: $kendo-component-header-border !default;
 $kendo-calendar-header-gradient: $kendo-component-header-gradient !default;
+// TODO: variable is used, but the selector using it is not! Potentially remove;
 $kendo-calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
 
 $kendo-calendar-nav-gap: null !default;

package/scss/card/_variables.scss

@@ -20,7 +20,8 @@ $kendo-card-shadow: null !default;
 $kendo-card-focus-bg: null !default;
 $kendo-card-focus-text: null !default;
 $kendo-card-focus-border: rgba( black, .15 ) !default;
-$kendo-card-focus-shadow: 0 3px 4px 0 rgba( black, .06 ) !default;
+// TODO: double-check: the default theme is not supposed to elevate the card on focus
+$kendo-card-focus-shadow: null !default;
 
 $kendo-card-header-padding-x: $kendo-card-padding-x !default;
 $kendo-card-header-padding-y: $kendo-card-padding-y !default;

package/scss/chat/_variables.scss

@@ -52,16 +52,16 @@ $kendo-chat-border: $kendo-app-border !default;
 $kendo-chat-bubble-bg: $kendo-component-bg !default;
 $kendo-chat-bubble-text: $kendo-component-text !default;
 $kendo-chat-bubble-border: $kendo-chat-bubble-bg !default;
-$kendo-chat-bubble-shadow: 0 1px 2px rgba( $kendo-color-black, .08) !default;
-$kendo-chat-bubble-hover-shadow: 0 1px 2px rgba( $kendo-color-black, .16) !default;
-$kendo-chat-bubble-selected-shadow: 0 3px 10px rgba( $kendo-color-black, .16) !default;
+$kendo-chat-bubble-shadow: k-elevation(1) !default;
+$kendo-chat-bubble-hover-shadow: k-elevation(2) !default;
+$kendo-chat-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-alt-bubble-bg: $kendo-color-primary !default;
 $kendo-chat-alt-bubble-text: k-contrast-legacy( $kendo-chat-alt-bubble-bg ) !default;
 $kendo-chat-alt-bubble-border: $kendo-chat-alt-bubble-bg !default;
-$kendo-chat-alt-bubble-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
-$kendo-chat-alt-bubble-hover-shadow: 0 1px 2px rgba( $kendo-chat-alt-bubble-bg, .2 ) !default;
-$kendo-chat-alt-bubble-selected-shadow: 0 3px 10px rgba( $kendo-chat-alt-bubble-bg, .4 ) !default;
+$kendo-chat-alt-bubble-shadow: k-elevation(1) !default;
+$kendo-chat-alt-bubble-hover-shadow: k-elevation(2) !default;
+$kendo-chat-alt-bubble-selected-shadow: k-elevation(3) !default;
 
 $kendo-chat-quick-reply-bg: transparent !default;
 $kendo-chat-quick-reply-text: $kendo-color-primary !default;

package/scss/coloreditor/_variables.scss

@@ -35,9 +35,10 @@ $kendo-color-editor-border: $kendo-component-border !default;
 /// The border color of the focused ColorEditor.
 /// @group coloreditor
 $kendo-color-editor-focus-border: null !default;
+// TODO: does this ever get focused? Isn't it always in a popup?
 /// The box shadow of the focused ColorEditor.
 /// @group coloreditor
-$kendo-color-editor-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-color-editor-focus-shadow: null  !default; // 1px 1px 7px 1px rgba(0, 0, 0, .3)
 
 /// The vertical padding of the ColorEditor header.
 /// @group coloreditor
@@ -77,4 +78,4 @@ $kendo-color-editor-color-gradient-focus-outline-color: rgba(0, 0, 0, .3) !defau
 $kendo-color-editor-color-gradient-focus-outline: 2px !default;
 /// The outline offset of the focused ColorGradient.
 /// @group coloreditor
-$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;
+$kendo-color-editor-color-gradient-focus-outline-offset: 4px !default;

package/scss/colorgradient/_layout.scss

@@ -67,6 +67,8 @@
         height: $kendo-color-gradient-draghandle-height;
         border-width: $kendo-color-gradient-draghandle-border-width;
         border-style: solid;
+        outline-width: $kendo-color-gradient-draghandle-outline-width;
+        outline-style: solid;
         box-sizing: border-box;
     }
 

package/scss/colorgradient/_theme.scss

@@ -27,12 +27,14 @@
             $kendo-color-gradient-draghandle-bg,
             $kendo-color-gradient-draghandle-border
         );
+        outline-color: $kendo-color-gradient-draghandle-focus-shadow;
         @include box-shadow( $kendo-color-gradient-draghandle-shadow );
 
         &:focus,
         &.k-focus {
             @include fill( $bg: transparent, $border: $kendo-color-white );
-            @include focus-indicator( $kendo-color-gradient-draghandle-focus-shadow );
+            outline-color: $kendo-color-gradient-draghandle-focus-shadow;
+            @include focus-indicator( $kendo-color-gradient-draghandle-shadow );
         }
 
         &:hover,
@@ -40,7 +42,7 @@
         &.k-active,
         &:active {
             @include fill( $bg: transparent, $border: $kendo-color-white );
-            @include box-shadow( $kendo-color-gradient-draghandle-hover-shadow );
+            outline-color: $kendo-color-gradient-draghandle-hover-shadow;
         }
     }
 

package/scss/colorgradient/_variables.scss

@@ -48,7 +48,7 @@ $kendo-color-gradient-border: $kendo-component-border !default;
 $kendo-color-gradient-focus-border: null !default;
 /// The box shadow of the focused ColorGradient.
 /// @group cologradient
-$kendo-color-gradient-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-color-gradient-focus-shadow: k-elevation(3) !default;
 
 /// The border radius of the ColorGradient canvas.
 /// @group cologradient
@@ -86,6 +86,9 @@ $kendo-color-gradient-draghandle-height: 14px !default;
 /// The width of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-width: 1px !default;
+/// The width of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-outline-width: 1px !default;
 /// The border radius of the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border-radius: 50% !default;
@@ -98,15 +101,18 @@ $kendo-color-gradient-draghandle-bg: transparent !default;
 /// The color of the border around the ColorGradient canvas drag handle.
 /// @group cologradient
 $kendo-color-gradient-draghandle-border: rgba( $kendo-color-white, .8) !default;
-/// The box shadow of the ColorGradient canvas drag handle.
+/// The color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-shadow: 0 1px 4px rgba(0, 0, 0, .5) !default;
-/// The box shadow of the focused ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-shadow: rgba( $kendo-color-black, .5 ) !default;
+/// The focus color of the outline around the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-focus-shadow: 0 1px 4px black !default;
-/// The box shadow of the hovered ColorGradient canvas drag handle.
+$kendo-color-gradient-draghandle-focus-shadow: $kendo-color-black !default;
+/// The hover color of the outline around the ColorGradient canvas drag handle.
+/// @group cologradient
+$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-black !default;
+/// The box shadow of the ColorGradient canvas drag handle.
 /// @group cologradient
-$kendo-color-gradient-draghandle-hover-shadow: $kendo-color-gradient-draghandle-focus-shadow !default;
+$kendo-color-gradient-draghandle-shadow: k-elevation(2) !default;
 
 /// The vertical margin of the ColorGradient canvas drag handle.
 /// @group cologradient
@@ -133,4 +139,4 @@ $kendo-color-gradient-input-label-text: $kendo-subtle-text !default;
 $kendo-color-gradient-contrast-ratio-font-weight: $kendo-font-weight-bold !default;
 /// The spacing between the items in the ColorGradient contrast tool.
 /// @group cologradient
-$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;
+$kendo-color-gradient-contrast-spacer: k-math-div( $kendo-color-gradient-spacer, 1.5 ) !default;

package/scss/common/_index.scss

@@ -1,4 +1,5 @@
 @import "./_base.scss";
 @import "./_animations.scss";
+@import "./_indicators.scss";
 @import "./_resizing.scss";
 @import "./_scrollbar.scss";

package/scss/common/_indicators.scss

@@ -0,0 +1,39 @@
+@include exports( "common/indicators/current-time" ) {
+
+    $kendo-current-time-width: 1px !default;
+    $kendo-current-time-color: #ff0000 !default;
+
+    // Layout
+    .k-current-time {
+        width: $kendo-current-time-width;
+        position: absolute;
+
+        &.k-current-time-arrow-left,
+        &.k-current-time-arrow-right,
+        &.k-current-time-arrow-down {
+            width: 0;
+            height: 0;
+            background: transparent;
+            border: 4px solid transparent;
+        }
+    }
+
+
+    // Theme
+    .k-current-time {
+        background: $kendo-current-time-color;
+
+        &.k-current-time-arrow-left {
+            border-right-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-right {
+            border-left-color: $kendo-current-time-color;
+        }
+
+        &.k-current-time-arrow-down {
+            border-top-color: $kendo-current-time-color;
+        }
+    }
+
+}

package/scss/core/_index.scss

@@ -8,4 +8,7 @@ $wcag-min-contrast-ratio: 4.5 !default;
 // Expose
 @include exports("kendo-core-styles") {
     @include kendo-core--styles();
+
+    // Elevation System
+    @include kendo-elevation--styles();
 }

package/scss/fab/_variables.scss

@@ -115,10 +115,10 @@ $kendo-fab-sizes: (
 
 /// The base shadow of the FAB.
 /// @group floating-action-button
-$kendo-fab-shadow: 0 6px 10px rgba(0, 0, 0, .14), 0 1px 18px rgba(0, 0, 0, .12), 0 3px 5px rgba(0, 0, 0, .2) !default;
+$kendo-fab-shadow: k-elevation(5) !default;
 /// The shadow of the disabled FAB.
 /// @group floating-action-button
-$kendo-fab-disabled-shadow: 0 6px 10px k-try-tint( rgba(0, 0, 0, .14), .5 ), 0 1px 18px k-try-tint( rgba(0, 0, 0, .12), .5 ), 0 3px 5px k-try-tint( rgba(0, 0, 0, .2), .5 ) !default;
+$kendo-fab-disabled-shadow: k-elevation(5) !default;
 /// The shadow of the active FAB.
 /// @group floating-action-button
 $kendo-fab-active-shadow: null !default;

package/scss/index.scss

@@ -172,6 +172,8 @@
     @include kendo-core--styles();
 
     // Color system
+    @include color-system-styles();
+
 
     // Typography and utils
     @include kendo-typography--styles();

package/scss/list/_variables.scss

@@ -195,7 +195,7 @@ $kendo-list-header-text: null !default;
 $kendo-list-header-border: inherit !default;
 /// The box shadow of the List header.
 /// @group list
-$kendo-list-header-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
+$kendo-list-header-shadow: k-elevation(2) !default;
 
 
 /// The background color of the List items.

package/scss/listview/_variables.scss

@@ -57,4 +57,4 @@ $kendo-listview-item-focus-bg: null !default;
 $kendo-listview-item-focus-border: null !default;
 /// The box shadow of the focused ListView items.
 /// @group listview
-$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;

package/scss/orgchart/_variables.scss

@@ -22,7 +22,7 @@ $kendo-orgchart-node-group-text: $kendo-base-text !default;
 $kendo-orgchart-node-group-border: $kendo-base-border !default;
 
 $kendo-orgchart-node-group-focus-border: $kendo-card-focus-border !default;
-$kendo-orgchart-node-group-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-node-group-focus-shadow: k-elevation(1) !default;
 
 $kendo-orgchart-node-group-title-font-size: $kendo-font-size-lg !default;
 $kendo-orgchart-node-group-title-margin-bottom: k-math-div( $kendo-orgchart-spacer, 3 ) !default;
@@ -37,7 +37,7 @@ $kendo-orgchart-card-padding-y: $kendo-card-padding-y !default;
 $kendo-orgchart-card-padding-x: $kendo-orgchart-card-padding-y !default;
 $kendo-orgchart-card-border-width: $kendo-card-border-width !default;
 $kendo-orgchart-card-shadow: $kendo-card-shadow !default;
-$kendo-orgchart-card-focus-shadow: $kendo-card-focus-shadow !default;
+$kendo-orgchart-card-focus-shadow: k-elevation(1) !default;
 
 $kendo-orgchart-card-title-margin-bottom: 0px !default;
 $kendo-orgchart-card-title-font-size: null !default;

package/scss/pdf-viewer/_variables.scss

@@ -23,7 +23,7 @@ $kendo-pdf-viewer-page-spacing: 30px !default;
 $kendo-pdf-viewer-page-bg: white !default;
 $kendo-pdf-viewer-page-text: $kendo-component-text !default;
 $kendo-pdf-viewer-page-border: $kendo-component-border !default;
-$kendo-pdf-viewer-page-shadow: 0 0 k-math-div( $kendo-pdf-viewer-page-spacing, 2 ) $kendo-pdf-viewer-page-border !default;
+$kendo-pdf-viewer-page-shadow: k-elevation(3) !default;
 
 $kendo-pdf-viewer-search-panel-padding-x: $kendo-toolbar-md-padding-x !default;
 $kendo-pdf-viewer-search-panel-padding-y: calc( #{$kendo-toolbar-md-padding-x} * 2 ) !default;

package/scss/pivotgrid/_variables.scss

@@ -69,10 +69,11 @@ $kendo-pivotgrid-configurator-header-bg: null !default;
 $kendo-pivotgrid-configurator-header-text: $kendo-component-header-text !default;
 $kendo-pivotgrid-configurator-header-border: null !default;
 
-$kendo-pivotgrid-configurator-end-shadow: -3px 0px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-start-shadow: 3px 0px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-top-shadow: 0px -3px 6px rgba(0, 0, 0, .16) !default;
-$kendo-pivotgrid-configurator-bottom-shadow: 0px 3px 6px rgba(0, 0, 0, .16) !default;
+$kendo-pivotgrid-configurator-shadow: k-elevation(3) !default;
+$kendo-pivotgrid-configurator-end-shadow: $kendo-pivotgrid-configurator-shadow !default; // -3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-start-shadow: $kendo-pivotgrid-configurator-shadow !default; // 3px 0px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-top-shadow: $kendo-pivotgrid-configurator-shadow  !default; // 0px -3px 6px rgba(0, 0, 0, .16)
+$kendo-pivotgrid-configurator-bottom-shadow: $kendo-pivotgrid-configurator-shadow !default; // 0px 3px 6px rgba(0, 0, 0, .16)
 
 $kendo-pivotgrid-configurator-button-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
 $kendo-pivotgrid-configurator-button-padding-y: k-map-get( $kendo-spacing, 1 ) !default;

package/scss/popup/_variables.scss

@@ -36,4 +36,4 @@ $kendo-popup-text: $kendo-component-text !default;
 $kendo-popup-border: $kendo-component-border !default;
 /// Box shadow of the popup.
 /// @group popup
-$kendo-popup-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;
+$kendo-popup-shadow: k-elevation(4) !default;

package/scss/rating/_theme.scss

@@ -11,14 +11,14 @@
                     text-shadow: $kendo-rating-icon-focus-shadow;
                 }
                 > .k-svg-icon {
-                    filter: drop-shadow( $kendo-rating-icon-focus-shadow );
+                    filter: k-shadow-filter($kendo-rating-icon-focus-selected-shadow);
                 }
 
                 &.k-selected > .k-icon {
                     text-shadow: $kendo-rating-icon-focus-selected-shadow;
                 }
                 &.k-selected > .k-svg-icon {
-                    filter: drop-shadow( $kendo-rating-icon-focus-selected-shadow );
+                    filter: k-shadow-filter($kendo-rating-icon-focus-selected-shadow);
                 }
             }
         }

package/scss/rating/_variables.scss

@@ -20,5 +20,5 @@ $kendo-rating-icon-selected-text: $kendo-selected-bg !default;
 $kendo-rating-icon-hover-text: $kendo-selected-bg !default;
 $kendo-rating-icon-focus-text: $kendo-selected-bg !default;
 
-$kendo-rating-icon-focus-shadow: 0 2px 4px rgba( $kendo-color-black, .1 ) !default;
-$kendo-rating-icon-focus-selected-shadow: 0 2px 4px rgba( $kendo-color-black, .1) !default;
+$kendo-rating-icon-focus-shadow: k-elevation(1) !default;
+$kendo-rating-icon-focus-selected-shadow: k-elevation(1) !default;

package/scss/scheduler/_layout.scss

@@ -536,20 +536,6 @@
         }
     }
 
-    // Current time
-    .k-current-time {
-        position: absolute;
-
-        &.k-current-time-arrow-left,
-        &.k-current-time-arrow-right,
-        &.k-current-time-arrow-down {
-            width: 0;
-            height: 0;
-            background: transparent;
-            border: 4px solid transparent;
-        }
-    }
-
     // Draging hint
     .k-event-drag-hint {
         opacity: .5;

package/scss/scheduler/_theme.scss

@@ -9,23 +9,6 @@
         );
     }
 
-    // Current time
-    .k-current-time {
-        background: $kendo-scheduler-current-time-color;
-
-        &.k-current-time-arrow-left {
-            border-right-color: $kendo-scheduler-current-time-color;
-        }
-
-        &.k-current-time-arrow-right {
-            border-left-color: $kendo-scheduler-current-time-color;
-        }
-
-        &.k-current-time-arrow-down {
-            border-top-color: $kendo-scheduler-current-time-color;
-        }
-    }
-
     // Header and footer
     .k-scheduler-toolbar {
         @include fill(

package/scss/scheduler/_variables.scss

@@ -48,8 +48,6 @@ $kendo-scheduler-cell-height: $kendo-line-height-em !default;
 $kendo-scheduler-datecolumn-width: 12em !default;
 $kendo-scheduler-timecolumn-width: 11em !default;
 
-$kendo-scheduler-current-time-color: #ff0000 !default;
-
 $kendo-scheduler-nonwork-bg: k-try-shade( $kendo-scheduler-bg, .5 ) !default;
 $kendo-scheduler-nonwork-text: null !default;
 
@@ -77,7 +75,7 @@ $kendo-scheduler-tooltip-border-width: 0 !default;
 $kendo-scheduler-tooltip-bg: $kendo-color-primary-contrast !default;
 $kendo-scheduler-tooltip-text: $kendo-base-text !default;
 $kendo-scheduler-tooltip-border: null !default;
-$kendo-scheduler-tooltip-shadow: 0px 0px 10px rgba(0, 0, 0, .2) !default;
+$kendo-scheduler-tooltip-shadow: k-elevation(2) !default;
 
 $kendo-scheduler-tooltip-title-margin-y: k-map-get( $kendo-spacing, 3 ) !default;
 $kendo-scheduler-tooltip-month-font-size: $kendo-font-size-sm !default;

package/scss/tabstrip/_variables.scss

@@ -80,7 +80,7 @@ $kendo-tabstrip-item-selected-gradient: null !default;
 
 $kendo-tabstrip-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$kendo-tabstrip-item-dragging-shadow: 0px 3px 4px rgba(0, 0, 0, .15) !default;
+$kendo-tabstrip-item-dragging-shadow: k-elevation(3) !default;
 
 $kendo-tabstrip-item-disabled-bg: null !default;
 $kendo-tabstrip-item-disabled-text: null !default;

package/scss/timeline/_variables.scss

@@ -27,7 +27,7 @@ $kendo-timeline-track-end-calc: calc(#{$kendo-timeline-track-arrow-width} - 2 *
 $kendo-timeline-track-bg: $kendo-button-bg !default;
 $kendo-timeline-track-border-color: $kendo-button-border !default;
 
-$kendo-timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($kendo-color-primary, .4) !default;
+$kendo-timeline-track-item-focus-shadow: k-elevation(2) !default;
 
 $kendo-timeline-track-event-offset: 36px !default;
 

package/scss/tooltip/_theme.scss

@@ -2,7 +2,7 @@
 
     .k-tooltip-wrapper {
         .k-tooltip {
-            box-shadow: $kendo-popup-shadow;
+            box-shadow: $kendo-tooltip-shadow;
         }
     }
 

package/scss/tooltip/_variables.scss

@@ -18,6 +18,8 @@ $kendo-tooltip-bg: rgba( k-contrast-legacy( $kendo-body-bg ), .75 ) !default;
 $kendo-tooltip-text: k-contrast-legacy( $kendo-tooltip-bg ) !default;
 $kendo-tooltip-border: $kendo-tooltip-bg !default;
 
+$kendo-tooltip-shadow: k-elevation(2) !default;
+
 $kendo-tooltip-primary-bg: $kendo-color-primary !default;
 $kendo-tooltip-primary-text: k-contrast-legacy( $kendo-tooltip-primary-bg ) !default;
 $kendo-tooltip-primary-border: $kendo-tooltip-primary-bg !default;

package/scss/window/_variables.scss

@@ -76,10 +76,10 @@ $kendo-window-text: $kendo-component-text !default;
 $kendo-window-border: $kendo-component-border !default;
 /// The box shadow of the Window.
 /// @group window
-$kendo-window-shadow: 0 3px 3px 0 rgba(0, 0, 0, .06) !default;
+$kendo-window-shadow: k-elevation(8) !default;
 /// The box shadow of the focused Window.
 /// @group window
-$kendo-window-focus-shadow: 1px 1px 7px 1px rgba(0, 0, 0, .3) !default;
+$kendo-window-focus-shadow: k-elevation(9) !default;
 
 /// The background color of the Window titlebar.
 /// @group window