diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
index 56ff4526855..7ef05f9c2e3 100644
--- a/packages/bootstrap/scss/_variables.scss
+++ b/packages/bootstrap/scss/_variables.scss
@@ -1542,158 +1542,6 @@ $rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
 $rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;
 
 
-// Calendar
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: $line-height !default;
-
-$calendar-header-padding-x: $padding-x !default;
-$calendar-header-padding-y: $padding-y !default;
-$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
-$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
-$calendar-header-border-width: 1px !default;
-
-$calendar-header-min-width: 280px !default;
-
-$calendar-content-padding-x: $calendar-header-padding-x !default;
-$calendar-content-padding-y: $calendar-header-padding-y !default;
-
-$calendar-cell-padding-x: .5rem !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-size-px: 40px !default;
-$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1rem !default;
-$calendar-cell-border-radius: $border-radius !default;
-
-$calendar-header-cell-padding-x: 0px !default;
-$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-
-$calendar-header-height: 2em !default;
-
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
-
-$calendar-view-width: 7 * $calendar-cell-size !default;
-$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
-
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
-
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
-$calendar-header-shadow: none !default;
-
-$calendar-header-button-hovered-bg: $button-hovered-bg !default;
-$calendar-header-button-hovered-text: $button-hovered-text !default;
-$calendar-header-button-hovered-border: $button-hovered-border !default;
-$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
-
-$calendar-header-button-pressed-bg: $button-pressed-bg !default;
-$calendar-header-button-pressed-text: $button-pressed-text !default;
-$calendar-header-button-pressed-border: $button-pressed-border !default;
-$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
-$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
-
-$calendar-header-cell-text: null !default;
-$calendar-header-cell-opacity: $disabled-opacity !default;
-
-$calendar-navigation-bg: $calendar-header-bg !default;
-$calendar-navigation-text: $calendar-header-text !default;
-$calendar-navigation-border: $calendar-header-border !default;
-
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hovered-text: $link-hover-text !default;
-
-$calendar-weekend-text: inherit !default;
-$calendar-weekend-bg: transparent !default;
-$calendar-weekend-opacity: 1 !default;
-
-$calendar-today-style: box !default;
-$calendar-today-color: $primary !default;
-
-$calendar-week-number-bg: transparent !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
-$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-cell-hovered-bg: $node-hovered-bg !default;
-$calendar-cell-hovered-text: $node-hovered-text !default;
-$calendar-cell-hovered-border: $node-hovered-border !default;
-
-$calendar-cell-selected-bg: $node-selected-bg !default;
-$calendar-cell-selected-text: $node-selected-text !default;
-$calendar-cell-selected-border: $node-selected-border !default;
-
-$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, .5) !default;
-
-
-// Multiview Calendar
-$multiviewcalendar-button-style: stretched !default;
-$multiviewcalendar-button-size: 50px !default;
-$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
-$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
-$multiviewcalendar-content-padding-y: 0px !default;
-$multiviewcalendar-navigation-margin-x: 0px !default;
-$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
-
-
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-highlight-color: $component-border !default;
-$time-list-focused-bg: rgba(0, 0, 0, .02) !default;
-$time-list-title-focus: black !default;
-
-$time-header-padding: $padding-y $padding-x !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
-$time-list-height: 200px !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-focused-bg: $button-pressed-bg !default;
-$datetime-select-focused-text: $button-pressed-text !default;
-$datetime-select-focused-border: $button-pressed-border !default;
-$datetime-select-focused-gradient: $button-pressed-gradient !default;
-$datetime-select-focused-shadow: $button-pressed-shadow !default;
-
-
 // Menu
 $menu-border-width: 0px !default;
 $menu-font-family: $font-family !default;
