diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
index 2ee0afd4e9d..f45ad4daf6d 100644
--- a/packages/bootstrap/scss/_variables.scss
+++ b/packages/bootstrap/scss/_variables.scss
@@ -1599,43 +1599,6 @@ $window-sizes: map-merge((
 ), $window-sizes);
 
 
-// Drawer
-$drawer-bg: $body-bg !default;
-$drawer-text: $body-text !default;
-$drawer-border: $component-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: $padding-y !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-text: $hovered-text !default;
-$drawer-hovered-bg: $hovered-bg !default;
-
-$drawer-focused-bg: $hovered-bg !default;
-$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;
-
-$drawer-selected-text: $selected-text !default;
-$drawer-selected-bg: $selected-bg !default;
-$drawer-selected-hover-text: $selected-text !default;
-$drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;
-
-
 // Notification
 $notification-padding-x: $alert-padding-x !default;
 $notification-padding-y: $alert-padding-y !default;
diff --git a/packages/bootstrap/scss/drawer/_index.scss b/packages/bootstrap/scss/drawer/_index.scss
index 03d3366a352..0a94459a290 100644
--- a/packages/bootstrap/scss/drawer/_index.scss
+++ b/packages/bootstrap/scss/drawer/_index.scss
@@ -8,5 +8,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/bootstrap/scss/drawer/_variables.scss b/packages/bootstrap/scss/drawer/_variables.scss
new file mode 100644
index 00000000000..86461f88f09
--- /dev/null
+++ b/packages/bootstrap/scss/drawer/_variables.scss
@@ -0,0 +1,35 @@
+// Drawer
+$drawer-bg: $body-bg !default;
+$drawer-text: $body-text !default;
+$drawer-border: $component-border !default;
+$drawer-border-width: 1px !default;
+$drawer-font-family: $font-family !default;
+$drawer-font-size: $font-size !default;
+$drawer-line-height: $line-height !default;
+$drawer-content-padding-x: $padding-x !default;
+$drawer-content-padding-y: $padding-y !default;
+
+$drawer-scrollbar-width: 7px !default;
+$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-bg: #dedede !default;
+$drawer-scrollbar-radius: 20px !default;
+$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+
+$drawer-item-padding-x: $padding-x !default;
+$drawer-item-padding-y: $padding-y !default;
+$drawer-item-font-size: 16px !default;
+$drawer-item-line-height: $line-height-lg !default;
+$drawer-icon-size: $icon-size !default;
+
+$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+
+$drawer-hovered-bg: $hovered-bg !default;
+$drawer-hovered-text: $hovered-text !default;
+
+$drawer-focused-bg: $hovered-bg !default;
+$drawer-focused-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .15) !default;
+
+$drawer-selected-bg: $selected-bg !default;
+$drawer-selected-text: $selected-text !default;
+$drawer-selected-hover-bg: try-darken( $selected-bg, 7.5% ) !default;
+$drawer-selected-hover-text: $selected-text !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
index db8f5c71fc5..83a284639c1 100644
--- a/packages/classic/scss/_variables.scss
+++ b/packages/classic/scss/_variables.scss
@@ -258,7 +258,7 @@ $selected-border: try-shade( $selected-bg, 2 ) !default;
 $selected-gradient: $base-gradient !default;
 
 $selected-hover-bg: try-shade( $selected-bg ) !default;
-$selected-hover-color: contrast-wcag( $selected-hover-bg ) !default;
+$selected-hover-text: contrast-wcag( $selected-hover-bg ) !default;
 
 $focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
 $primary-focused-shadow: inset 0 0 0 2px rgba($primary, .3) !default;
@@ -1567,43 +1567,6 @@ $window-sizes: map-merge((
 ), $window-sizes);
 
 
-// Drawer
-$drawer-text: $base-text !default;
-$drawer-bg: $base-bg !default;
-$drawer-border: $base-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: $padding-x !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-text: $hovered-text !default;
-$drawer-hovered-bg: $hovered-bg !default;
-
-$drawer-focused-bg: $drawer-bg !default;
-$drawer-focused-shadow: $list-item-focused-shadow !default;
-
-$drawer-selected-text: $selected-text !default;
-$drawer-selected-bg: $selected-bg !default;
-$drawer-selected-hover-text: $selected-hover-color !default;
-$drawer-selected-hover-bg: $selected-hover-bg !default;
-
-
 // Notification
 $notification-padding-x: 8px !default;
 $notification-padding-y: 4px !default;
diff --git a/packages/classic/scss/drawer/_index.scss b/packages/classic/scss/drawer/_index.scss
index 48ccb9a6589..36bb490ad8d 100644
--- a/packages/classic/scss/drawer/_index.scss
+++ b/packages/classic/scss/drawer/_index.scss
@@ -1,3 +1,4 @@
 // Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/drawer/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/drawer/_theme.scss";
