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

package/scss/menu/_variables.scss

@@ -1,53 +1,50 @@
-@import "../typography/_variables.scss";
-
-
 // Menu
 
-$menu-padding-x: 0px !default;
-$menu-padding-y: 0px !default;
-$menu-border-width: 0px !default;
-$menu-font-family: $font-family !default;
-$menu-font-size: $font-size !default;
-$menu-line-height: $line-height !default;
+$kendo-menu-padding-x: 0px !default;
+$kendo-menu-padding-y: 0px !default;
+$kendo-menu-border-width: 0px !default;
+$kendo-menu-font-family: $kendo-font-family !default;
+$kendo-menu-font-size: $kendo-font-size-md !default;
+$kendo-menu-line-height: $kendo-line-height-md !default;
 
-$menu-bg: transparent !default;
-$menu-text: $kendo-component-text !default;
-$menu-border: null !default;
-$menu-gradient: null !default;
+$kendo-menu-bg: transparent !default;
+$kendo-menu-text: $kendo-component-text !default;
+$kendo-menu-border: null !default;
+$kendo-menu-gradient: null !default;
 
-$menu-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
-$menu-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
-$menu-item-spacing: 0 !default;
-$menu-item-icon-spacing: $kendo-icon-spacing !default;
+$kendo-menu-item-padding-x: k-map-get( $kendo-spacing, 3 ) !default;
+$kendo-menu-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-menu-item-spacing: 0 !default;
+$kendo-menu-item-icon-spacing: $kendo-icon-spacing !default;
 
-$menu-item-bg: null !default;
-$menu-item-text: $link-text !default;
-$menu-item-border: null !default;
-$menu-item-gradient: null !default;
+$kendo-menu-item-bg: null !default;
+$kendo-menu-item-text: $kendo-link-text !default;
+$kendo-menu-item-border: null !default;
+$kendo-menu-item-gradient: null !default;
 
-$menu-item-hover-bg: null !default;
-$menu-item-hover-text: $link-hover-text !default;
-$menu-item-hover-border: null !default;
-$menu-item-hover-gradient: null !default;
+$kendo-menu-item-hover-bg: null !default;
+$kendo-menu-item-hover-text: $kendo-link-hover-text !default;
+$kendo-menu-item-hover-border: null !default;
+$kendo-menu-item-hover-gradient: null !default;
 
-$menu-item-expanded-bg: null !default;
-$menu-item-expanded-text: $kendo-component-text !default;
-$menu-item-expanded-border: null !default;
-$menu-item-expanded-gradient: null !default;
+$kendo-menu-item-expanded-bg: null !default;
+$kendo-menu-item-expanded-text: $kendo-component-text !default;
+$kendo-menu-item-expanded-border: null !default;
+$kendo-menu-item-expanded-gradient: null !default;
 
-$menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
+$kendo-menu-item-focus-shadow: $kendo-list-item-focus-shadow !default;
 
-$menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-separator-spacing: k-map-get( $kendo-spacing, 1 ) !default;
 
-$menu-scroll-button-bg: $kendo-component-bg !default;
-$menu-scroll-button-text: $link-text !default;
-$menu-scroll-button-border: $kendo-component-border !default;
-$menu-scroll-button-gradient: null !default;
+$kendo-menu-scroll-button-bg: $kendo-component-bg !default;
+$kendo-menu-scroll-button-text: $kendo-link-text !default;
+$kendo-menu-scroll-button-border: $kendo-component-border !default;
+$kendo-menu-scroll-button-gradient: null !default;
 
-$menu-scroll-button-hover-bg: null !default;
-$menu-scroll-button-hover-text: $link-hover-text !default;
-$menu-scroll-button-hover-border: null !default;
-$menu-scroll-button-hover-gradient: null !default;
+$kendo-menu-scroll-button-hover-bg: null !default;
+$kendo-menu-scroll-button-hover-text: $kendo-link-hover-text !default;
+$kendo-menu-scroll-button-hover-border: null !default;
+$kendo-menu-scroll-button-hover-gradient: null !default;
 
 
 // Menu popup