diff --git a/packages/bootstrap/scss/calendar/_index.scss b/packages/bootstrap/scss/calendar/_index.scss
index 5df38dfa2fc..190671b520d 100644
--- a/packages/bootstrap/scss/calendar/_index.scss
+++ b/packages/bootstrap/scss/calendar/_index.scss
@@ -9,5 +9,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss
new file mode 100644
index 00000000000..36efb39ff3b
--- /dev/null
+++ b/packages/bootstrap/scss/calendar/_variables.scss
@@ -0,0 +1,101 @@
+// Calendar
+$calendar-border-width: 1px !default;
+$calendar-font-family: $font-family !default;
+$calendar-font-size: $font-size !default;
+$calendar-line-height: $line-height !default;
+
+$calendar-header-padding-x: $padding-x !default;
+$calendar-header-padding-y: $padding-y !default;
+$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
+$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
+$calendar-header-border-width: 1px !default;
+
+$calendar-header-min-width: 280px !default;
+
+$calendar-content-padding-x: $calendar-header-padding-x !default;
+$calendar-content-padding-y: $calendar-header-padding-y !default;
+
+$calendar-cell-padding-x: .5rem !default;
+$calendar-cell-padding-y: $calendar-cell-padding-x !default;
+$calendar-cell-line-height: $calendar-line-height !default;
+$calendar-cell-size-px: 40px !default;
+$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1rem !default;
+$calendar-cell-border-radius: $border-radius !default;
+
+$calendar-header-cell-padding-x: 0px !default;
+$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
+$calendar-header-cell-font-size: $font-size-sm !default;
+$calendar-header-cell-line-height: 2 !default;
+
+$calendar-header-height: 2em !default;
+
+$calendar-navigation-width: 5em !default;
+$calendar-navigation-item-height: 2em !default;
+
+$calendar-view-width: 7 * $calendar-cell-size !default;
+$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
+
+$calendar-bg: $component-bg !default;
+$calendar-text: $component-text !default;
+$calendar-border: $component-border !default;
+
+$calendar-header-bg: $header-bg !default;
+$calendar-header-text: $header-text !default;
+$calendar-header-border: $header-border !default;
+$calendar-header-gradient: $header-gradient !default;
+$calendar-header-shadow: none !default;
+
+$calendar-header-button-hovered-bg: $button-hovered-bg !default;
+$calendar-header-button-hovered-text: $button-hovered-text !default;
+$calendar-header-button-hovered-border: $button-hovered-border !default;
+$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
+
+$calendar-header-button-pressed-bg: $button-pressed-bg !default;
+$calendar-header-button-pressed-text: $button-pressed-text !default;
+$calendar-header-button-pressed-border: $button-pressed-border !default;
+$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
+$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
+
+$calendar-header-cell-text: null !default;
+$calendar-header-cell-opacity: $disabled-opacity !default;
+
+$calendar-navigation-bg: $calendar-header-bg !default;
+$calendar-navigation-text: $calendar-header-text !default;
+$calendar-navigation-border: $calendar-header-border !default;
+
+$calendar-today-nav-text: $link-text !default;
+$calendar-today-nav-hovered-text: $link-hover-text !default;
+
+$calendar-weekend-text: inherit !default;
+$calendar-weekend-bg: transparent !default;
+$calendar-weekend-opacity: 1 !default;
+
+$calendar-today-style: box !default;
+$calendar-today-color: $primary !default;
+
+$calendar-week-number-bg: transparent !default;
+$calendar-week-number-text: $calendar-header-cell-text !default;
+$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-cell-hovered-bg: $node-hovered-bg !default;
+$calendar-cell-hovered-text: $node-hovered-text !default;
+$calendar-cell-hovered-border: $node-hovered-border !default;
+
+$calendar-cell-selected-bg: $node-selected-bg !default;
+$calendar-cell-selected-text: $node-selected-text !default;
+$calendar-cell-selected-border: $node-selected-border !default;
+
+$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
+$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba($primary-button-pressed-border, .5) !default;
+
+
+// Multiview Calendar
+$multiviewcalendar-button-style: stretched !default;
+$multiviewcalendar-button-size: 50px !default;
+$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
+$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
+$multiviewcalendar-content-padding-y: 0px !default;
+$multiviewcalendar-navigation-margin-x: 0px !default;
+$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
diff --git a/packages/bootstrap/scss/datetime/_index.scss b/packages/bootstrap/scss/datetime/_index.scss
index 824b7530506..657c765bb57 100644
--- a/packages/bootstrap/scss/datetime/_index.scss
+++ b/packages/bootstrap/scss/datetime/_index.scss
@@ -11,5 +11,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/bootstrap/scss/datetime/_variables.scss b/packages/bootstrap/scss/datetime/_variables.scss
new file mode 100644
index 00000000000..c06eebb9f1d
--- /dev/null
+++ b/packages/bootstrap/scss/datetime/_variables.scss
@@ -0,0 +1,47 @@
+// DateTime
+$time-highlight-size: 1px;
+
+$time-list-highlight-color: $component-border !default;
+$time-list-focused-bg: rgba(0, 0, 0, .02) !default;
+$time-list-title-focus: black !default;
+
+$time-header-padding: $padding-y $padding-x !default;
+$timepicker-header-height: 2em;
+
+$time-list-padding: $padding-y * 5 !default;
+$time-list-focus-size: 2px !default;
+$time-list-width: 5em !default;
+$time-list-height: 200px !default;
+
+$dateinput-text: null !default;
+
+$datetime-width: ((4 * $time-list-width) + 1em) !default;
+
+$datetime-bg: $input-bg !default;
+$datetime-text: $input-text !default;
+$datetime-border: $input-border !default;
+
+$datetime-hovered-bg: $input-hovered-bg !default;
+$datetime-hovered-text: $input-hovered-text !default;
+$datetime-hovered-border: $input-hovered-border !default;
+
+$datetime-focused-bg: $input-focused-bg !default;
+$datetime-focused-text: $input-focused-text !default;
+$datetime-focused-border: $input-focused-border !default;
+$datetime-focused-shadow: $input-focused-shadow !default;
+
+$datetime-select-bg: $button-bg !default;
+$datetime-select-text: $button-text !default;
+$datetime-select-border: $button-border !default;
+$datetime-select-gradient: $button-gradient !default;
+
+$datetime-select-hovered-bg: $button-hovered-bg !default;
+$datetime-select-hovered-text: $button-hovered-text !default;
+$datetime-select-hovered-border: $button-hovered-border !default;
+$datetime-select-hovered-gradient: $button-hovered-gradient !default;
+
+$datetime-select-focused-bg: $button-pressed-bg !default;
+$datetime-select-focused-text: $button-pressed-text !default;
+$datetime-select-focused-border: $button-pressed-border !default;
+$datetime-select-focused-gradient: $button-pressed-gradient !default;
+$datetime-select-focused-shadow: $button-pressed-shadow !default;
diff --git a/packages/classic/scss/_variables.scss b/packages/classic/scss/_variables.scss
index 15d2523883a..2c51b89f54c 100644
--- a/packages/classic/scss/_variables.scss
+++ b/packages/classic/scss/_variables.scss
@@ -1492,158 +1492,6 @@ $rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
 $rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;
 
 
