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

package/scss/skeleton/_layout.scss

@@ -21,6 +21,13 @@
         border-radius: $skeleton-circle-border-radius;
     }
 
+
+    // Legacy alias
+    .k-placeholder-line {
+        @extend .k-skeleton !optional;
+        @extend .k-skeleton-text !optional;
+    }
+
 }
 
 

package/scss/skeleton/_variables.scss

@@ -6,6 +6,6 @@ $skeleton-rect-border-radius: 0 !default;
 
 $skeleton-circle-border-radius: 9999px !default;
 
-$skeleton-item-bg: rgba( $inverse, .2 ) !default;
+$skeleton-item-bg: rgba( $kendo-color-inverse, .2 ) !default;
 
 $skeleton-wave-bg: rgba( black, .04 ) !default;

package/scss/slider/_index.scss

@@ -9,8 +9,8 @@
 
 
 // Component
-@import "_variables.scss";
-@import "images/slider-h.scss";
-@import "images/slider-v.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./images/slider-h.scss";
+@import "./images/slider-v.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/slider/_layout.scss

@@ -13,7 +13,7 @@
         align-items: center;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         *,
         *::before,
@@ -353,14 +353,14 @@
         .k-slider-horizontal & {
             height: $slider-track-thickness;
             left: 0;
-            margin-top: -($slider-track-thickness / 2);
+            margin-top: - k-math-div( $slider-track-thickness, 2 );
             top: 50%;
         }
 
         .k-slider-vertical & {
             bottom: 0;
             left: 50%;
-            margin-left: -($slider-track-thickness / 2);
+            margin-left: - k-math-div( $slider-track-thickness, 2 );
             width: $slider-track-thickness;
         }
     }
@@ -421,12 +421,12 @@
     .k-slider-tooltip {
         .k-callout-n,
         .k-callout-s {
-            margin-left: -$tooltip-callout-size / 2;
+            margin-left: - k-math-div( $tooltip-callout-size, 2 );
         }
 
         .k-callout-w,
         .k-callout-e {
-            margin-top: -$tooltip-callout-size / 2;
+            margin-top: - k-math-div( $tooltip-callout-size, 2 );
         }
     }
 

package/scss/slider/_theme.scss