diff --git a/packages/classic/scss/drawer/_variables.scss b/packages/classic/scss/drawer/_variables.scss
new file mode 100644
index 00000000000..8915622c975
--- /dev/null
+++ b/packages/classic/scss/drawer/_variables.scss
@@ -0,0 +1,35 @@
+// Drawer
+$drawer-bg: $base-bg !default;
+$drawer-text: $base-text !default;
+$drawer-border: $base-border !default;
+$drawer-border-width: 1px !default;
+$drawer-font-family: $font-family !default;
+$drawer-font-size: $font-size !default;
+$drawer-line-height: $line-height !default;
+$drawer-content-padding-x: $padding-x !default;
+$drawer-content-padding-y: $padding-y !default;
+
+$drawer-scrollbar-width: 7px !default;
+$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-bg: #dedede !default;
+$drawer-scrollbar-radius: 20px !default;
+$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+
+$drawer-item-padding-x: $padding-x !default;
+$drawer-item-padding-y: $padding-x !default;
+$drawer-item-font-size: 16px !default;
+$drawer-item-line-height: $line-height-lg !default;
+$drawer-icon-size: $icon-size !default;
+
+$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+
+$drawer-hovered-bg: $hovered-bg !default;
+$drawer-hovered-text: $hovered-text !default;
+
+$drawer-focused-bg: $drawer-bg !default;
+$drawer-focused-shadow: $list-item-focused-shadow !default;
+
+$drawer-selected-bg: $selected-bg !default;
+$drawer-selected-text: $selected-text !default;
+$drawer-selected-hover-bg: $selected-hover-bg !default;
+$drawer-selected-hover-text: $selected-hover-text !default;
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
index 7891cab140f..44eeddf9fd3 100644
--- a/packages/default/scss/_variables.scss
+++ b/packages/default/scss/_variables.scss
@@ -281,8 +281,8 @@ $selected-border: rgba( black, .1 ) !default;
 /// The gradient background of selected items.
 $selected-gradient: none !default;
 
-$selected-hover-color: $selected-text !default;
 $selected-hover-bg: shade( $selected-bg ) !default;
+$selected-hover-text: $selected-text !default;
 
 // TODO: refactor
 $focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
@@ -1608,43 +1608,6 @@ $window-sizes: map-merge((
 ), $window-sizes);
 
 
-// Drawer
-$drawer-text: $base-text !default;
-$drawer-bg: $base-bg !default;
-$drawer-border: $base-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: $padding-x !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-text: $hovered-text !default;
-$drawer-hovered-bg: $hovered-bg !default;
-
-$drawer-focused-bg: $drawer-bg !default;
-$drawer-focused-shadow: $list-item-focused-shadow !default;
-
-$drawer-selected-text: $selected-text !default;
-$drawer-selected-bg: $selected-bg !default;
-$drawer-selected-hover-text: $selected-hover-color !default;
-$drawer-selected-hover-bg: $selected-hover-bg !default;
-
-
 // Notification
 $notification-padding-x: 8px !default;
 $notification-padding-y: 4px !default;