-// Calendar
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: $line-height !default;
-
-$calendar-header-padding-x: ($padding-x * 2) !default;
-$calendar-header-padding-y: ($padding-y * 2) !default;
-$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
-$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
-$calendar-header-border-width: 1px !default;
-
-$calendar-header-min-width: 280px !default;
-
-$calendar-content-padding-x: $calendar-header-padding-x !default;
-$calendar-content-padding-y: $calendar-header-padding-y !default;
-
-$calendar-cell-padding-x: .5em !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-size-px: 34px !default;
-$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
-$calendar-cell-border-radius: $border-radius !default;
-
-$calendar-header-cell-padding-x: 0 !default;
-$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-
-$calendar-header-height: 2em !default;
-
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
-
-$calendar-view-width: 7 * $calendar-cell-size !default;
-$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
-
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
-
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
-$calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
-
-$calendar-header-button-hovered-bg: $button-hovered-bg !default;
-$calendar-header-button-hovered-text: $button-hovered-text !default;
-$calendar-header-button-hovered-border: $button-hovered-border !default;
-$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
-
-$calendar-header-button-pressed-bg: $button-pressed-bg !default;
-$calendar-header-button-pressed-text: $button-pressed-text !default;
-$calendar-header-button-pressed-border: $button-pressed-border !default;
-$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
-$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
-
-$calendar-header-cell-text: null !default;
-$calendar-header-cell-opacity: $disabled-opacity !default;
-
-$calendar-navigation-bg: $calendar-header-bg !default;
-$calendar-navigation-text: $calendar-header-text !default;
-$calendar-navigation-border: $calendar-header-border !default;
-
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hovered-text: $link-hover-text !default;
-
-$calendar-weekend-text: inherit !default;
-$calendar-weekend-bg: transparent !default;
-$calendar-weekend-opacity: 1 !default;
-
-$calendar-today-style: null !default;
-$calendar-today-color: null !default;
-
-$calendar-week-number-bg: transparent !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
-$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-cell-hovered-bg: $node-hovered-bg !default;
-$calendar-cell-hovered-text: $node-hovered-text !default;
-$calendar-cell-hovered-border: $node-hovered-border !default;
-
-$calendar-cell-selected-bg: $node-selected-bg !default;
-$calendar-cell-selected-text: $node-selected-text !default;
-$calendar-cell-selected-border: $node-selected-border !default;
-
-$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
-
-
-// Multiview Calendar
-$multiviewcalendar-button-style: stretched !default;
-$multiviewcalendar-button-size: 44px !default;
-$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
-$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2);
-$multiviewcalendar-content-padding-y: 0 !default;
-$multiviewcalendar-navigation-margin-x: 0 !default;
-$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
-
-
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-highlight-color: $border-color !default;
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
-$time-list-title-focus: black !default;
-
-$time-header-padding: null !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
-$time-list-height: 200px !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-focused-bg: null !default;
-$datetime-select-focused-text: null !default;
-$datetime-select-focused-border: null !default;
-$datetime-select-focused-gradient: null !default;
-$datetime-select-focused-shadow: $button-focused-shadow !default;
-
-
 // Menu
 $menu-padding-x: 0 !default;
 $menu-padding-y: 0 !default;
diff --git a/packages/classic/scss/calendar/_index.scss b/packages/classic/scss/calendar/_index.scss
index 70ef9c6607e..955e68078da 100644
--- a/packages/classic/scss/calendar/_index.scss
+++ b/packages/classic/scss/calendar/_index.scss
@@ -1,3 +1,4 @@
 // Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/calendar/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/calendar/_theme.scss";
diff --git a/packages/classic/scss/calendar/_variables.scss b/packages/classic/scss/calendar/_variables.scss
new file mode 100644
index 00000000000..8ca434ec64d
--- /dev/null
+++ b/packages/classic/scss/calendar/_variables.scss
@@ -0,0 +1,101 @@
+// Calendar
+$calendar-border-width: 1px !default;
+$calendar-font-family: $font-family !default;
+$calendar-font-size: $font-size !default;
+$calendar-line-height: $line-height !default;
+
+$calendar-header-padding-x: ($padding-x * 2) !default;
+$calendar-header-padding-y: ($padding-y * 2) !default;
+$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
+$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
+$calendar-header-border-width: 1px !default;
+
+$calendar-header-min-width: 280px !default;
+
+$calendar-content-padding-x: $calendar-header-padding-x !default;
+$calendar-content-padding-y: $calendar-header-padding-y !default;
+
+$calendar-cell-padding-x: .5em !default;
+$calendar-cell-padding-y: $calendar-cell-padding-x !default;
+$calendar-cell-line-height: $calendar-line-height !default;
+$calendar-cell-size-px: 34px !default;
+$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
+$calendar-cell-border-radius: $border-radius !default;
+
+$calendar-header-cell-padding-x: 0 !default;
+$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
+$calendar-header-cell-font-size: $font-size-sm !default;
+$calendar-header-cell-line-height: 2 !default;
+
+$calendar-header-height: 2em !default;
+
+$calendar-navigation-width: 5em !default;
+$calendar-navigation-item-height: 2em !default;
+
+$calendar-view-width: 7 * $calendar-cell-size !default;
+$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
+
+$calendar-bg: $component-bg !default;
+$calendar-text: $component-text !default;
+$calendar-border: $component-border !default;
+
+$calendar-header-bg: $header-bg !default;
+$calendar-header-text: $header-text !default;
+$calendar-header-border: $header-border !default;
+$calendar-header-gradient: $header-gradient !default;
+$calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
+
+$calendar-header-button-hovered-bg: $button-hovered-bg !default;
+$calendar-header-button-hovered-text: $button-hovered-text !default;
+$calendar-header-button-hovered-border: $button-hovered-border !default;
+$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
+
+$calendar-header-button-pressed-bg: $button-pressed-bg !default;
+$calendar-header-button-pressed-text: $button-pressed-text !default;
+$calendar-header-button-pressed-border: $button-pressed-border !default;
+$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
+$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
+
+$calendar-header-cell-text: null !default;
+$calendar-header-cell-opacity: $disabled-opacity !default;
+
+$calendar-navigation-bg: $calendar-header-bg !default;
+$calendar-navigation-text: $calendar-header-text !default;
+$calendar-navigation-border: $calendar-header-border !default;
+
+$calendar-today-nav-text: $link-text !default;
+$calendar-today-nav-hovered-text: $link-hover-text !default;
+
+$calendar-weekend-text: inherit !default;
+$calendar-weekend-bg: transparent !default;
+$calendar-weekend-opacity: 1 !default;
+
+$calendar-today-style: null !default;
+$calendar-today-color: null !default;
+
+$calendar-week-number-bg: transparent !default;
+$calendar-week-number-text: $calendar-header-cell-text !default;
+$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-cell-hovered-bg: $node-hovered-bg !default;
+$calendar-cell-hovered-text: $node-hovered-text !default;
+$calendar-cell-hovered-border: $node-hovered-border !default;
+
+$calendar-cell-selected-bg: $node-selected-bg !default;
+$calendar-cell-selected-text: $node-selected-text !default;
+$calendar-cell-selected-border: $node-selected-border !default;
+
+$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
+$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
+
+
+// Multiview Calendar
+$multiviewcalendar-button-style: stretched !default;
+$multiviewcalendar-button-size: 44px !default;
+$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
+$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2);
+$multiviewcalendar-content-padding-y: 0 !default;
+$multiviewcalendar-navigation-margin-x: 0 !default;
+$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
diff --git a/packages/classic/scss/datetime/_index.scss b/packages/classic/scss/datetime/_index.scss
index 870884688fd..0cba7c65e41 100644
--- a/packages/classic/scss/datetime/_index.scss
+++ b/packages/classic/scss/datetime/_index.scss
@@ -1,3 +1,4 @@
 // Component
