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

package/scss/skeleton/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/skeleton/_theme.scss";
+@import "@progress/kendo-theme-default/scss/skeleton/_theme.scss";

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,6 +9,6 @@
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/slider/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/slider/_layout.scss";
+@import "@progress/kendo-theme-default/scss/slider/_layout.scss";
 
 @include exports("slider/layout/material") {
     .k-slider {
@@ -6,7 +6,7 @@
             margin: 0;
 
             &::after {
-                $tick-offset: -$slider-tick-size / 2;
+                $tick-offset: - k-math-div( $slider-tick-size, 2 );
 
                 content: "";
                 position: absolute;

package/scss/slider/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/slider/_theme.scss";
+@import "@progress/kendo-theme-default/scss/slider/_theme.scss";
 
 @include exports("slider/theme/material") {
 
@@ -11,14 +11,14 @@
         }
 
         .k-tick::after {
-            @include fill( $bg: $body-text );
+            @include fill( $bg: $kendo-body-text );
         }
 
         .k-draghandle {
             box-sizing: border-box;
 
             &:focus {
-                @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: 22px !default;
 $slider-button-size: 36px !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: 2px !default;
 $slider-draghandle-size: 14px !default;
@@ -18,28 +18,28 @@ $slider-draghandle-border-width: 0px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: 20px !default;
 
-$slider-draghandle-bg: $primary !default;
-$slider-draghandle-text: $primary-contrast !default;
-$slider-draghandle-border: $primary !default;
+$slider-draghandle-bg: $kendo-color-primary !default;
+$slider-draghandle-text: $kendo-color-primary-contrast !default;
+$slider-draghandle-border: $kendo-color-primary !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: null !default;
-$slider-draghandle-hovered-text: null !default;
-$slider-draghandle-hovered-border: null !default;
-$slider-draghandle-hovered-gradient: null !default;
+$slider-draghandle-hover-bg: null !default;
+$slider-draghandle-hover-text: null !default;
+$slider-draghandle-hover-border: null !default;
+$slider-draghandle-hover-gradient: null !default;
 
 $slider-draghandle-pressed-bg: null !default;
 $slider-draghandle-pressed-text: null !default;
 $slider-draghandle-pressed-border: null !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: 0 0 0 11px rgba( $primary, .25 ) !default;
+$slider-draghandle-focus-shadow: 0 0 0 11px rgba( $kendo-color-primary, .25 ) !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: k-try-tint( $primary, 8 ) !default;
-$slider-selection-bg: $primary !default;
+$slider-track-bg: k-try-tint( $kendo-color-primary, 8 ) !default;
+$slider-selection-bg: $kendo-color-primary !default;
 $slider-disabled-opacity: .65 !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

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/split-button/_layout.scss";
+@import "@progress/kendo-theme-default/scss/split-button/_layout.scss";

package/scss/split-button/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/split-button/_theme.scss";
+@import "@progress/kendo-theme-default/scss/split-button/_theme.scss";

package/scss/split-button/_variables.scss

@@ -6,10 +6,10 @@ $kendo-split-button-focus-shadow: $kendo-button-focus-shadow !default;
 
 /// Horizontal padding of the arrow button.
 /// @group split-button
-$kendo-split-button-arrow-padding-x: k-map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-sm: k-map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-md: k-map-get( $spacing, 1 ) !default;
-$kendo-split-button-arrow-padding-x-lg: k-map-get( $spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-sm: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-md: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-split-button-arrow-padding-x-lg: k-map-get( $kendo-spacing, 1 ) !default;
 
 /// Vertical padding of the arrow button.
 /// @group split-button

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

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/splitter/_layout.scss";
+@import "@progress/kendo-theme-default/scss/splitter/_layout.scss";

package/scss/splitter/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/splitter/_theme.scss";
+@import "@progress/kendo-theme-default/scss/splitter/_theme.scss";

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;
@@ -15,10 +15,10 @@ $splitter-drag-handle-thickness: 2px !default;
 $splitter-drag-icon-margin: 7px !default;
 
 $splitbar-bg: k-try-shade( $splitter-bg, 1 ) !default;
-$splitbar-text: $subtle-text !default;
+$splitbar-text: $kendo-subtle-text !default;
 
 $splitbar-hover-bg: k-try-shade( $splitbar-bg, .5 ) !default;
 $splitbar-hover-text: $splitbar-text !default;
 
-$splitbar-selected-bg: $primary !default;
-$splitbar-selected-text: $primary-contrast !default;
+$splitbar-selected-bg: $kendo-color-primary !default;
+$splitbar-selected-text: $kendo-color-primary-contrast !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

@@ -1,11 +1,11 @@
-@import "~@progress/kendo-theme-default/scss/spreadsheet/_layout.scss";
+@import "@progress/kendo-theme-default/scss/spreadsheet/_layout.scss";
 
 @include exports( "spreadsheet/layout/material" ) {
 
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        padding: k-map-get( $spacing, 1 );
+        padding: k-map-get( $kendo-spacing, 1 );
 
         .k-button {
             border-radius: 50%;
@@ -28,7 +28,7 @@
         padding: 0;
 
         .k-spreadsheet-sheets-bar-add {
-            margin: k-map-get( $spacing, 1 );
+            margin: k-map-get( $kendo-spacing, 1 );
             border-radius: 50%;
             color: inherit;
             background: none;
@@ -47,19 +47,3 @@
     }
 
 }
-
-
-
-
-@include exports( "spreadsheet/window/layout/material" ) {
-
-    .k-spreadsheet-window {
-        width: auto;
-        box-sizing: border-box;
-
-        .k-actions {
-            margin: $spacer (-$window-inner-padding-x) (-$window-inner-padding-y);
-        }
-    }
-
-}

package/scss/spreadsheet/_theme.scss

@@ -14,36 +14,36 @@
     .k-spreadsheet > .k-tabstrip-wrapper {
 
         .k-tabstrip-items-wrapper {
-            color: $primary-contrast;
-            background-color: $primary;
+            color: $kendo-color-primary-contrast;
+            background-color: $kendo-color-primary;
         }
         .k-tabstrip-items .k-item {
             color: inherit;
         }
         .k-tabstrip-items .k-item.k-active::after {
-            border-color: $primary-contrast;
+            border-color: $kendo-color-primary-contrast;
         }
     }
 
 
     // Quick access toolbar
     .k-spreadsheet-quick-access-toolbar {
-        color: $primary-contrast;
-        background-color: $primary;
+        color: $kendo-color-primary-contrast;
+        background-color: $kendo-color-primary;
     }
 
 
     // Spreadsheet footer
     .k-spreadsheet-sheets-bar {
         @include fill(
-            $toolbar-text,
-            k-try-shade( $toolbar-bg, .5 ),
+            $kendo-toolbar-text,
+            k-try-shade( $kendo-toolbar-bg, .5 ),
             inherit,
-            $toolbar-gradient
+            $kendo-toolbar-gradient
         );
 
         .k-tabstrip-items .k-item.k-active {
-            border-color: $secondary;
+            border-color: $kendo-color-secondary;
         }
     }
 
@@ -52,8 +52,8 @@
     .k-spreadsheet-top-corner,
     .k-spreadsheet-row-header,
     .k-spreadsheet-column-header {
-        border-color: $component-border;
-        background-color: k-try-shade( $component-bg, 1 );
+        border-color: $kendo-component-border;
+        background-color: k-try-shade( $kendo-component-bg, 1 );
     }
 
 
@@ -69,14 +69,14 @@
 
     // Cell editor
     .k-spreadsheet-cell-editor {
-        color: $component-text;
-        background-color: $component-bg;
+        color: $kendo-component-text;
+        background-color: $kendo-component-bg;
     }
 
 
     // Cells
     .k-spreadsheet-merged-cell {
-        background-color: $component-bg;
+        background-color: $kendo-component-bg;
     }
 
 
@@ -85,44 +85,44 @@
     .k-spreadsheet .k-selection-partial {
         background-color: rgba( black, .04 );
 
-        &::after { border-color: $secondary; }
+        &::after { border-color: $kendo-color-secondary; }
     }
 
 
     .k-spreadsheet-selection {
-        border-color: $primary;
-        background-color: rgba( $primary, .25 );
-        box-shadow: inset 0 0 0 1px $primary;
+        border-color: $kendo-color-primary;
+        background-color: rgba( $kendo-color-primary, .25 );
+        box-shadow: inset 0 0 0 1px $kendo-color-primary;
     }
 
     .k-spreadsheet .k-single-selection::after {
-        border-color: $component-bg;
-        background-color: $primary;
+        border-color: $kendo-component-bg;
+        background-color: $kendo-color-primary;
     }
     .k-spreadsheet-active-cell {
-        box-shadow: inset 0 0 0 1px $primary;
-        background-color: $component-bg;
+        box-shadow: inset 0 0 0 1px $kendo-color-primary;
+        background-color: $kendo-component-bg;
 
         &.k-right {
-            box-shadow: inset 0 0 0 1px $primary, inset -1px 0 0 1px $primary;
+            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px 0 0 1px $kendo-color-primary;
         }
 
         &.k-bottom {
-            box-shadow: inset 0 0 0 1px $primary, inset 0 -1px 0 1px $primary;
+            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset 0 -1px 0 1px $kendo-color-primary;
         }
 
         &.k-bottom.k-right {
-            box-shadow: inset 0 0 0 1px $primary, inset -1px -1px 0 1px $primary;
+            box-shadow: inset 0 0 0 1px $kendo-color-primary, inset -1px -1px 0 1px $kendo-color-primary;
         }
     }
 
     .k-spreadsheet .k-auto-fill {
-        border-color: $primary;
-        background-color: rgba( $primary, .25 );
-        box-shadow: inset 0 0 0 1px $primary;
+        border-color: $kendo-color-primary;
+        background-color: rgba( $kendo-color-primary, .25 );
+        box-shadow: inset 0 0 0 1px $kendo-color-primary;
     }
     .k-spreadsheet .k-auto-fill-punch {
-        background-color: rgba( $component-bg, .5 );
+        background-color: rgba( $kendo-component-bg, .5 );
     }
 
 
@@ -130,17 +130,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;
     }
 
 }
@@ -152,7 +152,7 @@
 
     // Filter button
     .k-spreadsheet .k-filter-range {
-        border-color: $primary;
+        border-color: $kendo-color-primary;
     }
     .k-spreadsheet-filter {
         @include fill(
@@ -189,9 +189,9 @@
 
         .k-spreadsheet-value-treeview-wrapper {
             @include fill(
-                $component-text,
-                $component-bg,
-                $component-border
+                $kendo-component-text,
+                $kendo-component-bg,
+                $kendo-component-border
             );
         }
     }
@@ -214,7 +214,7 @@
 
             &:hover div,
             &.k-hover div {
-                color: $spreadsheet-insert-image-dialog-overlay-hovered-text;
+                color: $spreadsheet-insert-image-dialog-overlay-hover-text;
             }
         }
     }
@@ -276,11 +276,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( black, .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: $primary !default;
-$spreadsheet-drawing-handle-bg: $primary !default;
+$spreadsheet-drawing-handle-outline-color: $kendo-color-primary !default;
+$spreadsheet-drawing-handle-border-color: $kendo-color-primary !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

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/stepper/_layout.scss";
+@import "@progress/kendo-theme-default/scss/stepper/_layout.scss";
 
 @include exports("stepper/layout/material") {
 

package/scss/stepper/_theme.scss

@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/stepper/_theme.scss";
+@import "@progress/kendo-theme-default/scss/stepper/_theme.scss";

package/scss/stepper/_variables.scss

@@ -12,11 +12,11 @@ $stepper-inline-content-padding-x: 20px !default;
 $stepper-inline-content-padding-y: 10px !default;
 
 $stepper-font-size: $font-size !default;
-$stepper-line-height: (20 / 14) !default;
+$stepper-line-height: k-math-div( 20, 14 ) !default;
 $stepper-font-family: $font-family !default;
 
 $stepper-bg: null !default;
-$stepper-text: $component-text !default;
+$stepper-text: $kendo-component-text !default;
 $stepper-border: null !default;
 
 $stepper-indicator-width: 28px !default;
@@ -29,19 +29,19 @@ $stepper-indicator-focus-size: 2px !default;
 $stepper-indicator-focus-offset: 3px !default;
 $stepper-indicator-focus-calc-offset: calc( #{$stepper-indicator-focus-border-width} + #{$stepper-indicator-focus-offset} ) !default;
 
-$stepper-indicator-bg: $component-bg !default;
-$stepper-indicator-text: $component-text !default;
-$stepper-indicator-border: $component-border !default;
+$stepper-indicator-bg: $kendo-component-bg !default;
+$stepper-indicator-text: $kendo-component-text !default;
+$stepper-indicator-border: $kendo-component-border !default;
 
 $stepper-indicator-hover-bg: k-try-shade( $stepper-indicator-bg ) !default;
 $stepper-indicator-hover-text: null !default;
 $stepper-indicator-hover-border: null !default;
 
 $stepper-indicator-disabled-bg: null !default;
-$stepper-indicator-disabled-text: $disabled-text !default;
+$stepper-indicator-disabled-text: $kendo-disabled-text !default;
 $stepper-indicator-disabled-border: null !default;
 
-$stepper-indicator-done-bg: $primary !default;
+$stepper-indicator-done-bg: $kendo-color-primary !default;
 $stepper-indicator-done-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-border: $stepper-indicator-done-bg !default;
 
@@ -49,7 +49,7 @@ $stepper-indicator-done-hover-bg: k-try-shade( $stepper-indicator-done-bg ) !def
 $stepper-indicator-done-hover-text: null !default;
 $stepper-indicator-done-hover-border: null !default;
 
-$stepper-indicator-done-disabled-bg: k-color-mix( $stepper-indicator-done-bg, $component-bg, 60%) !default;
+$stepper-indicator-done-disabled-bg: k-color-mix( $stepper-indicator-done-bg, $kendo-component-bg, 60%) !default;
 $stepper-indicator-done-disabled-text: k-contrast-color( $stepper-indicator-done-bg ) !default;
 $stepper-indicator-done-disabled-border: $stepper-indicator-done-disabled-bg !default;
 
@@ -66,12 +66,12 @@ $stepper-indicator-current-disabled-text: $stepper-indicator-done-disabled-text
 $stepper-indicator-current-disabled-border: $stepper-indicator-done-disabled-border !default;
 
 $stepper-label-text: null !default;
-$stepper-label-success-text: $success !default;
-$stepper-label-error-text: $error !default;
+$stepper-label-success-text: $kendo-color-success !default;
+$stepper-label-error-text: $kendo-color-error !default;
 $stepper-label-hover-text: null !default;
 $stepper-label-disabled-text: k-map-get( $theme, disabled-text ) !default;
 
-$stepper-optional-label-text: $subtle-text !default;
+$stepper-optional-label-text: $kendo-subtle-text !default;
 $stepper-optional-label-opacity: null !default;
 $stepper-optional-label-font-size: $font-size-sm !default;
 $stepper-optional-label-font-style: null !default;

package/scss/switch/_index.scss

@@ -3,10 +3,10 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../utils/_border.scss";
+// @import "../utils/_border.scss";
 
 
 // Component
-@import "_variables.scss";
-@import "_layout.scss";
-@import "_theme.scss";
+@import "./_variables.scss";
+@import "./_layout.scss";
+@import "./_theme.scss";

package/scss/switch/_layout.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/switch/_layout.scss";
+@import "@progress/kendo-theme-default/scss/switch/_layout.scss";
 
 @include exports( "switch/layout/material" ) {
 

package/scss/switch/_theme.scss

@@ -1,4 +1,4 @@
-@import "~@progress/kendo-theme-default/scss/switch/_theme.scss";
+@import "@progress/kendo-theme-default/scss/switch/_theme.scss";
 
 @include exports( "switch/theme/material" ) {
 
@@ -14,7 +14,7 @@
             background-color: inherit;
         }
         &.k-switch-off .k-switch-thumb::before {
-            background-color: if( $dark-theme == true, $white, $black );
+            background-color: if( $dark-theme == true, $kendo-color-white, $kendo-color-black );
         }
     }
 

package/scss/switch/_variables.scss

@@ -30,7 +30,7 @@ $kendo-switch-sizes: (
 
 /// The background of the track when the switch is not checked.
 /// @group switch
-$kendo-switch-off-track-bg: rgba( if( $dark-theme, $white, $black ), .38 ) !default;
+$kendo-switch-off-track-bg: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .38 ) !default;
 /// The text color of the track when the switch is not checked.
 /// @group switch
 $kendo-switch-off-track-text: null !default;
@@ -85,7 +85,7 @@ $kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is not checked.
 /// @group switch
-$kendo-switch-off-thumb-bg: if( $dark-theme, $black, $white ) !default;
+$kendo-switch-off-thumb-bg: if( $dark-theme, $kendo-color-black, $kendo-color-white ) !default;
 /// The text color of the thumb when the switch is not checked.
 /// @group switch
 $kendo-switch-off-thumb-text: null !default;
@@ -112,7 +112,7 @@ $kendo-switch-off-thumb-hover-gradient: null !default;
 
 /// The background of the track when the switch is checked.
 /// @group switch
-$kendo-switch-on-track-bg: rgba( $primary, .54 ) !default;
+$kendo-switch-on-track-bg: rgba( $kendo-color-primary, .54 ) !default;
 /// The text color of the track when the switch is checked.
 /// @group switch
 $kendo-switch-on-track-text: null !default;
@@ -167,7 +167,7 @@ $kendo-switch-on-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is checked.
 /// @group switch
-$kendo-switch-on-thumb-bg: $primary !default;
+$kendo-switch-on-thumb-bg: $kendo-color-primary !default;
 /// The text color of the thumb when the switch is checked.
 /// @group switch
 $kendo-switch-on-thumb-text: null !default;