@@ -62,31 +59,31 @@ $kendo-menu-popup-padding-y: null !default;
 
 /// Width of the border around the menu popup.
 /// @group menu
-$kendo-menu-popup-border-width: $popup-border-width !default;
+$kendo-menu-popup-border-width: $kendo-popup-border-width !default;
 
 /// Font sizes of the menu popup.
 /// @group menu
-$kendo-menu-popup-font-size: $font-size-md !default;
-$kendo-menu-popup-font-size-sm: $font-size-md !default;
-$kendo-menu-popup-font-size-md: $font-size-md !default;
-$kendo-menu-popup-font-size-lg: $font-size-md !default;
+$kendo-menu-popup-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-sm-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-md-font-size: $kendo-font-size-md !default;
+$kendo-menu-popup-lg-font-size: $kendo-font-size-md !default;
 
-/// Line heights used along with $font-size.
+/// Line heights used along with $kendo-font-size.
 /// @group menu
-$kendo-menu-popup-line-height: $line-height-md !default;
-$kendo-menu-popup-line-height-sm: $line-height-md !default;
-$kendo-menu-popup-line-height-md: $line-height-md !default;
-$kendo-menu-popup-line-height-lg: $line-height-md !default;
+$kendo-menu-popup-line-height: $kendo-line-height-md !default;
+$kendo-menu-popup-sm-line-height: $kendo-line-height-md !default;
+$kendo-menu-popup-md-line-height: $kendo-line-height-md !default;
+$kendo-menu-popup-lg-line-height: $kendo-line-height-md !default;
 
 /// The background of the menu popup.
 /// @group menu
-$kendo-menu-popup-bg: $popup-bg !default;
+$kendo-menu-popup-bg: $kendo-popup-bg !default;
 /// The text color of the menu popup.
 /// @group menu
-$kendo-menu-popup-text: $popup-text !default;
+$kendo-menu-popup-text: $kendo-popup-text !default;
 /// The border color of the menu popup.
 /// @group menu
-$kendo-menu-popup-border: $popup-border !default;
+$kendo-menu-popup-border: $kendo-popup-border !default;
 /// The background gradient of the menu popup.
 /// @group menu
 $kendo-menu-popup-gradient: null !default;
@@ -97,35 +94,35 @@ $kendo-menu-popup-gradient: null !default;
 /// Horizontal padding of the menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-sm: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-md: k-map-get( $kendo-spacing, 2 ) !default;
-$kendo-menu-popup-item-padding-x-lg: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-sm-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-md-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
+$kendo-menu-popup-lg-item-padding-x: k-map-get( $kendo-spacing, 2 ) !default;
 
 /// Vertical padding of the menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-popup-item-padding-y-sm: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