@@ -1,9 +1,9 @@
 @include exports("slider/theme") {
-    $slider-tick-horizontal-image: map-get($data-uris, "slider-h.gif") !default;
-    $slider-tick-vertical-image: map-get($data-uris, "slider-v.gif") !default;
+    $slider-tick-horizontal-image: k-map-get($data-uris, "slider-h.gif") !default;
+    $slider-tick-vertical-image: k-map-get($data-uris, "slider-v.gif") !default;
 
     .k-slider {
-        color: $component-text;
+        color: $kendo-component-text;
 
         .k-slider-track,
         .k-slider-selection {
@@ -29,10 +29,10 @@
 
             &:hover {
                 @include fill(
-                    $slider-draghandle-hovered-text,
-                    $slider-draghandle-hovered-bg,
-                    $slider-draghandle-hovered-border,
-                    $slider-draghandle-hovered-gradient
+                    $slider-draghandle-hover-text,
+                    $slider-draghandle-hover-bg,
+                    $slider-draghandle-hover-border,
+                    $slider-draghandle-hover-gradient
                 );
             }
 
@@ -48,13 +48,13 @@
 
             &:focus,
             &.k-focus {
-                @include box-shadow( $slider-draghandle-focused-shadow );
+                @include box-shadow( $slider-draghandle-focus-shadow );
             }
         }
 
         &.k-focus {
             .k-draghandle {
-                @include box-shadow( $slider-draghandle-focused-shadow );
+                @include box-shadow( $slider-draghandle-focus-shadow );
             }
         }
 

package/scss/slider/_variables.scss

@@ -10,7 +10,7 @@ $slider-line-height: $line-height !default;
 $slider-button-offset: 10px !default;
 $slider-button-size: ($slider-alt-size - 2) !default;
 $slider-button-spacing: ($slider-button-size + $slider-button-offset) !default;
-$slider-button-focused-shadow: null !default;
+$slider-button-focus-shadow: null !default;
 
 $slider-track-thickness: 4px !default;
 $slider-draghandle-size: 14px !default;
@@ -18,28 +18,28 @@ $slider-draghandle-border-width: 1px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
-$slider-draghandle-bg: $primary !default;
-$slider-draghandle-text: contrast-wcag( $primary  ) !default;
-$slider-draghandle-border: $primary  !default;
+$slider-draghandle-bg: $kendo-color-primary !default;
+$slider-draghandle-text: k-contrast-legacy( $kendo-color-primary ) !default;
+$slider-draghandle-border: $kendo-color-primary !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: try-shade( $primary , .5 ) !default;
-$slider-draghandle-hovered-text: null !default;
-$slider-draghandle-hovered-border: $primary  !default;
-$slider-draghandle-hovered-gradient: null !default;
+$slider-draghandle-hover-bg: k-try-shade( $kendo-color-primary , .5 ) !default;
+$slider-draghandle-hover-text: null !default;
+$slider-draghandle-hover-border: $kendo-color-primary !default;
+$slider-draghandle-hover-gradient: null !default;
 
-$slider-draghandle-pressed-bg: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-bg: k-try-shade( $kendo-color-primary , 1.5 ) !default;
 $slider-draghandle-pressed-text: null !default;
-$slider-draghandle-pressed-border: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-border: k-try-shade( $kendo-color-primary , 1.5 ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: 0 0 0 2px rgba( $primary , .3 ) !default;
+$slider-draghandle-focus-shadow: 0 0 0 2px rgba( $kendo-color-primary , .3 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
 $slider-draghandle-transition-speed: .4s !default;
 $slider-draghandle-transition-function: cubic-bezier(.25, .8, .25, 1) !default;
 
-$slider-track-bg: try-shade( $component-bg, 1 ) !default;
-$slider-selection-bg: $primary !default;
+$slider-track-bg: k-try-shade( $kendo-component-bg, 1 ) !default;
+$slider-selection-bg: $kendo-color-primary !default;
 $slider-disabled-opacity: null !default;

package/scss/split-button/_index.scss

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

package/scss/split-button/_layout.scss

@@ -28,13 +28,3 @@
 
 }
 
-
-@include exports("split-button/layout/legacy") {
-
-    .k-ie .k-split-button {
-        .k-button {
-            @include border-radius( 0 );
-        }
-    }
-
-}

package/scss/splitter/_index.scss

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

package/scss/splitter/_layout.scss

@@ -13,7 +13,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         // Pane
         .k-pane {
@@ -48,9 +48,6 @@
         border-style: solid;
         outline: 0;
         position: absolute;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
         display: flex;
         align-items: center;
@@ -148,7 +145,6 @@
         .k-pane {
             position: relative;
             flex: 1 1 auto;
-            display: block; // ie10 + flex
             min-width: 0;
             max-width: 100%;
             min-height: 0;

package/scss/splitter/_variables.scss

@@ -4,9 +4,9 @@ $splitter-font-family: $font-family !default;
 $splitter-font-size: $font-size !default;
 $splitter-line-height: $line-height !default;
 
-$splitter-bg: $component-bg !default;
-$splitter-text: $component-text !default;
-$splitter-border: $component-border !default;
+$splitter-bg: $kendo-component-bg !default;
+$splitter-text: $kendo-component-text !default;
+$splitter-border: $kendo-component-border !default;
 
 $splitter-splitbar-size: 8px !default;
 $splitter-resize-icon-size: 10px !default;
@@ -17,8 +17,8 @@ $splitter-drag-icon-margin: 7px !default;
 $splitbar-bg: $base-bg !default;
 $splitbar-text: $base-text !default;
 
-$splitbar-hover-bg: try-shade( $splitbar-bg, .5 ) !default;
+$splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
 $splitbar-hover-text: $splitbar-text !default;
 
-$splitbar-selected-bg: $selected-bg !default;
-$splitbar-selected-text: $selected-text !default;
+$splitbar-selected-bg: $kendo-selected-bg !default;
+$splitbar-selected-text: $kendo-selected-text !default;

package/scss/spreadsheet/_index.scss

@@ -21,7 +21,7 @@
 
 
 // Component
-@import "_variables.scss";
-@import "images/image-default.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./images/image-default.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/spreadsheet/_layout.scss

@@ -16,7 +16,7 @@
         cursor: default;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 
         .k-vertical-align-center {
             position: relative;
@@ -43,7 +43,7 @@
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: $toolbar-padding-y;
+        padding: $kendo-toolbar-padding-y-md;
         display: inline-flex;
         flex-direction: row;
         position: absolute;
@@ -55,7 +55,7 @@
 
     // Tabstrip
     .k-spreadsheet-tabstrip {
-        padding-top: $toolbar-padding-y;
+        padding-top: $kendo-toolbar-padding-y-md;
         position: relative;
         z-index: 1;
     }
@@ -88,7 +88,7 @@
         [data-tool="merge"],
         [data-tool="freeze"] {
             width: auto;
-            min-width: calc( #{$form-line-height} * 1em );
+            min-width: calc( #{$kendo-form-line-height} * 1em );
         }
 
         .k-color-picker {
@@ -122,7 +122,7 @@
         flex: 1;
 
         > .k-i-formula-fx {
-            padding: 0 $padding-y;
+            padding: 0 $kendo-padding-md-y;
             box-sizing: content-box;
             border-width: 0 1px 0 0;
             border-style: solid;
@@ -199,7 +199,7 @@
 
     // Sheets bar
     .k-spreadsheet-sheets-bar {
-        padding: 0 0 map-get( $spacing, 1 ) map-get( $spacing, 1 );
+        padding: 0 0 k-map-get( $kendo-spacing, 1 ) k-map-get( $kendo-spacing, 1 );
         border-width: 1px 0 0;
         border-style: solid;
         border-color: inherit;
@@ -232,8 +232,8 @@
             }
 
             .k-spreadsheet-sheets-remove {
-                margin-right: $spacer / 2;
-                margin-left: -$spacer / 2;
+                margin-right: k-math-div( $spacer, 2 );
+                margin-left: - k-math-div( $spacer, 2 );
                 padding: 0;
                 line-height: 1;
                 display: inline-flex;
@@ -267,9 +267,6 @@
         height: 100%;
         border-color: inherit;
         box-sizing: border-box;
-        -webkit-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
         user-select: none;
         position: absolute;
         z-index: 2;
@@ -325,7 +322,6 @@
         width: 100%;
         height: 100%;
         overflow: scroll;
-        -webkit-overflow-scrolling: touch;
         position: absolute;
         z-index: 1;
 
@@ -555,7 +551,7 @@
 
 @include exports( "spreadsheet/filter/layout" ) {
 
-    $filter-menu-padding-left: calc( #{$icon-size} + #{2 * $padding-y} );
+    $filter-menu-padding-left: calc( #{$icon-size} + #{2 * $kendo-padding-md-y} );
 
     // Filter button
     .k-spreadsheet .k-filter-wrapper {
@@ -597,8 +593,8 @@
                 padding-left: $filter-menu-padding-left;
             }
             .k-icon {
-                margin-left: calc(-1 * ( #{$icon-size} + #{$padding-y} ) );
-                margin-right: $padding-y;
+                margin-left: calc(-1 * ( #{$icon-size} + #{$kendo-padding-md-y} ) );
+                margin-right: $kendo-padding-md-y;
             }
 
         }
@@ -611,7 +607,7 @@
             overflow-x: auto;
 
             .k-treeview {
-                padding: $padding-y;
+                padding: $kendo-padding-md-y;
                 overflow: visible;
             }
         }
@@ -636,15 +632,15 @@
             cursor: pointer;
 
             > .k-icon {
-                margin-right: $padding-y;
+                margin-right: $kendo-padding-md-y;
             }
         }
         .k-details-content,
         .k-columnmenu-item-content {
-            padding: map-get( $spacing, 2 );
+            padding: k-map-get( $kendo-spacing, 2 );
             display: flex;
             flex-flow: column nowrap;
-            gap: map-get( $spacing, 2 );
+            gap: k-map-get( $kendo-spacing, 2 );
 
             .k-filter-and {
                 width: min-content;
@@ -739,12 +735,12 @@
     .k-spreadsheet-format-cells {
 
         .k-spreadsheet-preview {
-            margin-top: ($spacer / 2);
+            margin-top: k-math-div( $spacer, 2 );
             text-align: center;
         }
 
         .k-list-scroller {
-            margin-top: ($spacer / 2);
+            margin-top: k-math-div( $spacer, 2 );
             height: 210px;
             border-width: 1px;
             border-style: solid;
@@ -774,7 +770,7 @@
         .k-page-orientation {
             position: absolute;
             right: 0;
-            top: ($spacer-y / 2);
+            top: k-math-div( $spacer-y, 2 );
 
             .k-icon {
                 font-size: 6em;
@@ -800,7 +796,7 @@
             min-width: 100%;
             width: $spreadsheet-insert-image-dialog-preview-width;
             height: $spreadsheet-insert-image-dialog-preview-height;
-            background-image: url(map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img));
+            background-image: url(k-map-get($data-uris, $spreadsheet-insert-image-dialog-preview-img));
             background-size: auto 70%;
             background-position: 50% 30%;
             background-repeat: no-repeat;

package/scss/spreadsheet/_theme.scss

@@ -23,10 +23,10 @@
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
         @include fill(
-            $header-text,
-            $header-bg,
-            $header-border,
-            $header-gradient
+            $kendo-component-header-text,
+            $kendo-component-header-bg,
+            $kendo-component-header-border,
+            $kendo-component-header-gradient
         );
     }
 
@@ -60,38 +60,38 @@
     .k-spreadsheet .k-selection-full,
     .k-spreadsheet .k-selection-partial {
         // TODO: consider extracting variables
-        background-color: rgba( $selected-bg, .25 );
+        background-color: rgba( $kendo-selected-bg, .25 );
     }
     .k-spreadsheet-selection {
-        border-color: $selected-bg;
-        background-color: rgba( $selected-bg, .25 );
-        box-shadow: inset 0 0 0 1px $selected-bg;
+        border-color: $kendo-selected-bg;
+        background-color: rgba( $kendo-selected-bg, .25 );
+        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
     }
     .k-spreadsheet .k-single-selection::after {
         border-color: $spreadsheet-bg;
-        background-color: $selected-bg;
+        background-color: $kendo-selected-bg;
     }
     .k-spreadsheet-active-cell {
-        box-shadow: inset 0 0 0 1px $selected-bg;
+        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
         background-color: $spreadsheet-bg;
 
         &.k-right {
-            box-shadow: inset 0 0 0 1px $selected-bg, inset -1px 0 0 1px $selected-bg;
+            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px 0 0 1px $kendo-selected-bg;
         }
 
         &.k-bottom {
-            box-shadow: inset 0 0 0 1px $selected-bg, inset 0 -1px 0 1px $selected-bg;
+            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset 0 -1px 0 1px $kendo-selected-bg;
         }
 
         &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px $selected-bg, inset -1px -1px 0 1px $selected-bg;
+            box-shadow: inset 0 0 0 1px $kendo-selected-bg, inset -1px -1px 0 1px $kendo-selected-bg;
         }
     }
 
     .k-spreadsheet .k-auto-fill {
-        border-color: $selected-bg;
-        background-color: rgba( $selected-bg, .25 );
-        box-shadow: inset 0 0 0 1px $selected-bg;
+        border-color: $kendo-selected-bg;
+        background-color: rgba( $kendo-selected-bg, .25 );
+        box-shadow: inset 0 0 0 1px $kendo-selected-bg;
     }
     .k-spreadsheet .k-auto-fill-punch {
         background-color: rgba( $spreadsheet-bg, .5 );
@@ -102,17 +102,17 @@
     .k-spreadsheet .k-resize-handle,
     .k-spreadsheet .k-resize-hint-handle,
     .k-spreadsheet .k-resize-hint-marker {
-        background-color: $primary;
+        background-color: $kendo-color-primary;
     }
 
     // Comments
     .k-spreadsheet-has-comment::after {
-        border-color: $primary $primary transparent transparent;
+        border-color: $kendo-color-primary $kendo-color-primary transparent transparent;
     }
 
     // Validation
     .k-dirty {
-        border-color: $error transparent transparent $error;
+        border-color: $kendo-color-error transparent transparent $kendo-color-error;
     }
 
 }
@@ -124,7 +124,7 @@
 
     // Filter button
     .k-spreadsheet .k-filter-range {
-        border-color: $primary;
+        border-color: $kendo-color-primary;
     }
     .k-spreadsheet-filter {
         @include fill(
@@ -227,7 +227,7 @@
 
             &:hover div,
             &.k-hover div {
-                color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
+                color: $spreadsheet-insert-image-dialog-overlay-hover-text;
             }
         }
     }
@@ -259,11 +259,11 @@
     [dir="rtl"] .k-spreadsheet {
 
         .k-spreadsheet-has-comment::after {
-            border-color: $primary transparent transparent $primary;
+            border-color: $kendo-color-primary transparent transparent $kendo-color-primary;
         }
 
         .k-dirty {
-            border-color: $error $error transparent transparent;
+            border-color: $kendo-color-error $kendo-color-error transparent transparent;
         }
 
     }

package/scss/spreadsheet/_variables.scss

@@ -4,9 +4,9 @@ $spreadsheet-font-family: $font-family !default;
 $spreadsheet-font-size: $font-size !default;
 $spreadsheet-line-height: $line-height !default;
 
-$spreadsheet-bg: $component-bg !default;
-$spreadsheet-text: $component-text !default;
-$spreadsheet-border: $component-border !default;
+$spreadsheet-bg: $kendo-component-bg !default;
+$spreadsheet-text: $kendo-component-text !default;
+$spreadsheet-border: $kendo-component-border !default;
 
 $spreadsheet-insert-image-dialog-border-style: dashed !default;
 $spreadsheet-insert-image-dialog-border-width: 2px !default;
@@ -14,22 +14,22 @@ $spreadsheet-insert-image-dialog-text-margin-bottom: 30px !default;
 $spreadsheet-insert-image-dialog-preview-width: 355px !default;
 $spreadsheet-insert-image-dialog-preview-height: 230px !default;
 $spreadsheet-insert-image-dialog-preview-img: "image-default.png" !default;
-$spreadsheet-insert-image-dialog-preview-border: $component-border !default;
+$spreadsheet-insert-image-dialog-preview-border: $kendo-component-border !default;
 $spreadsheet-insert-image-dialog-preview-border-radius: $kendo-border-radius-md !default;
 $spreadsheet-insert-image-dialog-preview-overlay-shadow: inset 0 0 0 2000px rgba(0, 0, 0, .5) !default;
 $spreadsheet-insert-image-dialog-preview-overlay-border-radius: $kendo-border-radius-md !default;
-$spreadsheet-insert-image-dialog-overlay-hovered-text: $component-bg !default;
+$spreadsheet-insert-image-dialog-overlay-hover-text: $kendo-component-bg !default;
 
 $spreadsheet-drawing-handle-width: 6px !default;
 $spreadsheet-drawing-handle-height: 6px !default;
 $spreadsheet-drawing-handle-border-style: solid !default;
 $spreadsheet-drawing-handle-border-width: 1px !default;
-$spreadsheet-drawing-handle-outline-color: $primary !default;
-$spreadsheet-drawing-handle-border-color: $selected-bg !default;
-$spreadsheet-drawing-handle-bg: $primary !default;
+$spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default;
+$spreadsheet-drawing-handle-border-color: $kendo-selected-bg !default;
+$spreadsheet-drawing-handle-bg: $kendo-color-primary !default;
 $spreadsheet-drawing-handle-border-radius: $kendo-border-radius-lg !default;
 
 $spreadsheet-drawing-outline-style: solid !default;
 $spreadsheet-drawing-outline-width: 2px !default;
 
-$spreadsheet-drawing-anchor-bg: rgba( $selected-bg, .25 ) !default;
+$spreadsheet-drawing-anchor-bg: rgba( $kendo-selected-bg, .25 ) !default;

package/scss/stepper/_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/stepper/_layout.scss

@@ -14,7 +14,7 @@
         display: block;
         position: relative;
         -webkit-touch-callout: none;
-        -webkit-tap-highlight-color: $rgba-transparent;
+        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
         // TODO: remove those once k-widget styles are removed. Link: https://github.com/telerik/kendo-themes/issues/1359
         color: inherit;
         background: none;
@@ -106,7 +106,7 @@
             z-index: 1;
         }
         .k-step-label:only-child {
-            @include border-radius( ($stepper-indicator-height + 2 * $stepper-indicator-border-width) / 2 );
+            @include border-radius( k-math-div( ( $stepper-indicator-height + 2 * $stepper-indicator-border-width ), 2 ) );
             padding: $stepper-label-padding-y $stepper-label-padding-x;
             border-width: 0;
         }

package/scss/stepper/_theme.scss

@@ -33,7 +33,7 @@
             .k-step-link:focus  {
                 // Labels only
                 .k-step-label:only-child {
-                    @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $component-border );
+                    @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-border );
                 }
             }
 
@@ -62,13 +62,13 @@
             );
         }
         .k-step-indicator::after {
-            @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $component-bg );
+            @include box-shadow( inset 0 0 0 $stepper-indicator-focus-size $kendo-component-bg );
         }
         .k-step-label:only-child {
             @include fill(
-                $component-text,
-                $component-bg,
-                $component-border
+                $kendo-component-text,
+                $kendo-component-bg,
+                $kendo-component-border
             );
         }