+@import "_variables.scss";
 @import "~@progress/kendo-theme-default/scss/datetime/_layout.scss";
 @import "~@progress/kendo-theme-default/scss/datetime/_theme.scss";
diff --git a/packages/classic/scss/datetime/_variables.scss b/packages/classic/scss/datetime/_variables.scss
new file mode 100644
index 00000000000..79282e81ad5
--- /dev/null
+++ b/packages/classic/scss/datetime/_variables.scss
@@ -0,0 +1,47 @@
+// DateTime
+$time-highlight-size: 1px;
+
+$time-list-highlight-color: $border-color !default;
+$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+$time-list-title-focus: black !default;
+
+$time-header-padding: null !default;
+$timepicker-header-height: 2em;
+
+$time-list-padding: $padding-y * 5 !default;
+$time-list-focus-size: 2px !default;
+$time-list-width: 5em !default;
+$time-list-height: 200px !default;
+
+$dateinput-text: null !default;
+
+$datetime-width: ((4 * $time-list-width) + 1em) !default;
+
+$datetime-bg: $input-bg !default;
+$datetime-text: $input-text !default;
+$datetime-border: $input-border !default;
+
+$datetime-hovered-bg: $input-hovered-bg !default;
+$datetime-hovered-text: $input-hovered-text !default;
+$datetime-hovered-border: $input-hovered-border !default;
+
+$datetime-focused-bg: $input-focused-bg !default;
+$datetime-focused-text: $input-focused-text !default;
+$datetime-focused-border: $input-focused-border !default;
+$datetime-focused-shadow: $input-focused-shadow !default;
+
+$datetime-select-bg: $button-bg !default;
+$datetime-select-text: $button-text !default;
+$datetime-select-border: $button-border !default;
+$datetime-select-gradient: $button-gradient !default;
+
+$datetime-select-hovered-bg: $button-hovered-bg !default;
+$datetime-select-hovered-text: $button-hovered-text !default;
+$datetime-select-hovered-border: $button-hovered-border !default;
+$datetime-select-hovered-gradient: $button-hovered-gradient !default;
+
+$datetime-select-focused-bg: null !default;
+$datetime-select-focused-text: null !default;
+$datetime-select-focused-border: null !default;
+$datetime-select-focused-gradient: null !default;
+$datetime-select-focused-shadow: $button-focused-shadow !default;
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
index 39930d8075b..3f62ee5de89 100644
--- a/packages/default/scss/_variables.scss
+++ b/packages/default/scss/_variables.scss
@@ -1548,158 +1548,6 @@ $rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
 $rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($selected-bg, .4) !default;
 
 
-// Calendar
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: $line-height !default;
-
-$calendar-header-padding-x: ($padding-x * 2) !default;
-$calendar-header-padding-y: ($padding-y * 2) !default;
-$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
-$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
-$calendar-header-border-width: 1px !default;
-
-$calendar-header-min-width: 280px !default;
-
-$calendar-content-padding-x: $calendar-header-padding-x !default;
-$calendar-content-padding-y: $calendar-header-padding-y !default;
-
-$calendar-cell-padding-x: .5em !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-size-px: 34px !default;
-$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
-$calendar-cell-border-radius: $border-radius !default;
-
-$calendar-header-cell-padding-x: 0px !default;
-$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-
-$calendar-header-height: 2em !default;
-
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
-
-$calendar-view-width: 7 * $calendar-cell-size !default;
-$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
-
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
-
-$calendar-header-bg: $header-bg !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: $header-gradient !default;
-$calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
-
-$calendar-header-button-hovered-bg: $button-hovered-bg !default;
-$calendar-header-button-hovered-text: $button-hovered-text !default;
-$calendar-header-button-hovered-border: $button-hovered-border !default;
-$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
-
-$calendar-header-button-pressed-bg: $button-pressed-bg !default;
-$calendar-header-button-pressed-text: $button-pressed-text !default;
-$calendar-header-button-pressed-border: $button-pressed-border !default;
-$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
-$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
-
-$calendar-header-cell-text: null !default;
-$calendar-header-cell-opacity: $disabled-opacity !default;
-
-$calendar-navigation-bg: $calendar-header-bg !default;
-$calendar-navigation-text: $calendar-header-text !default;
-$calendar-navigation-border: $calendar-header-border !default;
-
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hovered-text: $link-hover-text !default;
-
-$calendar-weekend-text: inherit !default;
-$calendar-weekend-bg: transparent !default;
-$calendar-weekend-opacity: 1 !default;
-
-$calendar-today-style: color !default;
-$calendar-today-color: $primary !default;
-
-$calendar-week-number-bg: transparent !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
-$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-cell-hovered-bg: $node-hovered-bg !default;
-$calendar-cell-hovered-text: $node-hovered-text !default;
-$calendar-cell-hovered-border: $node-hovered-border !default;
-
-$calendar-cell-selected-bg: $node-selected-bg !default;
-$calendar-cell-selected-text: $node-selected-text !default;
-$calendar-cell-selected-border: $node-selected-border !default;
-
-$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
-
-
-// Multiview Calendar
-$multiviewcalendar-button-style: stretched !default;
-$multiviewcalendar-button-size: 44px !default;
-$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
-$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2);
-$multiviewcalendar-content-padding-y: 0px !default;
-$multiviewcalendar-navigation-margin-x: 0px !default;
-$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
-
-
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-highlight-color: $border-color !default;
-$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
-$time-list-title-focus: black !default;
-
-$time-header-padding: null !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
-$time-list-height: 200px !default;
-
-$dateinput-text: null !default;
-
-$datetime-width: ((4 * $time-list-width) + 1em) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-focused-bg: null !default;
-$datetime-select-focused-text: null !default;
-$datetime-select-focused-border: null !default;
-$datetime-select-focused-gradient: null !default;
-$datetime-select-focused-shadow: $button-focused-shadow !default;
-
-
 // Menu
 $menu-padding-x: 0px !default;
 $menu-padding-y: 0px !default;