-$kendo-menu-popup-item-padding-y-md: k-map-get( $kendo-spacing, 1 ) !default;
-$kendo-menu-popup-item-padding-y-lg: k-map-get( $kendo-spacing, 1.5 ) !default;
+$kendo-menu-popup-sm-item-padding-y: k-map-get( $kendo-spacing, 0.5 ) !default; // sass-lint:disable-line leading-zero
+$kendo-menu-popup-md-item-padding-y: k-map-get( $kendo-spacing, 1 ) !default;
+$kendo-menu-popup-lg-item-padding-y: k-map-get( $kendo-spacing, 1.5 ) !default;
 
 /// The end padding of the menu item in popup.
 /// @group menu
 $kendo-menu-popup-item-padding-end: calc( #{$kendo-menu-popup-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-sm: calc( #{$kendo-menu-popup-item-padding-x-sm * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-md: calc( #{$kendo-menu-popup-item-padding-x-md * 2} + #{$kendo-icon-size} ) !default;
-$kendo-menu-popup-item-padding-end-lg: calc( #{$kendo-menu-popup-item-padding-x-lg * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-sm-item-padding-end: calc( #{$kendo-menu-popup-sm-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-md-item-padding-end: calc( #{$kendo-menu-popup-md-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
+$kendo-menu-popup-lg-item-padding-end: calc( #{$kendo-menu-popup-lg-item-padding-x * 2} + #{$kendo-icon-size} ) !default;
 
 /// The start margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-start-sm: $kendo-menu-popup-item-padding-x-sm !default;
-$kendo-menu-popup-item-icon-margin-start: $kendo-menu-popup-item-padding-x-md !default;
-$kendo-menu-popup-item-icon-margin-start-lg: $kendo-menu-popup-item-padding-x-lg !default;
+$kendo-menu-popup-sm-item-icon-margin-start: $kendo-menu-popup-sm-item-padding-x !default;
+$kendo-menu-popup-md-item-icon-margin-start: $kendo-menu-popup-md-item-padding-x !default;
+$kendo-menu-popup-lg-item-icon-margin-start: $kendo-menu-popup-lg-item-padding-x !default;
 
 /// The end margin of the menu item expand icon.
 /// @group menu
-$kendo-menu-popup-item-icon-margin-end-sm: calc( -1 * (#{$kendo-menu-popup-item-padding-end-sm} - #{k-math-div( $kendo-menu-popup-item-padding-x-sm, 2 )}) ) !default;
-$kendo-menu-popup-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-item-padding-end-md} - #{k-math-div( $kendo-menu-popup-item-padding-x-md, 2 )}) ) !default;
-$kendo-menu-popup-item-icon-margin-end-lg: calc( -1 * (#{$kendo-menu-popup-item-padding-end-lg} - #{k-math-div( $kendo-menu-popup-item-padding-x-lg, 2 )}) ) !default;
+$kendo-menu-popup-sm-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-sm-item-padding-end} - #{k-math-div( $kendo-menu-popup-sm-item-padding-x, 2 )}) ) !default;
+$kendo-menu-popup-md-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-md-item-padding-end} - #{k-math-div( $kendo-menu-popup-md-item-padding-x, 2 )}) ) !default;
+$kendo-menu-popup-lg-item-icon-margin-end: calc( -1 * (#{$kendo-menu-popup-lg-item-padding-end} - #{k-math-div( $kendo-menu-popup-lg-item-padding-x, 2 )}) ) !default;
 
 /// The spacing between the menu items in popup.
 /// @group menu
@@ -172,4 +169,4 @@ $kendo-menu-popup-item-expanded-gradient: null !default;
 
 /// The base shadow of focused menu item in popup.
 /// @group menu
-$kendo-menu-popup-item-focus-shadow: $menu-item-focus-shadow !default;
+$kendo-menu-popup-item-focus-shadow: $kendo-menu-item-focus-shadow !default;

package/scss/messagebox/_layout.scss

@@ -2,18 +2,18 @@
 
     // Base
     .k-messagebox {
-        margin: $message-box-margin;
-        padding: $message-box-padding-y $message-box-padding-x;
-        border-width: $message-box-border-width;
+        margin: $kendo-message-box-margin;
+        padding: $kendo-message-box-padding-y $kendo-message-box-padding-x;
+        border-width: $kendo-message-box-border-width;
         border-style: solid;
         box-sizing: border-box;
-        font-size: $message-box-font-size;
-        line-height: $message-box-line-height;
+        font-size: $kendo-message-box-font-size;
+        line-height: $kendo-message-box-line-height;
 
         a {
             color: inherit;
-            font-style: $message-box-link-font-style;
-            text-decoration: $message-box-link-text-decoration;
+            font-style: $kendo-message-box-link-font-style;
+            text-decoration: $kendo-message-box-link-text-decoration;
         }
     }
 

package/scss/messagebox/_theme.scss

@@ -3,9 +3,9 @@
     @each $color-name, $color in $kendo-theme-colors {
         .k-messagebox-#{$color-name} {
             @include fill(
-                k-color-level( $color, $message-box-text-level ),
-                k-color-level( $color, $message-box-bg-level ),
-                k-color-level( $color, $message-box-border-level )
+                k-color-level( $color, $kendo-message-box-text-level ),
+                k-color-level( $color, $kendo-message-box-bg-level ),
+                k-color-level( $color, $kendo-message-box-border-level )
             );
         }
     }

package/scss/messagebox/_variables.scss

@@ -1,15 +1,15 @@
 // Message box
-$message-box-margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0 !default;
-$message-box-padding-x: $kendo-padding-md-x !default;
-$message-box-padding-y: $kendo-padding-md-y !default;
-$message-box-border-width: 0 0 0 4px !default;
+$kendo-message-box-margin: 0 0 k-map-get( $kendo-spacing, 4 ) 0 !default;
+$kendo-message-box-padding-x: $kendo-padding-md-x !default;
+$kendo-message-box-padding-y: $kendo-padding-md-y !default;
+$kendo-message-box-border-width: 0 0 0 4px !default;
 
-$message-box-font-size: $font-size !default;
-$message-box-line-height: $line-height !default;
+$kendo-message-box-font-size: $kendo-font-size-md !default;
+$kendo-message-box-line-height: $kendo-line-height-md !default;
 
-$message-box-bg-level: -10 !default;
-$message-box-text-level: 6 !default;
-$message-box-border-level: -9 !default;
+$kendo-message-box-bg-level: -10 !default;
+$kendo-message-box-text-level: 6 !default;
+$kendo-message-box-border-level: -9 !default;
 
-$message-box-link-font-style: italic !default;
-$message-box-link-text-decoration: underline !default;
+$kendo-message-box-link-font-style: italic !default;
+$kendo-message-box-link-text-decoration: underline !default;

package/scss/notification/_variables.scss

@@ -14,16 +14,16 @@ $kendo-notification-border-width: 1px !default;
 $kendo-notification-border-radius: $kendo-border-radius-md !default;
 /// Box shadow of the notification.
 /// @group notification
-$kendo-notification-shadow: $popup-shadow !default;
+$kendo-notification-shadow: $kendo-popup-shadow !default;
 /// Font family of the notification.
 /// @group notification
-$kendo-notification-font-family: $font-family !default;
+$kendo-notification-font-family: $kendo-font-family !default;
 /// Font size of the notification.
 /// @group notification
-$kendo-notification-font-size: $font-size-sm !default;
+$kendo-notification-font-size: $kendo-font-size-sm !default;
 /// Line height of the notification.
 /// @group notification
-$kendo-notification-line-height: $line-height !default;
+$kendo-notification-line-height: $kendo-line-height-md !default;
 
 /// Horizontal spacing of the notification icon.
 /// @group notification

package/scss/orgchart/_layout.scss

@@ -3,11 +3,11 @@
     // OrgChart
     .k-orgchart {
         width: 100%;
-        padding: $orgchart-padding-x $orgchart-padding-y;
+        padding: $kendo-orgchart-padding-x $kendo-orgchart-padding-y;
         box-sizing: border-box;
-        font-size: $orgchart-font-size;
-        font-family: $orgchart-font-family;
-        line-height: $orgchart-line-height;
+        font-size: $kendo-orgchart-font-size;
+        font-family: $kendo-orgchart-font-family;
+        line-height: $kendo-orgchart-line-height;
         overflow: auto;
 
         *,
@@ -26,7 +26,7 @@
 
     // Nodes
     .k-orgchart-group {
-        gap: $orgchart-group-gap;
+        gap: $kendo-orgchart-group-gap;
     }
 
     .k-orgchart-group.k-vstack > .k-orgchart-node-container {
@@ -34,52 +34,52 @@
     }
 
     .k-orgchart-node-container {
-        gap: $orgchart-node-gap;
+        gap: $kendo-orgchart-node-gap;
     }
 
     .k-orgchart-node-group-container {
-        @include border-radius( $orgchart-node-group-border-radius );
-        padding: $orgchart-node-group-padding-y $orgchart-node-group-padding-x;
-        border-width: $orgchart-node-group-border-width;
+        @include border-radius( $kendo-orgchart-node-group-border-radius );
+        padding: $kendo-orgchart-node-group-padding-y $kendo-orgchart-node-group-padding-x;
+        border-width: $kendo-orgchart-node-group-border-width;
         border-style: solid;
         outline: 0;
     }
 
     .k-orgchart-node-group-title {
-        margin: 0 0 $orgchart-node-group-title-margin-bottom;
-        font-size: $orgchart-node-group-title-font-size;
-        line-height: $orgchart-node-group-title-line-height;
+        margin: 0 0 $kendo-orgchart-node-group-title-margin-bottom;
+        font-size: $kendo-orgchart-node-group-title-font-size;
+        line-height: $kendo-orgchart-node-group-title-line-height;
     }
 
     .k-orgchart-node-group-subtitle {
-        margin: 0 0 $orgchart-node-group-subtitle-margin-bottom;
-        font-size: $orgchart-node-group-subtitle-font-size;
+        margin: 0 0 $kendo-orgchart-node-group-subtitle-margin-bottom;
+        font-size: $kendo-orgchart-node-group-subtitle-font-size;
     }
 
     // Card
     .k-orgchart-card {
-        width: $orgchart-card-width;
-        border-width: $orgchart-card-border-width;
+        width: $kendo-orgchart-card-width;
+        border-width: $kendo-orgchart-card-border-width;
 
         .k-card-title {
-            margin: 0 0 $orgchart-card-title-margin-bottom;
-            font-size: $orgchart-card-title-font-size;
+            margin: 0 0 $kendo-orgchart-card-title-margin-bottom;
+            font-size: $kendo-orgchart-card-title-font-size;
         }
 
         .k-card-subtitle {
-            margin: 0 0 $orgchart-card-subtitle-margin-bottom;
-            font-size: $orgchart-card-subtitle-font-size;
+            margin: 0 0 $kendo-orgchart-card-subtitle-margin-bottom;
+            font-size: $kendo-orgchart-card-subtitle-font-size;
         }
 
         .k-card-body {
-            border-width: $orgchart-card-body-border-width;
+            border-width: $kendo-orgchart-card-body-border-width;
             border-style: solid;
             flex-grow: 0;
         }
         .k-card-body .k-card-title-wrap {
-            margin: 0 $orgchart-card-body-vbox-margin-right 0 0;
+            margin: 0 $kendo-orgchart-card-body-vbox-margin-right 0 0;
             min-width: 0;
-            min-height: $orgchart-card-body-vbox-min-height;
+            min-height: $kendo-orgchart-card-body-vbox-min-height;
         }
     }
 
@@ -89,13 +89,13 @@
     }
 
     .k-orgchart-line-h {
-        height: $orgchart-line-size;
+        height: $kendo-orgchart-line-size;
     }
 
     .k-orgchart-line-v {
         margin: 0 auto;
-        width: $orgchart-line-size;
-        height: $orgchart-line-v-height;
+        width: $kendo-orgchart-line-size;
+        height: $kendo-orgchart-line-v-height;
     }
 
     // Buttons

package/scss/orgchart/_theme.scss

@@ -3,48 +3,48 @@
     // OrgChart
     .k-orgchart {
         @include fill (
-            $orgchart-text,
-            $orgchart-bg,
-            $orgchart-border
+            $kendo-orgchart-text,
+            $kendo-orgchart-bg,
+            $kendo-orgchart-border
         );
     }
 
     // Card
     .k-orgchart-card {
-        @include box-shadow( $orgchart-card-shadow );
+        @include box-shadow( $kendo-orgchart-card-shadow );
 
         .k-card-body {
-            @include fill( $border: $orgchart-card-body-border-color );
+            @include fill( $border: $kendo-orgchart-card-body-border-color );
         }
 
         &:focus,
         &.k-focus {
-            @include focus-indicator( $orgchart-card-focus-shadow );
+            @include focus-indicator( $kendo-orgchart-card-focus-shadow );
         }
     }
 
     // Group
     .k-orgchart-node-group-container {
         @include fill (
-            $orgchart-node-group-text,
-            $orgchart-node-group-bg,
-            $orgchart-node-group-border
+            $kendo-orgchart-node-group-text,
+            $kendo-orgchart-node-group-bg,
+            $kendo-orgchart-node-group-border
         );
     }
     .k-orgchart-node-group-container:focus,
     .k-orgchart-node-group-container.k-focus {
-        @include focus-indicator( $orgchart-node-group-focus-shadow );
-        @include fill ( $border: $orgchart-node-group-focus-border );
+        @include focus-indicator( $kendo-orgchart-node-group-focus-shadow );
+        @include fill ( $border: $kendo-orgchart-node-group-focus-border );
     }
 
     .k-orgchart-node-group-subtitle {
-        @include fill( $color: $orgchart-node-group-subtitle-text );
+        @include fill( $color: $kendo-orgchart-node-group-subtitle-text );
     }
 
     // Lines
     .k-orgchart-line-h,
     .k-orgchart-line-v {
-        @include fill( $color: $orgchart-line-fill );
+        @include fill( $color: $kendo-orgchart-line-fill );
     }
 
 }

package/scss/orgchart/_variables.scss

@@ -1,57 +1,57 @@
 // Orgchart
-$orgchart-spacer: k-map-get( $kendo-spacing, 6 ) !default;
-$orgchart-padding-y: $orgchart-spacer !default;
-$orgchart-padding-x: $orgchart-padding-y !default;
-$orgchart-font-family: $font-family !default;
-$orgchart-font-size: $font-size !default;
-$orgchart-line-height: $line-height !default;
-$orgchart-bg: $kendo-component-bg !default;
-$orgchart-text: $kendo-component-text !default;
-$orgchart-border: $kendo-component-border !default;
-
-$orgchart-node-gap: $orgchart-spacer !default;
-$orgchart-group-gap: $orgchart-spacer !default;
-$orgchart-node-container-gap: $orgchart-spacer !default;
-
-$orgchart-node-group-padding-y: $orgchart-spacer !default;
-$orgchart-node-group-padding-x: $orgchart-node-group-padding-y !default;
-$orgchart-node-group-border-width: 1px !default;
-$orgchart-node-group-border-radius: $kendo-border-radius-md !default;
-$orgchart-node-group-bg: $base-bg !default;
-$orgchart-node-group-text: $base-text !default;
-$orgchart-node-group-border: $base-border !default;
-
-$orgchart-node-group-focus-border: $card-focus-border !default;
-$orgchart-node-group-focus-shadow: $card-focus-shadow !default;
-
-$orgchart-node-group-title-font-size: $font-size-lg !default;
-$orgchart-node-group-title-margin-bottom: k-math-div( $orgchart-spacer, 3 ) !default;
-$orgchart-node-group-title-line-height: $line-height-sm !default;
-
-$orgchart-node-group-subtitle-font-size: $font-size !default;
-$orgchart-node-group-subtitle-margin-bottom: $orgchart-spacer !default;
-$orgchart-node-group-subtitle-text: $kendo-subtle-text !default;
-
-$orgchart-card-width: 300px !default;
-$orgchart-card-padding-y: $card-padding-y !default;
-$orgchart-card-padding-x: $orgchart-card-padding-y !default;
-$orgchart-card-border-width: $card-border-width !default;
-$orgchart-card-shadow: $card-shadow !default;
-$orgchart-card-focus-shadow: $card-focus-shadow !default;
-
-$orgchart-card-title-margin-bottom: 0px !default;
-$orgchart-card-title-font-size: null !default;
-
-$orgchart-card-subtitle-margin-bottom: 0px !default;
-$orgchart-card-subtitle-font-size: null !default;
-
-$orgchart-card-body-border-width: 2px 0 0 !default;
-$orgchart-card-body-border-color: transparent !default;
-
-$orgchart-card-body-vbox-margin-right: k-math-div( $orgchart-spacer, 2 ) !default;
-$orgchart-card-body-vbox-min-height: $card-avatar-size !default;
-
-$orgchart-line-size: 1px !default;
-$orgchart-line-fill: $base-border !default;
-
-$orgchart-line-v-height: 25px !default;
+$kendo-orgchart-spacer: k-map-get( $kendo-spacing, 6 ) !default;
+$kendo-orgchart-padding-y: $kendo-orgchart-spacer !default;
+$kendo-orgchart-padding-x: $kendo-orgchart-padding-y !default;
+$kendo-orgchart-font-family: $kendo-font-family !default;
+$kendo-orgchart-font-size: $kendo-font-size-md !default;
+$kendo-orgchart-line-height: $kendo-line-height-md !default;
+$kendo-orgchart-bg: $kendo-component-bg !default;
+$kendo-orgchart-text: $kendo-component-text !default;
+$kendo-orgchart-border: $kendo-component-border !default;
+
+$kendo-orgchart-node-gap: $kendo-orgchart-spacer !default;
+$kendo-orgchart-group-gap: $kendo-orgchart-spacer !default;
+$kendo-orgchart-node-container-gap: $kendo-orgchart-spacer !default;
+
+$kendo-orgchart-node-group-padding-y: $kendo-orgchart-spacer !default;
+$kendo-orgchart-node-group-padding-x: $kendo-orgchart-node-group-padding-y !default;
+$kendo-orgchart-node-group-border-width: 1px !default;
+$kendo-orgchart-node-group-border-radius: $kendo-border-radius-md !default;
+$kendo-orgchart-node-group-bg: $kendo-base-bg !default;
+$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-title-font-size: $kendo-font-size-lg !default;
+$kendo-orgchart-node-group-title-margin-bottom: k-math-div( $kendo-orgchart-spacer, 3 ) !default;
+$kendo-orgchart-node-group-title-line-height: $kendo-line-height-sm !default;
+
+$kendo-orgchart-node-group-subtitle-font-size: $kendo-font-size-md !default;
+$kendo-orgchart-node-group-subtitle-margin-bottom: $kendo-orgchart-spacer !default;
+$kendo-orgchart-node-group-subtitle-text: $kendo-subtle-text !default;
+
+$kendo-orgchart-card-width: 300px !default;
+$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-title-margin-bottom: 0px !default;
+$kendo-orgchart-card-title-font-size: null !default;
+
+$kendo-orgchart-card-subtitle-margin-bottom: 0px !default;
+$kendo-orgchart-card-subtitle-font-size: null !default;
+
+$kendo-orgchart-card-body-border-width: 2px 0 0 !default;
+$kendo-orgchart-card-body-border-color: transparent !default;
+
+$kendo-orgchart-card-body-vbox-margin-right: k-math-div( $kendo-orgchart-spacer, 2 ) !default;
+$kendo-orgchart-card-body-vbox-min-height: $kendo-card-avatar-size !default;
+
+$kendo-orgchart-line-size: 1px !default;
+$kendo-orgchart-line-fill: $kendo-base-border !default;
+
+$kendo-orgchart-line-v-height: 25px !default;

package/scss/overlay/_layout.scss

@@ -4,7 +4,7 @@
     .k-overlay {
         width: 100%;
         height: 100%;
-        opacity: $overlay-opacity;
+        opacity: $kendo-overlay-opacity;
         position: fixed;
         top: 0;
         left: 0;

package/scss/overlay/_theme.scss

@@ -2,11 +2,11 @@
 
     // Overlay
     .k-overlay {
-        background-color: $overlay-bg;
+        background-color: $kendo-overlay-bg;
     }
 
 
-    @each $name, $color in $overlay-theme-colors {
+    @each $name, $color in $kendo-overlay-theme-colors {
         .k-overlay-#{$name} {
             background-color: $color;
         }

package/scss/overlay/_variables.scss

@@ -1,4 +1,4 @@
-$overlay-theme-colors: $kendo-theme-colors !default;
+$kendo-overlay-theme-colors: $kendo-theme-colors !default;
 
-$overlay-bg: $kendo-color-black !default;
-$overlay-opacity: .5 !default;
+$kendo-overlay-bg: $kendo-color-black !default;
+$kendo-overlay-opacity: .5 !default;

package/scss/pager/_layout.scss

@@ -193,7 +193,7 @@
                     margin-left: $kendo-pager-section-spacing;
                     margin-right: $kendo-pager-section-spacing;
                 }
-                width: $kendo-pager-dropdown-width-sm;
+                width: $kendo-pager-sm-dropdown-width;
             }
         }
     }

package/scss/pager/_theme.scss

@@ -59,11 +59,11 @@
 
             &.k-expanded {
                 @include fill(
-                    $popup-text,
-                    $popup-bg,
-                    $popup-border
+                    $kendo-popup-text,
+                    $kendo-popup-bg,
+                    $kendo-popup-border
                 );
-                @include box-shadow( $popup-shadow );
+                @include box-shadow( $kendo-popup-shadow );
             }
 
         }