diff --git a/packages/default/scss/drawer/_index.scss b/packages/default/scss/drawer/_index.scss
index 03d3366a352..0a94459a290 100644
--- a/packages/default/scss/drawer/_index.scss
+++ b/packages/default/scss/drawer/_index.scss
@@ -8,5 +8,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/default/scss/drawer/_variables.scss b/packages/default/scss/drawer/_variables.scss
new file mode 100644
index 00000000000..8915622c975
--- /dev/null
+++ b/packages/default/scss/drawer/_variables.scss
@@ -0,0 +1,35 @@
+// Drawer
+$drawer-bg: $base-bg !default;
+$drawer-text: $base-text !default;
+$drawer-border: $base-border !default;
+$drawer-border-width: 1px !default;
+$drawer-font-family: $font-family !default;
+$drawer-font-size: $font-size !default;
+$drawer-line-height: $line-height !default;
+$drawer-content-padding-x: $padding-x !default;
+$drawer-content-padding-y: $padding-y !default;
+
+$drawer-scrollbar-width: 7px !default;
+$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-bg: #dedede !default;
+$drawer-scrollbar-radius: 20px !default;
+$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+
+$drawer-item-padding-x: $padding-x !default;
+$drawer-item-padding-y: $padding-x !default;
+$drawer-item-font-size: 16px !default;
+$drawer-item-line-height: $line-height-lg !default;
+$drawer-icon-size: $icon-size !default;
+
+$drawer-mini-initial-width: calc(4 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+
+$drawer-hovered-bg: $hovered-bg !default;
+$drawer-hovered-text: $hovered-text !default;
+
+$drawer-focused-bg: $drawer-bg !default;
+$drawer-focused-shadow: $list-item-focused-shadow !default;
+
+$drawer-selected-bg: $selected-bg !default;
+$drawer-selected-text: $selected-text !default;
+$drawer-selected-hover-bg: $selected-hover-bg !default;
+$drawer-selected-hover-text: $selected-hover-text !default;
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index f61017f8caf..f020eddb185 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -314,7 +314,7 @@ $selected-border: rgba( if($theme-type == dark, white, black), .1 ) !default;
 $selected-gradient: null !default;
 
 $selected-hover-bg: try-shade( $selected-bg ) !default;
-$selected-hover-color: $selected-text !default;
+$selected-hover-text: $selected-text !default;
 
 $transition: color .2s ease-in-out, background-color .2s ease-in-out, border-color .2s ease-in-out, box-shadow .2s ease-in-out !default;
 
@@ -1650,43 +1650,6 @@ $window-sizes: map-merge((
 ), $window-sizes);
 
 
-// Drawer
-$drawer-text: $base-text !default;
-$drawer-bg: $base-bg !default;
-$drawer-border: $base-border !default;
-$drawer-border-width: 1px !default;
-$drawer-font-family: $font-family !default;
-$drawer-font-size: $font-size !default;
-$drawer-line-height: $line-height !default;
-$drawer-content-padding-x: $padding-x !default;
-$drawer-content-padding-y: $padding-y !default;
-
-$drawer-scrollbar-width: 7px !default;
-$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
-$drawer-scrollbar-bg: #dedede !default;
-$drawer-scrollbar-radius: 20px !default;
-$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
-
-$drawer-item-padding-x: $padding-x !default;
-$drawer-item-padding-y: 12px !default;
-$drawer-item-font-size: 16px !default;
-$drawer-item-line-height: $line-height-lg !default;
-$drawer-icon-size: $icon-size !default;
-
-$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
-
-$drawer-hovered-text: $hovered-text !default;
-$drawer-hovered-bg: $hovered-bg !default;
-
-$drawer-focused-bg: $hovered-bg !default;
-$drawer-focused-shadow: none !default;
-
-$drawer-selected-text: $secondary !default;
-$drawer-selected-bg: $base-bg !default;
-$drawer-selected-hover-text:  $secondary !default;
-$drawer-selected-hover-bg: $hovered-bg !default;
-
-
 // Notification
 $notification-padding-x: 16px !default;
 $notification-padding-y: 14px !default;
diff --git a/packages/material/scss/drawer/_index.scss b/packages/material/scss/drawer/_index.scss
index 03d3366a352..0a94459a290 100644
--- a/packages/material/scss/drawer/_index.scss
+++ b/packages/material/scss/drawer/_index.scss
@@ -8,5 +8,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/material/scss/drawer/_variables.scss b/packages/material/scss/drawer/_variables.scss
new file mode 100644
index 00000000000..c4ada985714
--- /dev/null
+++ b/packages/material/scss/drawer/_variables.scss
@@ -0,0 +1,35 @@
+// Drawer
+$drawer-bg: $base-bg !default;
+$drawer-text: $base-text !default;
+$drawer-border: $base-border !default;
+$drawer-border-width: 1px !default;
+$drawer-font-family: $font-family !default;
+$drawer-font-size: $font-size !default;
+$drawer-line-height: $line-height !default;
+$drawer-content-padding-x: $padding-x !default;
+$drawer-content-padding-y: $padding-y !default;
+
+$drawer-scrollbar-width: 7px !default;
+$drawer-scrollbar-color: rgba(156, 156, 156, .7) !default;
+$drawer-scrollbar-bg: #dedede !default;
+$drawer-scrollbar-radius: 20px !default;
+$drawer-scrollbar-hovered-color: rgba(156, 156, 156, 1) !default;
+
+$drawer-item-padding-x: $padding-x !default;
+$drawer-item-padding-y: 12px !default;
+$drawer-item-font-size: 16px !default;
+$drawer-item-line-height: $line-height-lg !default;
+$drawer-icon-size: $icon-size !default;
+
+$drawer-mini-initial-width: calc(2 * #{$drawer-item-padding-x} + #{$drawer-icon-size}) !default;
+
+$drawer-hovered-bg: $hovered-bg !default;
+$drawer-hovered-text: $hovered-text !default;
+
+$drawer-focused-bg: $hovered-bg !default;
+$drawer-focused-shadow: none !default;
+
+$drawer-selected-bg: $base-bg !default;
+$drawer-selected-text: $secondary !default;
+$drawer-selected-hover-bg: $hovered-bg !default;
+$drawer-selected-hover-text:  $secondary !default;