diff --git a/packages/default/scss/calendar/_index.scss b/packages/default/scss/calendar/_index.scss
index 5df38dfa2fc..190671b520d 100644
--- a/packages/default/scss/calendar/_index.scss
+++ b/packages/default/scss/calendar/_index.scss
@@ -9,5 +9,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/default/scss/calendar/_variables.scss b/packages/default/scss/calendar/_variables.scss
new file mode 100644
index 00000000000..f91f840e299
--- /dev/null
+++ b/packages/default/scss/calendar/_variables.scss
@@ -0,0 +1,101 @@
+// Calendar
+$calendar-border-width: 1px !default;
+$calendar-font-family: $font-family !default;
+$calendar-font-size: $font-size !default;
+$calendar-line-height: $line-height !default;
+
+$calendar-header-padding-x: ($padding-x * 2) !default;
+$calendar-header-padding-y: ($padding-y * 2) !default;
+$calendar-header-padding-x-sm: ($calendar-header-padding-y / 2) !default;
+$calendar-header-padding-y-sm: $calendar-header-padding-x-sm !default;
+$calendar-header-border-width: 1px !default;
+
+$calendar-header-min-width: 280px !default;
+
+$calendar-content-padding-x: $calendar-header-padding-x !default;
+$calendar-content-padding-y: $calendar-header-padding-y !default;
+
+$calendar-cell-padding-x: .5em !default;
+$calendar-cell-padding-y: $calendar-cell-padding-x !default;
+$calendar-cell-line-height: $calendar-line-height !default;
+$calendar-cell-size-px: 34px !default;
+$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
+$calendar-cell-border-radius: $border-radius !default;
+
+$calendar-header-cell-padding-x: 0px !default;
+$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
+$calendar-header-cell-font-size: $font-size-sm !default;
+$calendar-header-cell-line-height: 2 !default;
+
+$calendar-header-height: 2em !default;
+
+$calendar-navigation-width: 5em !default;
+$calendar-navigation-item-height: 2em !default;
+
+$calendar-view-width: 7 * $calendar-cell-size !default;
+$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
+
+$calendar-bg: $component-bg !default;
+$calendar-text: $component-text !default;
+$calendar-border: $component-border !default;
+
+$calendar-header-bg: $header-bg !default;
+$calendar-header-text: $header-text !default;
+$calendar-header-border: $header-border !default;
+$calendar-header-gradient: $header-gradient !default;
+$calendar-header-shadow: 0 1px 3px 1px rgba(black, .1) !default;
+
+$calendar-header-button-hovered-bg: $button-hovered-bg !default;
+$calendar-header-button-hovered-text: $button-hovered-text !default;
+$calendar-header-button-hovered-border: $button-hovered-border !default;
+$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
+
+$calendar-header-button-pressed-bg: $button-pressed-bg !default;
+$calendar-header-button-pressed-text: $button-pressed-text !default;
+$calendar-header-button-pressed-border: $button-pressed-border !default;
+$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
+$calendar-header-button-pressed-shadow: $button-pressed-shadow !default;
+
+$calendar-header-cell-text: null !default;
+$calendar-header-cell-opacity: $disabled-opacity !default;
+
+$calendar-navigation-bg: $calendar-header-bg !default;
+$calendar-navigation-text: $calendar-header-text !default;
+$calendar-navigation-border: $calendar-header-border !default;
+
+$calendar-today-nav-text: $link-text !default;
+$calendar-today-nav-hovered-text: $link-hover-text !default;
+
+$calendar-weekend-text: inherit !default;
+$calendar-weekend-bg: transparent !default;
+$calendar-weekend-opacity: 1 !default;
+
+$calendar-today-style: color !default;
+$calendar-today-color: $primary !default;
+
+$calendar-week-number-bg: transparent !default;
+$calendar-week-number-text: $calendar-header-cell-text !default;
+$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-other-month-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-cell-hovered-bg: $node-hovered-bg !default;
+$calendar-cell-hovered-text: $node-hovered-text !default;
+$calendar-cell-hovered-border: $node-hovered-border !default;
+
+$calendar-cell-selected-bg: $node-selected-bg !default;
+$calendar-cell-selected-text: $node-selected-text !default;
+$calendar-cell-selected-border: $node-selected-border !default;
+
+$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
+$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
+
+
+// Multiview Calendar
+$multiviewcalendar-button-style: stretched !default;
+$multiviewcalendar-button-size: 44px !default;
+$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
+$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2);
+$multiviewcalendar-content-padding-y: 0px !default;
+$multiviewcalendar-navigation-margin-x: 0px !default;
+$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
diff --git a/packages/default/scss/datetime/_index.scss b/packages/default/scss/datetime/_index.scss
index 824b7530506..657c765bb57 100644
--- a/packages/default/scss/datetime/_index.scss
+++ b/packages/default/scss/datetime/_index.scss
@@ -11,5 +11,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/default/scss/datetime/_variables.scss b/packages/default/scss/datetime/_variables.scss
new file mode 100644
index 00000000000..79282e81ad5
--- /dev/null
+++ b/packages/default/scss/datetime/_variables.scss
@@ -0,0 +1,47 @@
+// DateTime
+$time-highlight-size: 1px;
+
+$time-list-highlight-color: $border-color !default;
+$time-list-focused-bg: rgba(0, 0, 0, .04) !default;
+$time-list-title-focus: black !default;
+
+$time-header-padding: null !default;
+$timepicker-header-height: 2em;
+
+$time-list-padding: $padding-y * 5 !default;
+$time-list-focus-size: 2px !default;
+$time-list-width: 5em !default;
+$time-list-height: 200px !default;
+
+$dateinput-text: null !default;
+
+$datetime-width: ((4 * $time-list-width) + 1em) !default;
+
+$datetime-bg: $input-bg !default;
+$datetime-text: $input-text !default;
+$datetime-border: $input-border !default;
+
+$datetime-hovered-bg: $input-hovered-bg !default;
+$datetime-hovered-text: $input-hovered-text !default;
+$datetime-hovered-border: $input-hovered-border !default;
+
+$datetime-focused-bg: $input-focused-bg !default;
+$datetime-focused-text: $input-focused-text !default;
+$datetime-focused-border: $input-focused-border !default;
+$datetime-focused-shadow: $input-focused-shadow !default;
+
+$datetime-select-bg: $button-bg !default;
+$datetime-select-text: $button-text !default;
+$datetime-select-border: $button-border !default;
+$datetime-select-gradient: $button-gradient !default;
+
+$datetime-select-hovered-bg: $button-hovered-bg !default;
+$datetime-select-hovered-text: $button-hovered-text !default;
+$datetime-select-hovered-border: $button-hovered-border !default;
+$datetime-select-hovered-gradient: $button-hovered-gradient !default;
+
+$datetime-select-focused-bg: null !default;
+$datetime-select-focused-text: null !default;
+$datetime-select-focused-border: null !default;
+$datetime-select-focused-gradient: null !default;
+$datetime-select-focused-shadow: $button-focused-shadow !default;
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index 7406e56949f..48b85c5532c 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -1591,158 +1591,6 @@ $rating-icon-focused-shadow: 0 2px 3.6px rgba(black, .1) !default;
 $rating-icon-focused-selected-shadow: 0 2px 3.6px rgba($primary, .4) !default;
 
 
