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

package/scss/dataviz/_layout.scss

@@ -15,33 +15,33 @@
 
     // Exported variables
     .k-var--chart-font {
-        font-size: $chart-font-size;
+        font-size: $kendo-chart-font-size;
     }
 
     .k-var--chart-title-font {
-        font-size: $chart-title-font-size;
+        font-size: $kendo-chart-title-font-size;
     }
 
     .k-var--chart-pane-title-font {
-        font-size: $chart-pane-title-font-size;
-        font-weight: $chart-pane-title-font-weight;
+        font-size: $kendo-chart-pane-title-font-size;
+        font-weight: $kendo-chart-pane-title-font-weight;
     }
 
     .k-var--chart-label-font {
-        font-size: $chart-label-font-size;
+        font-size: $kendo-chart-label-font-size;
     }
 
     // Elements
     .k-chart,
     .k-sparkline,
     .k-stockchart {
-        border-width: $chart-border-width;
+        border-width: $kendo-chart-border-width;
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $chart-font-family;
-        font-size: $chart-font-size;
-        line-height: $chart-line-height;
+        font-family: $kendo-chart-font-family;
+        font-size: $kendo-chart-font-size;
+        line-height: $kendo-chart-line-height;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
@@ -62,7 +62,7 @@
 
     .k-chart-tooltip-wrapper .k-animation-container-shown,
     .k-chart-tooltip-wrapper.k-animation-container-shown {
-        transition: $chart-tooltip-transition;
+        transition: $kendo-chart-tooltip-transition;
     }
 
     .k-sparkline-tooltip-wrapper,
@@ -83,9 +83,9 @@
 
     .k-chart-tooltip {
         @include border-radius( $kendo-border-radius-md );
-        font-size: $chart-tooltip-font-size;
-        line-height: $line-height;
-        padding: $tooltip-padding-y $tooltip-padding-x;
+        font-size: $kendo-chart-tooltip-font-size;
+        line-height: $kendo-line-height-md;
+        padding: $kendo-tooltip-padding-y $kendo-tooltip-padding-x;
     }
 
     .k-chart-tooltip th {
@@ -98,7 +98,7 @@
         width: auto;
         text-align: left;
         padding: $kendo-padding-sm-y $kendo-padding-sm-x;
-        line-height: $line-height;
+        line-height: $kendo-line-height-md;
         vertical-align: middle;
     }
 
@@ -137,8 +137,8 @@
 
     .k-handle {
         @include border-radius( 50% );
-        width: $selection-handle-size;
-        height: $selection-handle-size;
+        width: $kendo-chart-selection-handle-size;
+        height: $kendo-chart-selection-handle-size;
         border-width: 1px;
         border-style: solid;
         z-index: 1;
@@ -152,31 +152,31 @@
     }
 
     .k-left-handle {
-        left: - k-math-div( $selection-handle-size, 2 );
+        left: - k-math-div( $kendo-chart-selection-handle-size, 2 );
     }
 
     .k-right-handle {
-        right: - k-math-div( $selection-handle-size, 2 );
+        right: - k-math-div( $kendo-chart-selection-handle-size, 2 );
     }
 
     .k-left-handle div {
-        margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
-        padding: ($selection-handle-size * 2) (k-math-div( $selection-handle-size, 1.5 ) * 2) 0 0;
+        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
+        padding: ($kendo-chart-selection-handle-size * 2) (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2) 0 0;
     }
 
     .k-right-handle div {
-        margin: -($selection-handle-size) 0 0 (- k-math-div( $selection-handle-size, 1.5 ));
-        padding: ($selection-handle-size * 2) 0 0 (k-math-div( $selection-handle-size, 1.5 ) * 2);
+        margin: -($kendo-chart-selection-handle-size) 0 0 (- k-math-div( $kendo-chart-selection-handle-size, 1.5 ));
+        padding: ($kendo-chart-selection-handle-size * 2) 0 0 (k-math-div( $kendo-chart-selection-handle-size, 1.5 ) * 2);
     }
 
     .k-left-handle.k-handle-active div {
-        margin-left: -($selection-handle-size * 2);
-        padding-left: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
+        margin-left: -($kendo-chart-selection-handle-size * 2);
+        padding-left: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
     }
 
     .k-right-handle.k-handle-active div {
-        margin-left: -($selection-handle-size * 2);
-        padding-right: ($selection-handle-size * 2) + k-math-div( $selection-handle-size, 1.5 );
+        margin-left: -($kendo-chart-selection-handle-size * 2);
+        padding-right: ($kendo-chart-selection-handle-size * 2) + k-math-div( $kendo-chart-selection-handle-size, 1.5 );
     }
 
     .k-mask {
@@ -277,9 +277,9 @@
         border-width: 1px;
         border-style: solid;
         outline: 0;
-        font-family: $treemap-font-family;
-        font-size: $treemap-font-size;
-        line-height: $treemap-line-height;
+        font-family: $kendo-treemap-font-family;
+        font-size: $kendo-treemap-font-size;
+        line-height: $kendo-treemap-line-height;
         display: block;
         overflow: hidden;
         -webkit-touch-callout: none;
@@ -307,13 +307,13 @@
             border-width: 0 0 1px;
             border-style: solid;
             border-color: inherit;
-            font-size: $font-size;
+            font-size: $kendo-font-size-md;
             background-position: 0 0;
             background-repeat: repeat-x;
         }
         .k-treemap-title-vertical {
             padding: $kendo-padding-sm-x $kendo-padding-sm-y;
-            width: $line-height-em;
+            width: $kendo-line-height-em;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
@@ -343,10 +343,10 @@
             right: 0;
         }
         .k-treemap-title + .k-treemap-wrap {
-            top: calc( #{$kendo-padding-sm-y * 2} + (#{$line-height} * #{$font-size}) + 1px);
+            top: calc( #{$kendo-padding-sm-y * 2} + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
         .k-treemap-title-vertical + .k-treemap-wrap {
-            left: calc( #{$kendo-padding-sm-y * 2} + (#{$line-height} * #{$font-size}) + 1px);
+            left: calc( #{$kendo-padding-sm-y * 2} + (#{$kendo-line-height-md} * #{$kendo-font-size-md}) + 1px);
         }
 
 
@@ -404,13 +404,13 @@
     $exported: (
         primary: $kendo-color-primary,
         primary-contrast: $kendo-color-primary-contrast,
-        base: $base-bg,
-        background: $chart-bg,
+        base: $kendo-base-bg,
+        background: $kendo-chart-bg,
 
         border-radius: $kendo-border-radius-md,
 
-        normal-background: $base-bg,
-        normal-text-color: $base-text,
+        normal-background: $kendo-base-bg,
+        normal-text-color: $kendo-base-text,
         hover-background: $kendo-hover-bg,
         hover-text-color: $kendo-hover-text,
         selected-background: $kendo-selected-bg,
@@ -421,46 +421,46 @@
         warning: $kendo-color-warning,
         error: $kendo-color-error,
 
-        series-a: $series-a,
-        series-b: $series-b,
-        series-c: $series-c,
-        series-d: $series-d,
-        series-e: $series-e,
-        series-f: $series-f,
-
-        series-1: $series-1,
-        series-2: $series-2,
-        series-3: $series-3,
-        series-4: $series-4,
-        series-5: $series-5,
-        series-6: $series-6,
-        series-7: $series-7,
-        series-8: $series-8,
-        series-9: $series-9,
-        series-10: $series-10,
-        series-11: $series-11,
-        series-12: $series-12,
-        series-13: $series-13,
-        series-14: $series-14,
-        series-15: $series-15,
-        series-16: $series-16,
-        series-17: $series-17,
-        series-18: $series-18,
-        series-19: $series-19,
-        series-20: $series-20,
-        series-21: $series-21,
-        series-22: $series-22,
-        series-23: $series-23,
-        series-24: $series-24,
-        series-25: $series-25,
-        series-26: $series-26,
-        series-27: $series-27,
-        series-28: $series-28,
-        series-29: $series-29,
-        series-30: $series-30,
+        series-a: $kendo-series-a,
+        series-b: $kendo-series-b,
+        series-c: $kendo-series-c,
+        series-d: $kendo-series-d,
+        series-e: $kendo-series-e,
+        series-f: $kendo-series-f,
+
+        series-1: $kendo-series-1,
+        series-2: $kendo-series-2,
+        series-3: $kendo-series-3,
+        series-4: $kendo-series-4,
+        series-5: $kendo-series-5,
+        series-6: $kendo-series-6,
+        series-7: $kendo-series-7,
+        series-8: $kendo-series-8,
+        series-9: $kendo-series-9,
+        series-10: $kendo-series-10,
+        series-11: $kendo-series-11,
+        series-12: $kendo-series-12,
+        series-13: $kendo-series-13,
+        series-14: $kendo-series-14,
+        series-15: $kendo-series-15,
+        series-16: $kendo-series-16,
+        series-17: $kendo-series-17,
+        series-18: $kendo-series-18,
+        series-19: $kendo-series-19,
+        series-20: $kendo-series-20,
+        series-21: $kendo-series-21,
+        series-22: $kendo-series-22,
+        series-23: $kendo-series-23,
+        series-24: $kendo-series-24,
+        series-25: $kendo-series-25,
+        series-26: $kendo-series-26,
+        series-27: $kendo-series-27,
+        series-28: $kendo-series-28,
+        series-29: $kendo-series-29,
+        series-30: $kendo-series-30,
 
         gauge-pointer: $kendo-color-primary,
-        gauge-track: k-try-shade( $chart-bg )
+        gauge-track: k-try-shade( $kendo-chart-bg )
     );
 
     @each $name, $value in $exported {

package/scss/dataviz/_theme.scss

@@ -1,47 +1,47 @@
 @include exports("dataviz/charts/theme") {
     // Exported variables
     .k-var--chart-inactive {
-        background-color: $chart-inactive;
+        background-color: $kendo-chart-inactive;
     }
 
     .k-var--chart-major-lines {
-        background-color: $chart-major-lines;
+        background-color: $kendo-chart-major-lines;
     }
 
     .k-var--chart-minor-lines {
-        background-color: $chart-minor-lines;
+        background-color: $kendo-chart-minor-lines;
     }
 
     .k-var--chart-area-opacity {
-        opacity: $chart-area-opacity;
+        opacity: $kendo-chart-area-opacity;
     }
 
     .k-var--chart-area-inactive-opacity {
-        opacity: $chart-area-inactive-opacity;
+        opacity: $kendo-chart-area-inactive-opacity;
     }
 
     .k-var--chart-line-inactive-opacity {
-        opacity: $chart-line-inactive-opacity;
+        opacity: $kendo-chart-line-inactive-opacity;
     }
 
     .k-var--chart-notes-background {
-        background-color: $chart-notes-background;
+        background-color: $kendo-chart-notes-background;
     }
 
     .k-var--chart-notes-border {
-        background-color: $chart-notes-border;
+        background-color: $kendo-chart-notes-border;
     }
 
     .k-var--chart-notes-lines {
-        background-color: $chart-notes-lines;
+        background-color: $kendo-chart-notes-lines;
     }
 
     .k-var--chart-crosshair-background {
-        background-color: $chart-crosshair-background;
+        background-color: $kendo-chart-crosshair-background;
     }
 
     .k-var--chart-error-bars-background {
-        background-color: $error-bars-background;
+        background-color: $kendo-chart-error-bars-background;
     }
 
     // Elements
@@ -49,9 +49,9 @@
     .k-sparkline,
     .k-stockchart {
         @include fill(
-            $chart-text,
+            $kendo-chart-text,
             transparent,
-            $chart-border
+            $kendo-chart-border
         );
 
         .k-popup {
@@ -71,14 +71,14 @@
 
     .k-chart-crosshair-tooltip,
     .k-chart-shared-tooltip {
-        color: $chart-crosshair-shared-tooltip-color;
-        background-color: $chart-crosshair-shared-tooltip-background;
-        border-color: $chart-crosshair-shared-tooltip-border;
+        color: $kendo-chart-crosshair-shared-tooltip-color;
+        background-color: $kendo-chart-crosshair-shared-tooltip-background;
+        border-color: $kendo-chart-crosshair-shared-tooltip-border;
     }
 
     .k-selection {
-        border-color: $selection-border-color;
-        box-shadow: $selection-shadow;
+        border-color: $kendo-chart-selection-border-color;
+        box-shadow: $kendo-chart-selection-shadow;
     }
 
     .k-selection-bg {
@@ -87,6 +87,8 @@
 
     .k-handle {
         cursor: e-resize;
+
+        // TODO: refactor and remove button dependency
         @include fill(
             $kendo-button-text,
             $kendo-button-bg,

package/scss/dataviz/_variables.scss

@@ -1,135 +1,139 @@
+@import "../button/_variables.scss";
+
+
 // Chart
+
 /// The first base series color and its light and dark shades.
 /// @group charts
-$series-a: #ff6358 !default;
-$series-a-dark: k-color-mix(black, $series-a, 25%) !default;
-$series-a-darker: k-color-mix(black, $series-a, 50%) !default;
-$series-a-light: k-color-mix(white, $series-a, 25%) !default;
-$series-a-lighter: k-color-mix(white, $series-a, 50%) !default;
+$kendo-series-a: #ff6358 !default;
+$kendo-series-a-dark: k-color-mix(black, $kendo-series-a, 25%) !default;
+$kendo-series-a-darker: k-color-mix(black, $kendo-series-a, 50%) !default;
+$kendo-series-a-light: k-color-mix(white, $kendo-series-a, 25%) !default;
+$kendo-series-a-lighter: k-color-mix(white, $kendo-series-a, 50%) !default;
 
 /// The second base series color and its light and dark shades.
 /// @group charts
-$series-b: #ffe162 !default;
-$series-b-dark: k-color-mix(black, $series-b, 25%) !default;
-$series-b-darker: k-color-mix(black, $series-b, 50%) !default;
-$series-b-light: k-color-mix(white, $series-b, 25%) !default;
-$series-b-lighter: k-color-mix(white, $series-b, 50%) !default;
+$kendo-series-b: #ffe162 !default;
+$kendo-series-b-dark: k-color-mix(black, $kendo-series-b, 25%) !default;
+$kendo-series-b-darker: k-color-mix(black, $kendo-series-b, 50%) !default;
+$kendo-series-b-light: k-color-mix(white, $kendo-series-b, 25%) !default;
+$kendo-series-b-lighter: k-color-mix(white, $kendo-series-b, 50%) !default;
 
 /// The third base series color and its light and dark shades.
 /// @group charts
-$series-c: #4cd180 !default;
-$series-c-dark: k-color-mix(black, $series-c, 25%) !default;
-$series-c-darker: k-color-mix(black, $series-c, 50%) !default;
-$series-c-light: k-color-mix(white, $series-c, 25%) !default;
-$series-c-lighter: k-color-mix(white, $series-c, 50%) !default;
+$kendo-series-c: #4cd180 !default;
+$kendo-series-c-dark: k-color-mix(black, $kendo-series-c, 25%) !default;
+$kendo-series-c-darker: k-color-mix(black, $kendo-series-c, 50%) !default;
+$kendo-series-c-light: k-color-mix(white, $kendo-series-c, 25%) !default;
+$kendo-series-c-lighter: k-color-mix(white, $kendo-series-c, 50%) !default;
 
 /// The fourth base series color and its light and dark shades.
 /// @group charts
-$series-d: #4b5ffa !default;
-$series-d-dark: k-color-mix(black, $series-d, 25%) !default;
-$series-d-darker: k-color-mix(black, $series-d, 50%) !default;
-$series-d-light: k-color-mix(white, $series-d, 25%) !default;
-$series-d-lighter: k-color-mix(white, $series-d, 50%) !default;
+$kendo-series-d: #4b5ffa !default;
+$kendo-series-d-dark: k-color-mix(black, $kendo-series-d, 25%) !default;
+$kendo-series-d-darker: k-color-mix(black, $kendo-series-d, 50%) !default;
+$kendo-series-d-light: k-color-mix(white, $kendo-series-d, 25%) !default;
+$kendo-series-d-lighter: k-color-mix(white, $kendo-series-d, 50%) !default;
 
 /// The fifth base series color and its light and dark shades.
 /// @group charts
-$series-e: #ac58ff !default;
-$series-e-dark: k-color-mix(black, $series-e, 25%) !default;
-$series-e-darker: k-color-mix(black, $series-e, 50%) !default;
-$series-e-light: k-color-mix(white, $series-e, 25%) !default;
-$series-e-lighter: k-color-mix(white, $series-e, 50%) !default;
+$kendo-series-e: #ac58ff !default;
+$kendo-series-e-dark: k-color-mix(black, $kendo-series-e, 25%) !default;
+$kendo-series-e-darker: k-color-mix(black, $kendo-series-e, 50%) !default;
+$kendo-series-e-light: k-color-mix(white, $kendo-series-e, 25%) !default;
+$kendo-series-e-lighter: k-color-mix(white, $kendo-series-e, 50%) !default;
 
 /// The sixth base series color and its light and dark shades.
 /// @group charts
-$series-f: #ff5892 !default;
-$series-f-dark: k-color-mix(black, $series-f, 25%) !default;
-$series-f-darker: k-color-mix(black, $series-f, 50%) !default;
-$series-f-light: k-color-mix(white, $series-f, 25%) !default;
-$series-f-lighter: k-color-mix(white, $series-f, 50%) !default;
+$kendo-series-f: #ff5892 !default;
+$kendo-series-f-dark: k-color-mix(black, $kendo-series-f, 25%) !default;
+$kendo-series-f-darker: k-color-mix(black, $kendo-series-f, 50%) !default;
+$kendo-series-f-light: k-color-mix(white, $kendo-series-f, 25%) !default;
+$kendo-series-f-lighter: k-color-mix(white, $kendo-series-f, 50%) !default;
 
 /// The series colors in order:
 /// base, light, dark, lighter, darker
 /// @group charts
-$series-1: $series-a !default;
-$series-2: $series-b !default;
-$series-3: $series-c !default;
-$series-4: $series-d !default;
-$series-5: $series-e !default;
-$series-6: $series-f !default;
-$series-7: $series-a-light !default;
-$series-8: $series-b-light !default;
-$series-9: $series-c-light !default;
-$series-10: $series-d-light !default;
-$series-11: $series-e-light !default;
-$series-12: $series-f-light !default;
-$series-13: $series-a-dark !default;
-$series-14: $series-b-dark !default;
-$series-15: $series-c-dark !default;
-$series-16: $series-d-dark !default;
-$series-17: $series-e-dark !default;
-$series-18: $series-f-dark !default;
-$series-19: $series-a-lighter !default;
-$series-20: $series-b-lighter !default;
-$series-21: $series-c-lighter !default;
-$series-22: $series-d-lighter !default;
-$series-23: $series-e-lighter !default;
-$series-24: $series-f-lighter !default;
-$series-25: $series-a-darker !default;
-$series-26: $series-b-darker !default;
-$series-27: $series-c-darker !default;
-$series-28: $series-d-darker !default;
-$series-29: $series-e-darker !default;
-$series-30: $series-f-darker !default;
-
-$chart-border-width: 0px !default;
-$chart-font-family: $font-family !default;
-$chart-font-size: $font-size !default;
-$chart-line-height: $line-height !default;
-$chart-font-size-sm: 11px !default;
-$chart-font-size-md: 12px !default;
-$chart-font-size-lg: 16px !default;
-$chart-tooltip-font-size: ($font-size * .929) !default;
-$chart-label-font-size: .857em !default;
-$chart-title-font-size: 1.143em !default;
-$chart-pane-title-font-size: $chart-label-font-size !default;
-$chart-pane-title-font-weight: $font-weight-normal !default;
+$kendo-series-1: $kendo-series-a !default;
+$kendo-series-2: $kendo-series-b !default;
+$kendo-series-3: $kendo-series-c !default;
+$kendo-series-4: $kendo-series-d !default;
+$kendo-series-5: $kendo-series-e !default;
+$kendo-series-6: $kendo-series-f !default;
+$kendo-series-7: $kendo-series-a-light !default;
+$kendo-series-8: $kendo-series-b-light !default;
+$kendo-series-9: $kendo-series-c-light !default;
+$kendo-series-10: $kendo-series-d-light !default;
+$kendo-series-11: $kendo-series-e-light !default;
+$kendo-series-12: $kendo-series-f-light !default;
+$kendo-series-13: $kendo-series-a-dark !default;
+$kendo-series-14: $kendo-series-b-dark !default;
+$kendo-series-15: $kendo-series-c-dark !default;
+$kendo-series-16: $kendo-series-d-dark !default;
+$kendo-series-17: $kendo-series-e-dark !default;
+$kendo-series-18: $kendo-series-f-dark !default;
+$kendo-series-19: $kendo-series-a-lighter !default;
+$kendo-series-20: $kendo-series-b-lighter !default;
+$kendo-series-21: $kendo-series-c-lighter !default;
+$kendo-series-22: $kendo-series-d-lighter !default;
+$kendo-series-23: $kendo-series-e-lighter !default;
+$kendo-series-24: $kendo-series-f-lighter !default;
+$kendo-series-25: $kendo-series-a-darker !default;
+$kendo-series-26: $kendo-series-b-darker !default;
+$kendo-series-27: $kendo-series-c-darker !default;
+$kendo-series-28: $kendo-series-d-darker !default;
+$kendo-series-29: $kendo-series-e-darker !default;
+$kendo-series-30: $kendo-series-f-darker !default;
+
+$kendo-chart-border-width: 0px !default;
+$kendo-chart-font-family: $kendo-font-family !default;
+$kendo-chart-font-size: $kendo-font-size-md !default;
+$kendo-chart-line-height: $kendo-line-height-md !default;
+$kendo-chart-sm-font-size: 11px !default;
+$kendo-chart-md-font-size: 12px !default;
+$kendo-chart-lg-font-size: 16px !default;
+$kendo-chart-tooltip-font-size: ($kendo-font-size-md * .929) !default;
+$kendo-chart-label-font-size: .857em !default;
+$kendo-chart-title-font-size: 1.143em !default;
+$kendo-chart-pane-title-font-size: $kendo-chart-label-font-size !default;
+$kendo-chart-pane-title-font-weight: $kendo-font-weight-normal !default;
 
 /// The color of the Chart grid lines (major).
 /// @group charts
-$chart-major-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$kendo-chart-major-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
 
 /// The color of the Chart grid lines (minor).
 /// @group charts
-$chart-minor-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
+$kendo-chart-minor-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .04 ) !default;
 
-$chart-inactive: rgba( $kendo-body-text, .5 ) !default;
-$chart-area-opacity: .6 !default;
-$chart-area-inactive-opacity: .1 !default;
-$chart-line-inactive-opacity: .3 !default;
+$kendo-chart-inactive: rgba( $kendo-body-text, .5 ) !default;
+$kendo-chart-area-opacity: .6 !default;
+$kendo-chart-area-inactive-opacity: .1 !default;
+$kendo-chart-line-inactive-opacity: .3 !default;
 
-$chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
+$kendo-chart-tooltip-transition: left 300ms cubic-bezier(0, .33, .19, 1), top 300ms cubic-bezier(0, .33, .19, 1) !default;
 
-$chart-bg: $kendo-component-bg !default;
-$chart-text: $kendo-component-text !default;
-$chart-border: $kendo-component-border !default;
+$kendo-chart-bg: $kendo-component-bg !default;
+$kendo-chart-text: $kendo-component-text !default;
+$kendo-chart-border: $kendo-component-border !default;
 
-$chart-crosshair-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$chart-crosshair-shared-tooltip-color: $chart-text !default;
-$chart-crosshair-shared-tooltip-background: k-try-shade( $chart-bg, 1 ) !default;
-$chart-crosshair-shared-tooltip-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
+$kendo-chart-crosshair-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-crosshair-shared-tooltip-color: $kendo-chart-text !default;
+$kendo-chart-crosshair-shared-tooltip-background: k-try-shade( $kendo-chart-bg, 1 ) !default;
+$kendo-chart-crosshair-shared-tooltip-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08) !default;
 
-$chart-notes-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$chart-notes-border: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
-$chart-notes-lines: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-notes-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-notes-border: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-notes-lines: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
 
-$error-bars-background: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
+$kendo-chart-error-bars-background: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .5 ) !default;
 
-$selection-handle-size: 22px !default;
-$selection-border-color: rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
-$selection-shadow: inset 0 1px 7px rgba( if( $dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
+$kendo-chart-selection-handle-size: 22px !default;
+$kendo-chart-selection-border-color: rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .08 ) !default;
+$kendo-chart-selection-shadow: inset 0 1px 7px rgba( if( $kendo-is-dark-theme, $kendo-color-white, $kendo-color-black ), .15) !default;
 
 
 // TreeMap
-$treemap-font-family: $font-family !default;
-$treemap-font-size: $font-size !default;
-$treemap-line-height: $line-height !default;
+$kendo-treemap-font-family: $kendo-font-family !default;
+$kendo-treemap-font-size: $kendo-font-size-md !default;
+$kendo-treemap-line-height: $kendo-line-height-md !default;

package/scss/datetimepicker/_layout.scss

@@ -11,11 +11,11 @@
 
     // Wrap
     .k-datetime-wrap {
-        width: $datetime-width;
+        width: $kendo-datetime-width;
         overflow: hidden;
 
         .k-datetime-buttongroup {
-            padding: $actions-padding-y $actions-padding-x;
+            padding: $kendo-actions-padding-y $kendo-actions-padding-x;
         }
 
         .k-calendar,
@@ -29,7 +29,7 @@
     .k-datetime-calendar-wrap,
     .k-datetime-time-wrap {
         text-align: center;
-        flex: 0 0 $datetime-width;
+        flex: 0 0 $kendo-datetime-width;
     }
 
     // Tabs

package/scss/datetimepicker/_variables.scss

@@ -1,2 +1,2 @@
 // DateTime
-$datetime-width: calc( #{$calendar-cell-size * 8} + #{$infinite-calendar-view-padding-x * 2}) !default;
+$kendo-datetime-width: calc( #{$kendo-calendar-cell-size * 8} + #{$kendo-infinite-calendar-view-padding-x * 2}) !default;

package/scss/dialog/_variables.scss

@@ -3,11 +3,11 @@ $kendo-dialog-titlebar-bg: $kendo-component-header-bg !default;
 $kendo-dialog-titlebar-text: $kendo-component-header-text !default;
 $kendo-dialog-titlebar-border: inherit !default;
 
-$kendo-dialog-buttongroup-padding-x: $actions-padding-x !default;
-$kendo-dialog-buttongroup-padding-y: $actions-padding-y !default;
+$kendo-dialog-buttongroup-padding-x: $kendo-actions-padding-x !default;
+$kendo-dialog-buttongroup-padding-y: $kendo-actions-padding-y !default;
 $kendo-dialog-buttongroup-border-width: 1px !default;
 
-$kendo-dialog-button-spacing: $actions-button-spacing !default;
+$kendo-dialog-button-spacing: $kendo-actions-button-spacing !default;
 
 /// Theme colors map for the dialog.
 /// @group dialog