-// Calendar
-$calendar-border-width: 1px !default;
-$calendar-font-family: $font-family !default;
-$calendar-font-size: $font-size !default;
-$calendar-line-height: (20 / 14) !default;
-
-$calendar-header-padding-x: $padding-x !default;
-$calendar-header-padding-y: ($padding-y * 2) !default;
-$calendar-header-padding-x-sm: 0px !default;
-$calendar-header-padding-y-sm: $calendar-header-padding-y !default;
-$calendar-header-border-width: 0px !default;
-
-$calendar-header-min-width: 300px !default;
-
-$calendar-content-padding-x: $calendar-header-padding-x !default;
-$calendar-content-padding-y: $calendar-header-padding-y !default;
-
-$calendar-cell-padding-x: .75em !default;
-$calendar-cell-padding-y: $calendar-cell-padding-x !default;
-$calendar-cell-line-height: $calendar-line-height !default;
-$calendar-cell-size-px: 40px !default;
-$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
-$calendar-cell-border-radius: 100px !default;
-
-$calendar-header-cell-padding-x: 0px !default;
-$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
-$calendar-header-cell-font-size: $font-size-sm !default;
-$calendar-header-cell-line-height: 2 !default;
-
-$calendar-header-height: 2em !default;
-
-$calendar-navigation-width: 5em !default;
-$calendar-navigation-item-height: 2em !default;
-
-$calendar-view-width: 7 * $calendar-cell-size !default;
-$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
-
-$calendar-bg: $component-bg !default;
-$calendar-text: $component-text !default;
-$calendar-border: $component-border !default;
-
-$calendar-header-bg: null !default;
-$calendar-header-text: $header-text !default;
-$calendar-header-border: $header-border !default;
-$calendar-header-gradient: null !default;
-$calendar-header-shadow: null !default;
-
-$calendar-header-button-hovered-bg: $button-hovered-bg !default;
-$calendar-header-button-hovered-text: $button-hovered-text !default;
-$calendar-header-button-hovered-border: $button-hovered-border !default;
-$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
-
-$calendar-header-button-pressed-bg: true-mix( $button-text, $button-bg, 16%) !default;
-$calendar-header-button-pressed-text: $button-pressed-text !default;
-$calendar-header-button-pressed-border: $button-pressed-border !default;
-$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
-$calendar-header-button-pressed-shadow: null !default;
-
-$calendar-header-cell-text: $calendar-header-text !default;
-$calendar-header-cell-opacity: .38 !default;
-
-$calendar-navigation-bg: true-mix( $calendar-text, $calendar-bg, 3) !default;
-$calendar-navigation-text: $calendar-text !default;
-$calendar-navigation-border: $calendar-border !default;
-
-$calendar-today-nav-text: $link-text !default;
-$calendar-today-nav-hovered-text: $link-hover-text !default;
-
-$calendar-weekend-text: inherit !default;
-$calendar-weekend-bg: transparent !default;
-$calendar-weekend-opacity: 1 !default;
-
-$calendar-today-style: color !default;
-$calendar-today-color: $primary !default;
-
-$calendar-week-number-bg: transparent !default;
-$calendar-week-number-text: $calendar-header-cell-text !default;
-$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
-
-$calendar-other-month-opacity: 1 !default;
-
-$calendar-cell-hovered-bg: $node-hovered-bg !default;
-$calendar-cell-hovered-text: $node-hovered-text !default;
-$calendar-cell-hovered-border: $node-hovered-border !default;
-
-$calendar-cell-selected-bg: $primary !default;
-$calendar-cell-selected-text: contrast-wcag( $calendar-cell-selected-bg ) !default;
-$calendar-cell-selected-border: $calendar-cell-selected-bg !default;
-
-$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
-
-
-// Multiview Calendar
-$multiviewcalendar-button-style: detached !default;
-$multiviewcalendar-button-size: 40px !default;
-$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
-$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
-$multiviewcalendar-content-padding-y: 0px !default;
-$multiviewcalendar-navigation-margin-x: 0px !default;
-$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
-
-
-// DateTime
-$time-highlight-size: 1px;
-
-$time-list-highlight-color: null !default;
-$time-list-focused-bg: null !default;
-$time-list-title-focus: null !default;
-
-$time-header-padding: null !default;
-$timepicker-header-height: 2em;
-
-$time-list-padding: $padding-y * 5 !default;
-$time-list-focus-size: 2px !default;
-$time-list-width: 5em !default;
-$time-list-height: 200px !default;
-
-$dateinput-text: $component-text !default;
-
-$datetime-width: calc( #{$calendar-cell-size * 8} + #{$calendar-content-padding-x * 2} ) !default;
-
-$datetime-bg: $input-bg !default;
-$datetime-text: $input-text !default;
-$datetime-border: $input-border !default;
-
-$datetime-hovered-bg: $input-hovered-bg !default;
-$datetime-hovered-text: $input-hovered-text !default;
-$datetime-hovered-border: $input-hovered-border !default;
-
-$datetime-focused-bg: $input-focused-bg !default;
-$datetime-focused-text: $input-focused-text !default;
-$datetime-focused-border: $input-focused-border !default;
-$datetime-focused-shadow: $input-focused-shadow !default;
-
-$datetime-select-bg: $button-bg !default;
-$datetime-select-text: $button-text !default;
-$datetime-select-border: $button-border !default;
-$datetime-select-gradient: $button-gradient !default;
-
-$datetime-select-hovered-bg: $button-hovered-bg !default;
-$datetime-select-hovered-text: $button-hovered-text !default;
-$datetime-select-hovered-border: $button-hovered-border !default;
-$datetime-select-hovered-gradient: $button-hovered-gradient !default;
-
-$datetime-select-focused-bg: null !default;
-$datetime-select-focused-text: null !default;
-$datetime-select-focused-border: null !default;
-$datetime-select-focused-gradient: null !default;
-$datetime-select-focused-shadow: null !default;
-
-
 // Menu
 $menu-padding-x: 0px !default;
 $menu-padding-y: 0px !default;
diff --git a/packages/material/scss/calendar/_index.scss b/packages/material/scss/calendar/_index.scss
index 5df38dfa2fc..190671b520d 100644
--- a/packages/material/scss/calendar/_index.scss
+++ b/packages/material/scss/calendar/_index.scss
@@ -9,5 +9,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/material/scss/calendar/_variables.scss b/packages/material/scss/calendar/_variables.scss
new file mode 100644
index 00000000000..3b64b008af7
--- /dev/null
+++ b/packages/material/scss/calendar/_variables.scss
@@ -0,0 +1,101 @@
+// Calendar
+$calendar-border-width: 1px !default;
+$calendar-font-family: $font-family !default;
+$calendar-font-size: $font-size !default;
+$calendar-line-height: (20 / 14) !default;
+
+$calendar-header-padding-x: $padding-x !default;
+$calendar-header-padding-y: ($padding-y * 2) !default;
+$calendar-header-padding-x-sm: 0px !default;
+$calendar-header-padding-y-sm: $calendar-header-padding-y !default;
+$calendar-header-border-width: 0px !default;
+
+$calendar-header-min-width: 300px !default;
+
+$calendar-content-padding-x: $calendar-header-padding-x !default;
+$calendar-content-padding-y: $calendar-header-padding-y !default;
+
+$calendar-cell-padding-x: .75em !default;
+$calendar-cell-padding-y: $calendar-cell-padding-x !default;
+$calendar-cell-line-height: $calendar-line-height !default;
+$calendar-cell-size-px: 40px !default;
+$calendar-cell-size: ($calendar-cell-size-px / $font-size) * 1em !default;
+$calendar-cell-border-radius: 100px !default;
+
+$calendar-header-cell-padding-x: 0px !default;
+$calendar-header-cell-padding-y: ($calendar-cell-padding-y / 2) !default;
+$calendar-header-cell-font-size: $font-size-sm !default;
+$calendar-header-cell-line-height: 2 !default;
+
+$calendar-header-height: 2em !default;
+
+$calendar-navigation-width: 5em !default;
+$calendar-navigation-item-height: 2em !default;
+
+$calendar-view-width: 7 * $calendar-cell-size !default;
+$calendar-view-height: calc( #{$calendar-cell-size * 8} + #{$calendar-header-height} ) !default;
+
+$calendar-bg: $component-bg !default;
+$calendar-text: $component-text !default;
+$calendar-border: $component-border !default;
+
+$calendar-header-bg: null !default;
+$calendar-header-text: $header-text !default;
+$calendar-header-border: $header-border !default;
+$calendar-header-gradient: null !default;
+$calendar-header-shadow: null !default;
+
+$calendar-header-button-hovered-bg: $button-hovered-bg !default;
+$calendar-header-button-hovered-text: $button-hovered-text !default;
+$calendar-header-button-hovered-border: $button-hovered-border !default;
+$calendar-header-button-hovered-gradient: $button-hovered-gradient !default;
+
+$calendar-header-button-pressed-bg: true-mix( $button-text, $button-bg, 16%) !default;
+$calendar-header-button-pressed-text: $button-pressed-text !default;
+$calendar-header-button-pressed-border: $button-pressed-border !default;
+$calendar-header-button-pressed-gradient: $button-pressed-gradient !default;
+$calendar-header-button-pressed-shadow: null !default;
+
+$calendar-header-cell-text: $calendar-header-text !default;
+$calendar-header-cell-opacity: .38 !default;
+
+$calendar-navigation-bg: true-mix( $calendar-text, $calendar-bg, 3) !default;
+$calendar-navigation-text: $calendar-text !default;
+$calendar-navigation-border: $calendar-border !default;
+
+$calendar-today-nav-text: $link-text !default;
+$calendar-today-nav-hovered-text: $link-hover-text !default;
+
+$calendar-weekend-text: inherit !default;
+$calendar-weekend-bg: transparent !default;
+$calendar-weekend-opacity: 1 !default;
+
+$calendar-today-style: color !default;
+$calendar-today-color: $primary !default;
+
+$calendar-week-number-bg: transparent !default;
+$calendar-week-number-text: $calendar-header-cell-text !default;
+$calendar-week-number-opacity: $calendar-header-cell-opacity !default;
+
+$calendar-other-month-opacity: 1 !default;
+
+$calendar-cell-hovered-bg: $node-hovered-bg !default;
+$calendar-cell-hovered-text: $node-hovered-text !default;
+$calendar-cell-hovered-border: $node-hovered-border !default;
+
+$calendar-cell-selected-bg: $primary !default;
+$calendar-cell-selected-text: contrast-wcag( $calendar-cell-selected-bg ) !default;
+$calendar-cell-selected-border: $calendar-cell-selected-bg !default;
+
+$calendar-cell-focused-shadow: $list-item-focused-shadow !default;
+$calendar-cell-selected-focus-shadow: $calendar-cell-focused-shadow !default;
+
+
+// Multiview Calendar
+$multiviewcalendar-button-style: detached !default;
+$multiviewcalendar-button-size: 40px !default;
+$multiviewcalendar-gap: ($calendar-content-padding-x * 2) !default;
+$multiviewcalendar-content-padding-x: ($multiviewcalendar-gap / 2) !default;
+$multiviewcalendar-content-padding-y: 0px !default;
+$multiviewcalendar-navigation-margin-x: 0px !default;
+$multiviewcalendar-navigation-margin-y: calc( #{$calendar-header-padding-y * 2} + #{$calendar-header-height} + #{$button-border-width * 2} ) !default;
diff --git a/packages/material/scss/datetime/_index.scss b/packages/material/scss/datetime/_index.scss
index 824b7530506..657c765bb57 100644
--- a/packages/material/scss/datetime/_index.scss
+++ b/packages/material/scss/datetime/_index.scss
@@ -11,5 +11,6 @@
 
 
 // Component
+@import "_variables.scss";
 @import "_layout.scss";
 @import "_theme.scss";
diff --git a/packages/material/scss/datetime/_variables.scss b/packages/material/scss/datetime/_variables.scss
new file mode 100644
index 00000000000..39696b54031
--- /dev/null
+++ b/packages/material/scss/datetime/_variables.scss
@@ -0,0 +1,47 @@
+// DateTime
+$time-highlight-size: 1px;
+
+$time-list-highlight-color: null !default;
+$time-list-focused-bg: null !default;
+$time-list-title-focus: null !default;
+
+$time-header-padding: null !default;
+$timepicker-header-height: 2em;
+
+$time-list-padding: $padding-y * 5 !default;
+$time-list-focus-size: 2px !default;
+$time-list-width: 5em !default;
+$time-list-height: 200px !default;
+
+$dateinput-text: $component-text !default;
+
+$datetime-width: calc( #{$calendar-cell-size * 8} + #{$calendar-content-padding-x * 2} ) !default;
+
+$datetime-bg: $input-bg !default;
+$datetime-text: $input-text !default;
+$datetime-border: $input-border !default;
+
+$datetime-hovered-bg: $input-hovered-bg !default;
+$datetime-hovered-text: $input-hovered-text !default;
+$datetime-hovered-border: $input-hovered-border !default;
+
+$datetime-focused-bg: $input-focused-bg !default;
+$datetime-focused-text: $input-focused-text !default;
+$datetime-focused-border: $input-focused-border !default;
+$datetime-focused-shadow: $input-focused-shadow !default;
+
+$datetime-select-bg: $button-bg !default;
+$datetime-select-text: $button-text !default;
+$datetime-select-border: $button-border !default;
+$datetime-select-gradient: $button-gradient !default;
+
+$datetime-select-hovered-bg: $button-hovered-bg !default;
+$datetime-select-hovered-text: $button-hovered-text !default;
+$datetime-select-hovered-border: $button-hovered-border !default;
+$datetime-select-hovered-gradient: $button-hovered-gradient !default;
+
+$datetime-select-focused-bg: null !default;
+$datetime-select-focused-text: null !default;
+$datetime-select-focused-border: null !default;
+$datetime-select-focused-gradient: null !default;
+$datetime-select-focused-shadow: null !default;