diff --git a/packages/bootstrap/scss/breadcrumb/_variables.scss b/packages/bootstrap/scss/breadcrumb/_variables.scss
index 25882a03bd7..162919f9d58 100644
--- a/packages/bootstrap/scss/breadcrumb/_variables.scss
+++ b/packages/bootstrap/scss/breadcrumb/_variables.scss
@@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
 $breadcrumb-border: $component-border !default;
 
 $breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
-$breadcrumb-delimiter-icon-padding-x: $button-padding-y !default;
+$breadcrumb-delimiter-icon-padding-x: $kendo-button-padding-y !default;
 $breadcrumb-delimiter-icon-padding-y: 0px !default;
 
 $breadcrumb-link-padding-x: $padding-x-lg / 2 !default;
diff --git a/packages/bootstrap/scss/button/_layout.scss b/packages/bootstrap/scss/button/_layout.scss
index 5dbaebc5438..159f1826e3b 100644
--- a/packages/bootstrap/scss/button/_layout.scss
+++ b/packages/bootstrap/scss/button/_layout.scss
@@ -1,9 +1 @@
 @import "~@progress/kendo-theme-default/scss/button/_layout.scss";
-
-@include exports("button/layout/bootstrap") {
-
-    // Default button
-    .k-button {
-        transition: $transition;
-    }
-}
diff --git a/packages/bootstrap/scss/button/_variables.scss b/packages/bootstrap/scss/button/_variables.scss
index bb1711fed00..71cead1a4ba 100644
--- a/packages/bootstrap/scss/button/_variables.scss
+++ b/packages/bootstrap/scss/button/_variables.scss
@@ -2,197 +2,200 @@
 
 /// Width of the border around the button.
 /// @group button
-$button-border-width: $btn-border-width !default;
+$kendo-button-border-width: $btn-border-width !default;
 
 /// Border radius of the button.
 /// @group button
-$button-border-radius: $border-radius !default;
+$kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$button-padding-x: $btn-padding-x !default;
-$button-padding-x-sm: null !default;
-$button-padding-x-md: null !default;
-$button-padding-x-lg: null !default;
+$kendo-button-padding-x: $btn-padding-x !default;
+$kendo-button-padding-x-sm: $btn-padding-x-sm !default;
+$kendo-button-padding-x-md: $btn-padding-x !default;
+$kendo-button-padding-x-lg: $btn-padding-x-lg !default;
 
 /// Vertical padding of the button.
 /// @group button
-$button-padding-y: $btn-padding-y !default;
-$button-padding-y-sm: null !default;
-$button-padding-y-md: null !default;
-$button-padding-y-lg: null !default;
+$kendo-button-padding-y: $btn-padding-y !default;
+$kendo-button-padding-y-sm: $btn-padding-y-sm !default;
+$kendo-button-padding-y-md: $btn-padding-y !default;
+$kendo-button-padding-y-lg: $btn-padding-y-lg !default;
 
 /// Font family of the button.
 /// @group button
-$button-font-family: $font-family !default;
+$kendo-button-font-family: $font-family !default;
 
-/// Font size of the button.
+/// Font sizes of the button.
 /// @group button
-$button-font-size: $font-size !default;
-$button-font-size-sm: null !default;
-$button-font-size-md: null !default;
-$button-font-size-lg: null !default;
+$kendo-button-font-size: $btn-font-size !default;
+$kendo-button-font-size-sm: $btn-font-size-sm !default;
+$kendo-button-font-size-md: $btn-font-size !default;
+$kendo-button-font-size-lg: $btn-font-size-lg !default;
 
-/// Line height used along with $font-size.
+/// Line heights used along with $font-size.
 /// @group button
-$button-line-height: $btn-line-height !default;
-$button-line-height-sm: null !default;
-$button-line-height-md: null !default;
-$button-line-height-lg: null !default;
+$kendo-button-line-height: $btn-line-height !default;
+$kendo-button-line-height-sm: $btn-line-height !default;
+$kendo-button-line-height-md: $btn-line-height !default;
+$kendo-button-line-height-lg: $btn-line-height !default;
 
 /// Calculated height of the button.
 /// @group button
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
-$button-arrow-padding-x: $button-padding-y !default;
-$button-arrow-padding-y: $button-padding-y !default;
+$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 
 /// Theme colors map for the button.
 /// @group button
-$button-theme-colors: (
-    "primary": map-get( $theme-colors, primary ),
-    "secondary": map-get( $theme-colors, secondary ),
-    "tertiary": map-get( $theme-colors, tertiary ),
-    "info": map-get( $theme-colors, info ),
-    "success": map-get( $theme-colors, success ),
-    "warning": map-get( $theme-colors, warning ),
-    "error": map-get( $theme-colors, error ),
-    "dark": map-get( $theme-colors, dark ),
-    "light": map-get( $theme-colors, light ),
-    "inverse": map-get( $theme-colors, inverse )
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": #e4e7eb )
 ) !default;
 
-/// The background of the buttons.
+/// The base background of the button.
 /// @group button
-$button-bg: #e4e7eb !default;
-/// The text color of the buttons.
+$kendo-button-bg: #e4e7eb !default;
+/// The base text color of the button.
 /// @group button
-$button-text: contrast-wcag( $button-bg, $gray-900 ) !default;
-/// The border color of the buttons.
+$kendo-button-text: contrast-wcag( $kendo-button-bg, $gray-900 ) !default;
+/// The base border color of the button.
 /// @group button
-$button-border: $button-bg !default;
-/// The background gradient of the buttons.
+$kendo-button-border: $kendo-button-bg !default;
+/// The base background gradient of the button.
 /// @group button
-$button-gradient: null !default;
-$button-shadow: null !default;
+$kendo-button-gradient: null !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: null !default;
 
-/// The background of hovered buttons.
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: try-darken( $kendo-button-bg, 7.5% ) !default;
+/// The base text color of hovered button.
 /// @group button
-$button-hovered-bg: try-darken( $button-bg, 7.5% ) !default;
-/// The text color of hovered buttons.
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
 /// @group button
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
+$kendo-button-hover-border: try-darken( $kendo-button-bg, 10% ) !default;
+/// The base background gradient of hovered button.
 /// @group button
-$button-hovered-border: try-darken( $button-bg, 10% ) !default;
-/// The background gradient of hovered buttons.
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
 /// @group button
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
+$kendo-button-hover-shadow: null !default;
 
-/// The background color of active buttons.
+/// The base background color of active button.
 /// @group button
-$button-active-bg: try-darken( $button-bg, 10% ) !default;
-/// The text color of active buttons.
+$kendo-button-active-bg: try-darken( $kendo-button-bg, 10% ) !default;
+/// The base text color of active button.
 /// @group button
-$button-active-text: null !default;
-/// The border color of active buttons.
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
 /// @group button
-$button-active-border: try-darken( $button-bg, 12.5% ) !default;
-/// The background gradient of active buttons.
+$kendo-button-active-border: try-darken( $kendo-button-bg, 12.5% ) !default;
+/// The base background gradient of active button.
 /// @group button
-$button-active-gradient: null !default;
-$button-active-shadow: null !default;
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: null !default;
 
-/// The background color of selected buttons.
+/// The base background color of selected button.
 /// @group button
-$button-selected-bg: try-darken( $primary, 10% ) !default;
+$kendo-button-selected-bg: try-darken( $primary, 10% ) !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
+$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: try-darken( $primary, 12.5% ) !default;
+$kendo-button-selected-border: try-darken( $primary, 12.5% ) !default;
 /// The background gradient of selected buttons.
 /// @group button
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group button
-$button-focused-shadow: 0 0 0 .25rem rgba( $button-border, .5 ) !default;
-
-
-// Disabled button
-$button-disabled-bg: null !default;
-$button-disabled-text: null !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: null !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: null !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: try-darken( $primary-button-bg, 7.5% ) !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: try-darken( $primary-button-bg, 10% ) !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: try-darken( $primary-button-bg, 10% ) !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: try-darken( $primary-button-bg, 12.5% ) !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-border !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: 0 0 0 .25rem rgba( $primary-button-border, .5 ) !default;
-
-$solid-button-gradient: null !default;
-$solid-button-shade-function: "try-darken";
-$solid-button-shade-text-amount: 0 !default;
-$solid-button-shade-bg-amount: 0 !default;
-$solid-button-shade-border-amount: 0 !default;
-$solid-button-hover-shade-text-amount: null !default;
-$solid-button-hover-shade-bg-amount: 7.5% !default;
-$solid-button-hover-shade-border-amount: 10% !default;
-$solid-button-active-shade-text-amount: null !default;
-$solid-button-active-shade-bg-amount: 10% !default;
-$solid-button-active-shade-border-amount: 12.5% !default;
-$solid-button-shadow: true !default;
-$solid-button-shadow-blur: 0px !default;
-$solid-button-shadow-spread: .25rem !default;
-$solid-button-shadow-opacity: .5 !default;
-
-$outline-button-shadow: true !default;
-$outline-button-shadow-blur: 0px !default;
-$outline-button-shadow-spread: .25rem !default;
-$outline-button-shadow-opacity: .5 !default;
-
-$link-button-shadow: true !default;
-$link-button-shadow-blur: 0px !default;
-$link-button-shadow-spread: .25rem !default;
-$link-button-shadow-opacity: .5 !default;
-
-$flat-button-hover-opacity: .08 !default;
-$flat-button-focus-opacity: null !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .2 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .1 !default;
+$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: $kendo-button-active-shadow !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused button.
+/// @group button
+$kendo-button-focus-shadow: 0 0 0 .25rem rgba( $kendo-button-border, .5 ) !default;
+
+/// The base background of disabled button.
+/// @group button
+$kendo-button-disabled-bg: null !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: null !default;
+/// The base border color of disabled buttons.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: null !default;
+
+// Solid button
+$kendo-solid-button-gradient: null !default;
+$kendo-solid-button-shade-function: "try-darken";
+$kendo-solid-button-shade-text-amount: 0 !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 0 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: 7.5% !default;
+$kendo-solid-button-hover-shade-border-amount: 10% !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: 10% !default;
+$kendo-solid-button-active-shade-border-amount: 12.5% !default;
+$kendo-solid-button-shadow: true !default;
+$kendo-solid-button-shadow-blur: 0px !default;
+$kendo-solid-button-shadow-spread: .25rem !default;
+$kendo-solid-button-shadow-opacity: .5 !default;
+
+// Outline button
+$kendo-outline-button-shadow: true !default;
+$kendo-outline-button-shadow-blur: 0px !default;
+$kendo-outline-button-shadow-spread: .25rem !default;
+$kendo-outline-button-shadow-opacity: .5 !default;
+
+// Link button
+$kendo-link-button-shadow: true !default;
+$kendo-link-button-shadow-blur: 0px !default;
+$kendo-link-button-shadow-spread: .25rem !default;
+$kendo-link-button-shadow-opacity: .5 !default;
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: null !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .2 !default;
+
+/// The color transition of the button.
+/// @group button
+$kendo-button-transition: $transition !default;
diff --git a/packages/bootstrap/scss/calendar/_variables.scss b/packages/bootstrap/scss/calendar/_variables.scss
index 429ffa18a0c..b39728712bc 100644
--- a/packages/bootstrap/scss/calendar/_variables.scss
+++ b/packages/bootstrap/scss/calendar/_variables.scss
@@ -87,8 +87,8 @@ $calendar-cell-selected-hover-text: $selected-hover-text !default;
 $calendar-cell-selected-hover-border: $selected-hover-border !default;
 $calendar-cell-selected-hover-gradient: null !default;
 
-$calendar-cell-focused-shadow: inset $button-focused-shadow !default;
-$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( $primary-button-active-border, .5 ) !default;
+$calendar-cell-focused-shadow: inset $kendo-button-focus-shadow !default;
+$calendar-cell-selected-focus-shadow: inset 0 0 0 2px rgba( try-darken( $primary, 12.5% ), .5 ) !default;
 
 
 // Calendar navigation
diff --git a/packages/bootstrap/scss/card/_variables.scss b/packages/bootstrap/scss/card/_variables.scss
index c71bf763334..b124bd37ad6 100644
--- a/packages/bootstrap/scss/card/_variables.scss
+++ b/packages/bootstrap/scss/card/_variables.scss
@@ -62,7 +62,7 @@ $card-actions-border-width: 1px !default;
 $card-actions-gap: map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
-$card-deck-scroll-button-offset: -$button-border-width !default;
+$card-deck-scroll-button-offset: -$kendo-button-border-width !default;
 
 $card-callout-width: 1.3em !default;
 $card-callout-height: 1.3em !default;
diff --git a/packages/bootstrap/scss/chat/_variables.scss b/packages/bootstrap/scss/chat/_variables.scss
index e98a7592803..a90f9c12b57 100644
--- a/packages/bootstrap/scss/chat/_variables.scss
+++ b/packages/bootstrap/scss/chat/_variables.scss
@@ -49,8 +49,8 @@ $chat-bg: $app-bg !default;
 $chat-text: $app-text !default;
 $chat-border: $app-border !default;
 
-$chat-bubble-bg: $button-bg !default;
-$chat-bubble-text: $button-text !default;
+$chat-bubble-bg: $kendo-button-bg !default;
+$chat-bubble-text: $kendo-button-text !default;
 $chat-bubble-border: $chat-bubble-bg !default;
 $chat-bubble-shadow: none !default;
 $chat-bubble-hover-shadow: none !default;
diff --git a/packages/bootstrap/scss/colorpicker/_variables.scss b/packages/bootstrap/scss/colorpicker/_variables.scss
index 6e09235c784..64e5d3515f9 100644
--- a/packages/bootstrap/scss/colorpicker/_variables.scss
+++ b/packages/bootstrap/scss/colorpicker/_variables.scss
@@ -3,18 +3,18 @@ $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
 
-$colorpicker-bg: $button-bg !default;
-$colorpicker-text: $button-text !default;
-$colorpicker-border: $button-border !default;
-$colorpicker-gradient: $button-gradient !default;
+$colorpicker-bg: $kendo-button-bg !default;
+$colorpicker-text: $kendo-button-text !default;
+$colorpicker-border: $kendo-button-border !default;
+$colorpicker-gradient: $kendo-button-gradient !default;
 
-$colorpicker-hovered-bg: $button-hovered-bg !default;
-$colorpicker-hovered-text: $button-hovered-text !default;
-$colorpicker-hovered-border: $button-hovered-border !default;
-$colorpicker-hovered-gradient: $button-hovered-gradient !default;
+$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
+$colorpicker-hovered-text: $kendo-button-hover-text !default;
+$colorpicker-hovered-border: $kendo-button-hover-border !default;
+$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$colorpicker-focused-bg: $button-active-bg !default;
-$colorpicker-focused-text: $button-active-text !default;
-$colorpicker-focused-border: $button-active-border !default;
-$colorpicker-focused-gradient: $button-active-gradient !default;
-$colorpicker-focused-shadow: $button-focused-shadow !default;
+$colorpicker-focused-bg: $kendo-button-active-bg !default;
+$colorpicker-focused-text: $kendo-button-active-text !default;
+$colorpicker-focused-border: $kendo-button-active-border !default;
+$colorpicker-focused-gradient: $kendo-button-active-gradient !default;
+$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/bootstrap/scss/dropdownlist/_variables.scss b/packages/bootstrap/scss/dropdownlist/_variables.scss
index 68a00d03b1d..ff8f0786b30 100644
--- a/packages/bootstrap/scss/dropdownlist/_variables.scss
+++ b/packages/bootstrap/scss/dropdownlist/_variables.scss
@@ -1,16 +1,16 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$dropdownlist-focused-bg: $button-active-bg !default;
-$dropdownlist-focused-text: $button-active-text !default;
-$dropdownlist-focused-border: $button-active-border !default;
-$dropdownlist-focused-gradient: $button-active-gradient !default;
-$dropdownlist-focused-shadow: $button-focused-shadow !default;
+$dropdownlist-focused-bg: $kendo-button-active-bg !default;
+$dropdownlist-focused-text: $kendo-button-active-text !default;
+$dropdownlist-focused-border: $kendo-button-active-border !default;
+$dropdownlist-focused-gradient: $kendo-button-active-gradient !default;
+$dropdownlist-focused-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/bootstrap/scss/fab/_theme.scss b/packages/bootstrap/scss/fab/_theme.scss
index 311a1c4b2f1..dfa5a4405c1 100644
--- a/packages/bootstrap/scss/fab/_theme.scss
+++ b/packages/bootstrap/scss/fab/_theme.scss
@@ -73,7 +73,7 @@
             $fab-item-icon-border
         );
         @include box-shadow($fab-item-shadow);
-        outline: $fab-border-width solid $button-bg;
+        outline: $fab-border-width solid $kendo-button-bg;
         outline-offset: -$fab-border-width;
     }
 
diff --git a/packages/bootstrap/scss/fab/_variables.scss b/packages/bootstrap/scss/fab/_variables.scss
index 787347a7136..577cd71be39 100644
--- a/packages/bootstrap/scss/fab/_variables.scss
+++ b/packages/bootstrap/scss/fab/_variables.scss
@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
diff --git a/packages/bootstrap/scss/grid/_theme.scss b/packages/bootstrap/scss/grid/_theme.scss
index 81fe78a136a..c84faddb6eb 100644
--- a/packages/bootstrap/scss/grid/_theme.scss
+++ b/packages/bootstrap/scss/grid/_theme.scss
@@ -116,10 +116,10 @@
     }
     .k-grouping-header .k-group-indicator {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
     }
 
diff --git a/packages/bootstrap/scss/input/_variables.scss b/packages/bootstrap/scss/input/_variables.scss
index a168a724f02..192cf2cbed0 100644
--- a/packages/bootstrap/scss/input/_variables.scss
+++ b/packages/bootstrap/scss/input/_variables.scss
@@ -76,24 +76,24 @@ $picker-select-calc-size: calc( #{$picker-select-padding-x * 2} + #{$icon-size}
 $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;
 
-$picker-select-bg: $button-bg !default;
-$picker-select-text: $button-text !default;
-$picker-select-border: $button-border !default;
-$picker-select-gradient: $button-gradient !default;
+$picker-select-bg: $kendo-button-bg !default;
+$picker-select-text: $kendo-button-text !default;
+$picker-select-border: $kendo-button-border !default;
+$picker-select-gradient: $kendo-button-gradient !default;
 
-$picker-select-hovered-bg: $button-hovered-bg !default;
-$picker-select-hovered-text: $button-hovered-text !default;
-$picker-select-hovered-border: $button-hovered-border !default;
-$picker-select-hovered-gradient: $button-hovered-gradient !default;
+$picker-select-hovered-bg: $kendo-button-hover-bg !default;
+$picker-select-hovered-text: $kendo-button-hover-text !default;
+$picker-select-hovered-border: $kendo-button-hover-border !default;
+$picker-select-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$picker-select-pressed-bg: $button-active-bg !default;
-$picker-select-pressed-text: $button-active-text !default;
-$picker-select-pressed-border: $button-active-border !default;
-$picker-select-pressed-gradient: $button-active-gradient !default;
+$picker-select-pressed-bg: $kendo-button-active-bg !default;
+$picker-select-pressed-text: $kendo-button-active-text !default;
+$picker-select-pressed-border: $kendo-button-active-border !default;
+$picker-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 
 // Spinner
-$spinner-width: $button-inner-calc-size !default;
+$spinner-width: $kendo-button-inner-calc-size !default;
 $spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
 $spinner-icon-offset: 1px !default;
 
diff --git a/packages/bootstrap/scss/map/_variables.scss b/packages/bootstrap/scss/map/_variables.scss
index 3dfee7a9c7f..ea203fbd947 100644
--- a/packages/bootstrap/scss/map/_variables.scss
+++ b/packages/bootstrap/scss/map/_variables.scss
@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;
diff --git a/packages/bootstrap/scss/multiselect/_variables.scss b/packages/bootstrap/scss/multiselect/_variables.scss
index 02216e42e62..0c068d7b07e 100644
--- a/packages/bootstrap/scss/multiselect/_variables.scss
+++ b/packages/bootstrap/scss/multiselect/_variables.scss
@@ -28,10 +28,10 @@ $multiselect-focused-text: $input-focused-text !default;
 $multiselect-focused-border: $input-focused-border !default;
 $multiselect-focused-shadow: $input-focused-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
 $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
diff --git a/packages/bootstrap/scss/pager/_variables.scss b/packages/bootstrap/scss/pager/_variables.scss
index fd797723f26..a422dc016a4 100644
--- a/packages/bootstrap/scss/pager/_variables.scss
+++ b/packages/bootstrap/scss/pager/_variables.scss
@@ -16,8 +16,8 @@ $pager-focus-shadow: inset 0 0 0 2px rgba( 0, 0, 0, .08) !default;
 
 $pager-section-spacing: map-get( $spacing, 4 ) !default;
 
-$pager-item-padding-x: $button-padding-y !default;
-$pager-item-padding-y: $button-padding-y !default;
+$pager-item-padding-x: $kendo-button-padding-y !default;
+$pager-item-padding-y: $kendo-button-padding-y !default;
 $pager-item-border-width: 1px !default;
 $pager-item-border-radius: map-get( $spacing, 1 ) !default;
 $pager-item-spacing: (-1 * $pager-item-border-width) !default;
diff --git a/packages/bootstrap/scss/scrollview/_variables.scss b/packages/bootstrap/scss/scrollview/_variables.scss
index fbc6b803c35..f8a467ad864 100644
--- a/packages/bootstrap/scss/scrollview/_variables.scss
+++ b/packages/bootstrap/scss/scrollview/_variables.scss
@@ -9,10 +9,10 @@ $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
-$scrollview-pagebutton-bg: $button-bg !default;
-$scrollview-pagebutton-border: $button-border !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: $primary-button-border !default;
+$scrollview-pagebutton-bg: $kendo-button-bg !default;
+$scrollview-pagebutton-border: $kendo-button-border !default;
+$scrollview-pagebutton-primary-bg: $primary !default;
+$scrollview-pagebutton-primary-border: $primary !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
diff --git a/packages/bootstrap/scss/slider/_variables.scss b/packages/bootstrap/scss/slider/_variables.scss
index bf0ddaeb34a..1c912067c52 100644
--- a/packages/bootstrap/scss/slider/_variables.scss
+++ b/packages/bootstrap/scss/slider/_variables.scss
@@ -10,7 +10,7 @@ $slider-line-height: $line-height !default;
 $slider-button-offset: 10px !default;
 $slider-button-size: ($slider-alt-size - 2) !default;
 $slider-button-spacing: ($slider-button-size + $slider-button-offset) !default;
-$slider-button-focused-shadow: $button-focused-shadow !default;
+$slider-button-focused-shadow: $kendo-button-focus-shadow !default;
 
 $slider-track-thickness: 4px !default;
 $slider-draghandle-size: 14px !default;
@@ -18,22 +18,22 @@ $slider-draghandle-border-width: 1px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: contrast-wcag( $primary ) !default;
+$slider-draghandle-border: $primary !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: try-darken( $primary, 7.5% ) !default;
+$slider-draghandle-hovered-text: contrast-wcag( $primary ) !default;
+$slider-draghandle-hovered-border: try-darken( $primary, 10% ) !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: try-darken( $primary, 10% ) !default;
+$slider-draghandle-pressed-text: contrast-wcag( $primary ) !default;
+$slider-draghandle-pressed-border: try-darken( $primary, 12.5% ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;
+$slider-draghandle-focused-shadow:  0 0 0 3px rgba( $primary, .5 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
diff --git a/packages/bootstrap/scss/spreadsheet/_theme.scss b/packages/bootstrap/scss/spreadsheet/_theme.scss
index 556d546a9aa..b848cd341b3 100644
--- a/packages/bootstrap/scss/spreadsheet/_theme.scss
+++ b/packages/bootstrap/scss/spreadsheet/_theme.scss
@@ -118,28 +118,28 @@
     }
     .k-spreadsheet-filter {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        box-shadow: inset 0 0 0 1px $button-border;
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
 
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
         }
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
     }
diff --git a/packages/bootstrap/scss/timeline/_variables.scss b/packages/bootstrap/scss/timeline/_variables.scss
index 99adb7bb844..7a0f1a80442 100644
--- a/packages/bootstrap/scss/timeline/_variables.scss
+++ b/packages/bootstrap/scss/timeline/_variables.scss
@@ -13,9 +13,9 @@ $timeline-mobile-spacing-y: $padding-x !default;
 $timeline-track-arrow-width: 38px !default;
 $timeline-track-arrow-height: 38px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-bg: true-mix($button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-border: true-mix($button-border, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-border: true-mix($kendo-button-border, $body-bg, 65%) !default;
 
 $timeline-track-size: 6px !default;
 $timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
@@ -24,16 +24,16 @@ $timeline-track-margin-bottom: $spacer !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
 $timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-bg: $button-bg !default;
+$timeline-track-bg: $kendo-button-bg !default;
 $timeline-track-border-color: $timeline-track-bg !default;
 
 $timeline-track-item-focus-shadow: 0 0 0 3px rgba($primary, .5) !default;
 
 $timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $button-padding-x !default;
-$timeline-flag-padding-y: $button-padding-y !default;
-$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-padding-x: $kendo-button-padding-x !default;
+$timeline-flag-padding-y: $kendo-button-padding-y !default;
+$timeline-flag-line-height: $kendo-button-line-height !default;
 $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
diff --git a/packages/bootstrap/scss/toolbar/_variables.scss b/packages/bootstrap/scss/toolbar/_variables.scss
index 39a11e338f6..9ec6ec387f8 100644
--- a/packages/bootstrap/scss/toolbar/_variables.scss
+++ b/packages/bootstrap/scss/toolbar/_variables.scss
@@ -10,7 +10,7 @@ $toolbar-border-width: 1px !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
diff --git a/packages/classic/scss/button/_variables.scss b/packages/classic/scss/button/_variables.scss
index 96a28c5730c..7fa96d1e40b 100644
--- a/packages/classic/scss/button/_variables.scss
+++ b/packages/classic/scss/button/_variables.scss
@@ -2,197 +2,200 @@
 
 /// Width of the border around the button.
 /// @group button
-$button-border-width: 1px !default;
+$kendo-button-border-width: 1px !default;
 
 /// Border radius of the button.
 /// @group button
-$button-border-radius: $border-radius !default;
+$kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$button-padding-x: map-get( $spacing, 2 ) !default;
-$button-padding-x-sm: null !default;
-$button-padding-x-md: null !default;
-$button-padding-x-lg: null !default;
+$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$button-padding-y: map-get( $spacing, 1 ) !default;
-$button-padding-y-sm: null !default;
-$button-padding-y-md: null !default;
-$button-padding-y-lg: null !default;
+$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font family of the button.
 /// @group button
-$button-font-family: $font-family !default;
+$kendo-button-font-family: $font-family !default;
 
-/// Font size of the button.
+/// Font sizes of the button.
 /// @group button
-$button-font-size: $font-size !default;
-$button-font-size-sm: null !default;
-$button-font-size-md: null !default;
-$button-font-size-lg: null !default;
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
 
-/// Line height used along with $font-size.
+/// Line heights used along with $font-size.
 /// @group button
-$button-line-height: $line-height !default;
-$button-line-height-sm: null !default;
-$button-line-height-md: null !default;
-$button-line-height-lg: null !default;
+$kendo-button-line-height: $line-height-md !default;
+$kendo-button-line-height-sm: $line-height-md !default;
+$kendo-button-line-height-md: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-md !default;
 
 /// Calculated height of the button.
 /// @group button
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
-$button-arrow-padding-x: $button-padding-y !default;
-$button-arrow-padding-y: $button-padding-y !default;
+$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 
 /// Theme colors map for the button.
 /// @group button
-$button-theme-colors: (
-    "primary": map-get( $theme-colors, primary ),
-    "secondary": map-get( $theme-colors, secondary ),
-    "tertiary": map-get( $theme-colors, tertiary ),
-    "info": map-get( $theme-colors, info ),
-    "success": map-get( $theme-colors, success ),
-    "warning": map-get( $theme-colors, warning ),
-    "error": map-get( $theme-colors, error ),
-    "dark": map-get( $theme-colors, dark ),
-    "light": map-get( $theme-colors, light ),
-    "inverse": map-get( $theme-colors, inverse )
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": $base-bg )
 ) !default;
 
-/// The background of the buttons.
+/// The base background of the button.
 /// @group button
-$button-bg: $base-bg !default;
-/// The text color of the buttons.
+$kendo-button-bg: $base-bg !default;
+/// The base text color of the button.
 /// @group button
-$button-text: $base-text !default;
-/// The border color of the buttons.
+$kendo-button-text: $base-text !default;
+/// The base border color of the button.
 /// @group button
-$button-border: try-shade( $button-bg, 2 ) !default;
-/// The background gradient of the buttons.
+$kendo-button-border: try-shade( $kendo-button-bg, 2 ) !default;
+/// The base background gradient of the button.
 /// @group button
-$button-gradient: $base-gradient !default;
-$button-shadow: null !default;
+$kendo-button-gradient: $base-gradient !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: null !default;
 
-/// The background of hovered buttons.
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: try-shade( $kendo-button-bg, 1 ) !default;
+/// The base text color of hovered button.
 /// @group button
-$button-hovered-bg: try-shade( $button-bg, 1 ) !default;
-/// The text color of hovered buttons.
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
 /// @group button
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
+$kendo-button-hover-border: try-shade( $kendo-button-bg, 3 ) !default;
+/// The base background gradient of hovered button.
 /// @group button
-$button-hovered-border: try-shade( $button-bg, 3 ) !default;
-/// The background gradient of hovered buttons.
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
 /// @group button
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
+$kendo-button-hover-shadow: null !default;
 
-/// The background color of active buttons.
+/// The base background color of active button.
 /// @group button
-$button-active-bg: try-shade( $button-bg, 2 ) !default;
-/// The text color of active buttons.
+$kendo-button-active-bg: try-shade( $kendo-button-bg, 2 ) !default;
+/// The base text color of active button.
 /// @group button
-$button-active-text: null !default;
-/// The border color of active buttons.
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
 /// @group button
-$button-active-border: try-shade( $button-bg, 4 ) !default;
-/// The background gradient of active buttons.
+$kendo-button-active-border: try-shade( $kendo-button-bg, 4 ) !default;
+/// The base background gradient of active button.
 /// @group button
-$button-active-gradient: null !default;
-$button-active-shadow: null !default;
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: null !default;
 
-/// The background color of selected buttons.
+/// The base background color of selected button.
 /// @group button
-$button-selected-bg: $primary !default;
+$kendo-button-selected-bg: $primary !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
+$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: $button-selected-bg !default;
+$kendo-button-selected-border: $kendo-button-selected-bg !default;
 /// The background gradient of selected buttons.
 /// @group button
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group button
-$button-focused-shadow: 0 0 4px 0 rgba( $button-border, .75 ) !default;
-
-
-// Disabled button
-$button-disabled-bg: null !default;
-$button-disabled-text: null !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: null !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
-$primary-button-border: try-shade( $primary-button-bg, 2 ) !default;
-$primary-button-gradient: null !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: try-shade( $primary-button-bg, 1 ) !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: try-shade( $primary-button-bg, 3 ) !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: try-shade( $primary-button-bg, 2 ) !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: try-shade( $primary-button-bg, 4 ) !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-border !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: 0 0 4px 0 rgba( $primary-button-border, .75 ) !default;
-
-$solid-button-gradient: $base-gradient !default;
-$solid-button-shade-function: "try-shade";
-$solid-button-shade-text-amount: 0 !default;
-$solid-button-shade-bg-amount: 0 !default;
-$solid-button-shade-border-amount: 2 !default;
-$solid-button-hover-shade-text-amount: null !default;
-$solid-button-hover-shade-bg-amount: 1 !default;
-$solid-button-hover-shade-border-amount: 3 !default;
-$solid-button-active-shade-text-amount: null !default;
-$solid-button-active-shade-bg-amount: 2 !default;
-$solid-button-active-shade-border-amount: 4 !default;
-$solid-button-shadow: true !default;
-$solid-button-shadow-blur: 4px !default;
-$solid-button-shadow-spread: 0px !default;
-$solid-button-shadow-opacity: .75 !default;
-
-$outline-button-shadow: true !default;
-$outline-button-shadow-blur: 4px !default;
-$outline-button-shadow-spread: 0px !default;
-$outline-button-shadow-opacity: .75 !default;
-
-$link-button-shadow: true !default;
-$link-button-shadow-blur: 4px !default;
-$link-button-shadow-spread: 0px !default;
-$link-button-shadow-opacity: .75 !default;
-
-$flat-button-hover-opacity: .08 !default;
-$flat-button-focus-opacity: .12 !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .2 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .1 !default;
+$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: $kendo-button-active-shadow !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused button.
+/// @group button
+$kendo-button-focus-shadow: 0 0 4px 0 rgba( $kendo-button-border, .75 ) !default;
+
+/// The base background of disabled button.
+/// @group button
+$kendo-button-disabled-bg: null !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: null !default;
+/// The base border color of disabled buttons.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: null !default;
+
+// Solid button
+$kendo-solid-button-gradient: $base-gradient !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: 0 !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 2 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: 1 !default;
+$kendo-solid-button-hover-shade-border-amount: 3 !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: 2 !default;
+$kendo-solid-button-active-shade-border-amount: 4 !default;
+$kendo-solid-button-shadow: true !default;
+$kendo-solid-button-shadow-blur: 4px !default;
+$kendo-solid-button-shadow-spread: 0px !default;
+$kendo-solid-button-shadow-opacity: .75 !default;
+
+// Outline button
+$kendo-outline-button-shadow: true !default;
+$kendo-outline-button-shadow-blur: 4px !default;
+$kendo-outline-button-shadow-spread: 0px !default;
+$kendo-outline-button-shadow-opacity: .75 !default;
+
+// Link button
+$kendo-link-button-shadow: true !default;
+$kendo-link-button-shadow-blur: 4px !default;
+$kendo-link-button-shadow-spread: 0px !default;
+$kendo-link-button-shadow-opacity: .75 !default;
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: .12 !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .2 !default;
+
+/// The color transition of the flat button.
+/// @group button
+$kendo-button-transition: color .2s ease-in-out !default;
diff --git a/packages/classic/scss/card/_variables.scss b/packages/classic/scss/card/_variables.scss
index efbbd6390ae..56058528af3 100644
--- a/packages/classic/scss/card/_variables.scss
+++ b/packages/classic/scss/card/_variables.scss
@@ -62,7 +62,7 @@ $card-actions-border-width: 1px !default;
 $card-actions-gap: map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
-$card-deck-scroll-button-offset: -$button-border-width !default;
+$card-deck-scroll-button-offset: -$kendo-button-border-width !default;
 
 $card-callout-width: 20px !default;
 $card-callout-height: 20px !default;
diff --git a/packages/classic/scss/colorpicker/_variables.scss b/packages/classic/scss/colorpicker/_variables.scss
index dac4a9bd527..f6c5adeb75b 100644
--- a/packages/classic/scss/colorpicker/_variables.scss
+++ b/packages/classic/scss/colorpicker/_variables.scss
@@ -3,18 +3,18 @@ $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
 
-$colorpicker-bg: $button-bg !default;
-$colorpicker-text: $button-text !default;
-$colorpicker-border: $button-border !default;
-$colorpicker-gradient: $button-gradient !default;
+$colorpicker-bg: $kendo-button-bg !default;
+$colorpicker-text: $kendo-button-text !default;
+$colorpicker-border: $kendo-button-border !default;
+$colorpicker-gradient: $kendo-button-gradient !default;
 
-$colorpicker-hovered-bg: $button-hovered-bg !default;
-$colorpicker-hovered-text: $button-hovered-text !default;
-$colorpicker-hovered-border: $button-hovered-border !default;
-$colorpicker-hovered-gradient: $button-hovered-gradient !default;
+$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
+$colorpicker-hovered-text: $kendo-button-hover-text !default;
+$colorpicker-hovered-border: $kendo-button-hover-border !default;
+$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
 $colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $button-focused-shadow !default;
+$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/classic/scss/dropdownlist/_variables.scss b/packages/classic/scss/dropdownlist/_variables.scss
index 980214783e8..d6565272039 100644
--- a/packages/classic/scss/dropdownlist/_variables.scss
+++ b/packages/classic/scss/dropdownlist/_variables.scss
@@ -1,13 +1,13 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $dropdownlist-focused-bg: $input-focused-bg !default;
 $dropdownlist-focused-text: $input-focused-text !default;
diff --git a/packages/classic/scss/fab/_variables.scss b/packages/classic/scss/fab/_variables.scss
index 45fb7fd8b99..352a2de1f38 100644
--- a/packages/classic/scss/fab/_variables.scss
+++ b/packages/classic/scss/fab/_variables.scss
@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
diff --git a/packages/classic/scss/input/_variables.scss b/packages/classic/scss/input/_variables.scss
index 2c156812026..30701035266 100644
--- a/packages/classic/scss/input/_variables.scss
+++ b/packages/classic/scss/input/_variables.scss
@@ -38,12 +38,12 @@ $input-adornment-width: $input-adornment-height !default;
 
 $input-bg: $component-bg !default;
 $input-text: $component-text !default;
-$input-border: $button-border !default;
+$input-border: $kendo-button-border !default;
 $input-shadow: null !default;
 
 $input-hovered-bg: null !default;
 $input-hovered-text: null !default;
-$input-hovered-border: $button-hovered-border !default;
+$input-hovered-border: $kendo-button-hover-border !default;
 $input-hovered-shadow: null !default;
 
 $input-focused-bg: null !default;
@@ -77,24 +77,24 @@ $picker-select-calc-size: $input-inner-calc-height !default;
 $picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
 $picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
 
-$picker-select-bg: $button-bg !default;
-$picker-select-text: $button-text !default;
-$picker-select-border: $button-border !default;
-$picker-select-gradient: $button-gradient !default;
+$picker-select-bg: $kendo-button-bg !default;
+$picker-select-text: $kendo-button-text !default;
+$picker-select-border: $kendo-button-border !default;
+$picker-select-gradient: $kendo-button-gradient !default;
 
-$picker-select-hovered-bg: $button-hovered-bg !default;
-$picker-select-hovered-text: $button-hovered-text !default;
-$picker-select-hovered-border: $button-hovered-border !default;
-$picker-select-hovered-gradient: $button-hovered-gradient !default;
+$picker-select-hovered-bg: $kendo-button-hover-bg !default;
+$picker-select-hovered-text: $kendo-button-hover-text !default;
+$picker-select-hovered-border: $kendo-button-hover-border !default;
+$picker-select-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$picker-select-pressed-bg: $button-active-bg !default;
-$picker-select-pressed-text: $button-active-text !default;
-$picker-select-pressed-border: $button-active-border !default;
-$picker-select-pressed-gradient: $button-active-gradient !default;
+$picker-select-pressed-bg: $kendo-button-active-bg !default;
+$picker-select-pressed-text: $kendo-button-active-text !default;
+$picker-select-pressed-border: $kendo-button-active-border !default;
+$picker-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 
 // Spinner
-$spinner-width: $button-inner-calc-size !default;
+$spinner-width: $kendo-button-inner-calc-size !default;
 $spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
 $spinner-icon-offset: 2px !default;
 
diff --git a/packages/classic/scss/map/_variables.scss b/packages/classic/scss/map/_variables.scss
index 3dfee7a9c7f..ea203fbd947 100644
--- a/packages/classic/scss/map/_variables.scss
+++ b/packages/classic/scss/map/_variables.scss
@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;
diff --git a/packages/classic/scss/multiselect/_variables.scss b/packages/classic/scss/multiselect/_variables.scss
index 02216e42e62..0c068d7b07e 100644
--- a/packages/classic/scss/multiselect/_variables.scss
+++ b/packages/classic/scss/multiselect/_variables.scss
@@ -28,10 +28,10 @@ $multiselect-focused-text: $input-focused-text !default;
 $multiselect-focused-border: $input-focused-border !default;
 $multiselect-focused-shadow: $input-focused-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
 $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
diff --git a/packages/classic/scss/pager/_variables.scss b/packages/classic/scss/pager/_variables.scss
index 1e8a55135b2..5640490bfdb 100644
--- a/packages/classic/scss/pager/_variables.scss
+++ b/packages/classic/scss/pager/_variables.scss
@@ -16,7 +16,7 @@ $pager-focus-shadow: $focused-shadow !default;
 
 $pager-section-spacing: $spacer-x !default;
 
-$pager-item-padding-x: $button-padding-y !default;
+$pager-item-padding-x: $kendo-button-padding-y !default;
 $pager-item-padding-y: $pager-item-padding-x !default;
 $pager-item-border-width: 0px !default;
 $pager-item-border-radius: null !default;
diff --git a/packages/classic/scss/scrollview/_variables.scss b/packages/classic/scss/scrollview/_variables.scss
index fbc6b803c35..869ab4b2f4a 100644
--- a/packages/classic/scss/scrollview/_variables.scss
+++ b/packages/classic/scss/scrollview/_variables.scss
@@ -9,10 +9,10 @@ $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
-$scrollview-pagebutton-bg: $button-bg !default;
-$scrollview-pagebutton-border: $button-border !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: $primary-button-border !default;
+$scrollview-pagebutton-bg: $kendo-button-bg !default;
+$scrollview-pagebutton-border: $kendo-button-border !default;
+$scrollview-pagebutton-primary-bg: $primary !default;
+$scrollview-pagebutton-primary-border: try-shade( $primary, 2 ) !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
diff --git a/packages/classic/scss/slider/_variables.scss b/packages/classic/scss/slider/_variables.scss
index 649cc12fd58..34cc81364a0 100644
--- a/packages/classic/scss/slider/_variables.scss
+++ b/packages/classic/scss/slider/_variables.scss
@@ -18,22 +18,22 @@ $slider-draghandle-border-width: 1px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: contrast-wcag( $primary ) !default;
+$slider-draghandle-border: try-shade( $primary, 2 ) !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: try-shade( $primary, 1 ) !default;
+$slider-draghandle-hovered-text: null !default;
+$slider-draghandle-hovered-border: try-shade( $slider-draghandle-hovered-bg, 2 ) !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: try-shade( $primary, 2 ) !default;
+$slider-draghandle-pressed-text: null !default;
+$slider-draghandle-pressed-border: try-shade( $slider-draghandle-pressed-bg, 2 ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;
+$slider-draghandle-focused-shadow: 0 0 4px 0 rgba( $slider-draghandle-border, .75 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
diff --git a/packages/classic/scss/timeline/_variables.scss b/packages/classic/scss/timeline/_variables.scss
index 4540e6397e2..87f9a0eba75 100644
--- a/packages/classic/scss/timeline/_variables.scss
+++ b/packages/classic/scss/timeline/_variables.scss
@@ -13,8 +13,8 @@ $timeline-mobile-spacing-y: 16px !default;
 $timeline-track-arrow-width: 30px !default;
 $timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-bg: true-mix($button-bg, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
 $timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
 
 $timeline-track-size: 6px !default;
@@ -24,16 +24,16 @@ $timeline-track-margin-bottom: 16px !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
 $timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-bg: $button-bg !default;
-$timeline-track-border-color: $button-border !default;
+$timeline-track-bg: $kendo-button-bg !default;
+$timeline-track-border-color: $kendo-button-border !default;
 
 $timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($primary, .4) !default;
 
 $timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $button-padding-x !default;
-$timeline-flag-padding-y: $button-padding-y !default;
-$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-padding-x: $kendo-button-padding-x !default;
+$timeline-flag-padding-y: $kendo-button-padding-y !default;
+$timeline-flag-line-height: $kendo-button-line-height !default;
 $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
diff --git a/packages/classic/scss/toolbar/_variables.scss b/packages/classic/scss/toolbar/_variables.scss
index 481f6b8d707..6480017e075 100644
--- a/packages/classic/scss/toolbar/_variables.scss
+++ b/packages/classic/scss/toolbar/_variables.scss
@@ -10,15 +10,15 @@ $toolbar-border-width: 1px !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
 $toolbar-line-height: $line-height !default;
 
-$toolbar-bg: $button-bg !default;
-$toolbar-text: $button-text !default;
-$toolbar-border: $button-border !default;
+$toolbar-bg: $kendo-button-bg !default;
+$toolbar-text: $kendo-button-text !default;
+$toolbar-border: $kendo-button-border !default;
 $toolbar-gradient: null !default;
 $toolbar-shadow: null !default;
 
diff --git a/packages/default/scss/button/_layout.scss b/packages/default/scss/button/_layout.scss
index ddce6e104ee..b33bea2555b 100644
--- a/packages/default/scss/button/_layout.scss
+++ b/packages/default/scss/button/_layout.scss
@@ -2,14 +2,10 @@
 
     // Button
     .k-button {
-        @include border-radius( $button-border-radius );
-        padding: $button-padding-y $button-padding-x;
         box-sizing: border-box;
-        border-width: $button-border-width;
+        border-width: $kendo-button-border-width;
         border-style: solid;
-        font-size: $button-font-size;
-        line-height: $button-line-height;
-        font-family: $button-font-family;
+        font-family: $kendo-button-font-family;
         text-align: center;
         text-decoration: none;
         white-space: nowrap;
@@ -23,6 +19,7 @@
         outline: none;
         -webkit-appearance: none;
         position: relative;
+        transition: $kendo-button-transition;
 
         *,
         *::before,
@@ -31,7 +28,7 @@
         }
 
         &:disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include disabled( $disabled-styling );
         }
 
@@ -46,92 +43,98 @@
             text-decoration: none;
             outline: 0;
         }
+    }
 
-        .k-icon,
-        .k-image,
-        .k-sprite {
-            color: inherit;
-            align-self: center;
-            position: relative;
-        }
 
+    // Icon Button
+    .k-icon-button {
+        aspect-ratio: 1;
+        gap: 0;
     }
 
 
-    // Button icon
-    .k-button .k-button-icon {
+    // Content
+    .k-button-icon {
         color: inherit;
         align-self: center;
         position: relative;
     }
 
-
-    // Button text
-    .k-button .k-button-text {}
+    .k-button-text {}
 
 
     // Button arrow
     .k-button-arrow {
-        padding-left: $button-arrow-padding-x;
-        padding-right: $button-arrow-padding-x;
+        padding-left: $kendo-button-arrow-padding-x;
+        padding-right: $kendo-button-arrow-padding-x;
         flex: none;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }
     .k-button > .k-button-arrow {
-        margin-inline-start: -$button-arrow-padding-x;
-        margin-inline-end: -$button-padding-x;
+        margin-inline-start: -$kendo-button-arrow-padding-x;
+        margin-inline-end: -$kendo-button-padding-x;
+    }
+    .k-icon-button > .k-button-arrow {
+        margin-inline-start: 0;
+        margin-inline-end: -$kendo-button-padding-y;
     }
 
 
-    // Text button
-    .k-text-button {
+    // Sizes
+    .k-button-sm {
+        padding: $kendo-button-padding-y-sm $kendo-button-padding-x-sm;
+        font-size: $kendo-button-font-size-sm;
+        line-height: $kendo-button-line-height-sm;
+    }
+    .k-button-md {
+        padding: $kendo-button-padding-y-md $kendo-button-padding-x-md;
+        font-size: $kendo-button-font-size-md;
+        line-height: $kendo-button-line-height-md;
+    }
+    .k-button-lg {
+        padding: $kendo-button-padding-y-lg $kendo-button-padding-x-lg;
+        font-size: $kendo-button-font-size-lg;
+        line-height: $kendo-button-line-height-lg;
+    }
+
+    .k-icon-button.k-button-sm {
+        padding: $kendo-button-padding-y-sm;
 
-        > .k-icon,
         > .k-button-icon {
-            display: none;
+            min-width: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
+            min-height: calc( #{$kendo-button-font-size-sm} * #{$kendo-button-line-height-sm} );
         }
     }
+    .k-icon-button.k-button-md {
+        padding: $kendo-button-padding-y-md;
 
-
-    // Icon button
-    .k-icon-button,
-    .k-button.k-button-icon {
-        padding: $button-padding-y;
-        gap: 0;
-
-        > .k-text,
-        > .k-button-text {
-            display: none;
+        > .k-button-icon {
+            min-width: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
+            min-height: calc( #{$kendo-button-font-size-md} * #{$kendo-button-line-height-md} );
         }
+    }
+    .k-icon-button.k-button-lg {
+        padding: $kendo-button-padding-y-lg;
 
-        .k-button-icon {
-            margin: 0;
-            min-width: calc( #{$button-font-size} * #{$button-line-height} );
-            min-height: calc( #{$button-font-size} * #{$button-line-height} );
+        > .k-button-icon {
+            min-width: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
+            min-height: calc( #{$kendo-button-font-size-lg} * #{$kendo-button-line-height-lg} );
         }
     }
-    .k-icon-button > .k-button-arrow {
-        margin-inline-start: 0;
-        margin-inline-end: -$button-padding-y;
-    }
-    // TODO: REMOVE
-    .k-button.k-button-icon {
-        padding: $button-padding-y;
-        width: $button-calc-size;
-        height: $button-calc-size;
-    }
 
 
-    // Input button
-    .k-input-button {}
-    .k-input-button.k-icon-button {}
+    // Button shape
+    .k-button-square {
+        aspect-ratio: 1;
+    }
 
 
-    // Menu Button
+    // Menu button
     .k-menu-button,
     .k-dropdown-button {
+        aspect-ratio: auto;
         outline: 0;
         display: inline-flex;
         flex-flow: row nowrap;
@@ -147,25 +150,24 @@
         box-sizing: border-box;
         list-style: none;
         outline: 0;
-        white-space: nowrap;
         display: inline-flex;
-        flex-direction: row;
+        flex-flow: row nowrap;
         vertical-align: middle;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $rgba-transparent;
 
         > .k-button + .k-button {
-            margin-inline-start: if( $button-border-width == 0, null, -$button-border-width );
+            margin-inline-start: if( $kendo-button-border-width == 0, null, -$kendo-button-border-width );
         }
 
         > .k-button:hover,
-        > .k-button.k-state-hover,
+        > .k-button.k-hover,
         > .k-button:focus,
-        > .k-button.k-state-focus,
+        > .k-button.k-focus,
         > .k-button:active,
-        > .k-button.k-state-active,
-        > .k-button.k-state-selected {
+        > .k-button.k-active,
+        > .k-button.k-selected {
             z-index: 2;
         }
 
@@ -186,12 +188,10 @@
 
         &:disabled,
         &[disabled],
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             opacity: 1;
             filter: none;
         }
-
     }
 
     .k-button-group-stretched {
@@ -206,16 +206,11 @@
 
     // Split button
     .k-split-button {
-        border-width: 0;
-        border-radius: 0;
-        outline: 0;
-        display: inline-flex;
-        flex-flow: row nowrap;
-        vertical-align: middle;
 
         .k-split-button-arrow {
-            padding: $button-arrow-padding-y $button-arrow-padding-x;
+            padding: $kendo-button-arrow-padding-y $kendo-button-arrow-padding-x;
             width: auto;
+            aspect-ratio: auto;
             flex: none;
 
             .k-button-icon {
@@ -225,73 +220,66 @@
     }
 
 
-    // Flat button and bare
+    // Flat button
     .k-button-flat {
         border-color: transparent !important; // sass-lint:disable-line no-important
         color: inherit;
         background: none !important; // sass-lint:disable-line no-important
         box-shadow: none !important; // sass-lint:disable-line no-important
-        transition: color .2s ease-in-out;
 
         // Overlay background
         &::before {
-            display: block;
+            display: block !important; // sass-lint:disable-line no-important
         }
 
         // Focus ring
         &::after {
             box-shadow: inset 0 0 0 2px currentColor;
-            display: block;
+            display: block !important; // sass-lint:disable-line no-important
         }
 
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-
-            &::after {
-                opacity: .12;
-            }
+        &:focus::after,
+        &.k-focus::after {
+            opacity: .12;
         }
     }
-    .k-button.k-flat,
-    .k-button.k-bare {
-        @extend .k-button-flat;
-    }
 
 
     // Outline button
     .k-button-outline {
-        @include box-shadow( none );
+        border-color: currentColor;
         color: inherit;
-        background-color: transparent;
-        background-image: none !important; // sass-lint:disable-line no-important
-    }
-    .k-button.k-outline {
-        @extend .k-button-outline;
+        background: none;
     }
 
 
     // Link button
     .k-button-link {
-        @include box-shadow( none );
-        border-color: transparent !important; // sass-lint:disable-line no-important
+        border-color: transparent;
         color: inherit;
-        background-color: transparent !important; // sass-lint:disable-line no-important
-        background-image: none !important; // sass-lint:disable-line no-important
         text-decoration: none;
-    }
-    .k-button-link:hover,
-    .k-button-link.k-state-hover {
-        text-decoration: underline;
+        background: none;
+
+        &:hover,
+        &.k-hover {
+            text-decoration: underline;
+        }
     }
 
 
     // Clear button
     .k-button-clear {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: inherit;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
+        &::before {
+            display: none;
+        }
+
+
+        &:focus,
+        &.k-focus {
+            &::before {
+                display: block;
+            }
+        }
     }
 
 
@@ -319,10 +307,10 @@
         display: none;
         pointer-events: none;
         position: absolute;
-        left: -$button-border-width;
-        right: -$button-border-width;
-        top: -$button-border-width;
-        bottom: -$button-border-width;
+        left: -$kendo-button-border-width;
+        right: -$kendo-button-border-width;
+        top: -$kendo-button-border-width;
+        bottom: -$kendo-button-border-width;
         z-index: 0;
         transition: opacity .2s ease-in-out;
     }
@@ -336,22 +324,21 @@
 
         // Hovered state
         &:hover,
-        &.k-state-hover {
+        &.k-hover {
             &::before {
-                opacity: $flat-button-hover-opacity;
+                opacity: $kendo-flat-button-hover-opacity;
             }
         }
 
         // Focused state
         &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
+        &.k-focus {
             &::before {
-                opacity: $flat-button-focus-opacity;
+                opacity: $kendo-flat-button-focus-opacity;
             }
         }
         &.k-no-focus:not(:hover),
-        &.k-no-focus:not(.k-state-hover) {
+        &.k-no-focus:not(.k-hover) {
             &::before {
                 opacity: 0;
             }
@@ -359,16 +346,16 @@
 
         // Active state
         &:active,
-        &.k-state-active {
+        &.k-active {
             &::before {
-                opacity: $flat-button-active-opacity;
+                opacity: $kendo-flat-button-active-opacity;
             }
         }
 
         // Selected state
-        &.k-state-selected {
+        &.k-selected {
             &::before {
-                opacity: $flat-button-selected-opacity;
+                opacity: $kendo-flat-button-selected-opacity;
             }
         }
 
@@ -390,43 +377,12 @@
             display: none;
             pointer-events: none;
             position: absolute;
-            left: -$button-border-width;
-            right: -$button-border-width;
-            top: -$button-border-width;
-            bottom: -$button-border-width;
+            left: -$kendo-button-border-width;
+            right: -$kendo-button-border-width;
+            top: -$kendo-button-border-width;
+            bottom: -$kendo-button-border-width;
             z-index: 0;
             transition: opacity .2s ease-in-out;
         }
     }
 }
-
-
-
-
-@include exports( "button/ie-compat" ) {
-
-    .k-ie {
-
-        .k-button-icontext {
-
-            .k-icon,
-            .k-image,
-            .k-sprite {
-                margin: 0 $icon-spacing 0 0;
-            }
-
-            &.k-rtl,
-            .k-rtl &,
-            &[dir="rtl"],
-            [dir="rtl"] & {
-                .k-icon,
-                .k-image,
-                .k-sprite {
-                    margin: 0 0 0 $icon-spacing;
-                }
-            }
-        }
-
-    }
-
-}
diff --git a/packages/default/scss/button/_theme.scss b/packages/default/scss/button/_theme.scss
index 23790b376a8..c1bc0486301 100644
--- a/packages/default/scss/button/_theme.scss
+++ b/packages/default/scss/button/_theme.scss
@@ -1,210 +1,149 @@
 @include exports( "button/theme" ) {
 
     // Solid button
-    .k-button {
+    .k-button-solid-base {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         // Hover state
         &:hover,
-        &.k-state-hover {
+        &.k-hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
-            @include box-shadow( $button-hovered-shadow );
+            @include box-shadow( $kendo-button-hover-shadow );
         }
 
-        // Focused state
+        // Focus state
         &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @include box-shadow( $button-focused-shadow );
+        &.k-focus {
+            @include box-shadow( $kendo-button-focus-shadow );
         }
 
         // Active state
         &:active,
-        &.k-state-active {
+        &.k-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
-            @include box-shadow( $button-active-shadow );
+            @include box-shadow( $kendo-button-active-shadow );
         }
 
         // Selected state
-        &.k-state-selected {
+        &.k-selected {
             @include fill(
-                $button-selected-text,
-                $button-selected-bg,
-                $button-selected-border,
-                $button-selected-gradient
+                $kendo-button-selected-text,
+                $kendo-button-selected-bg,
+                $kendo-button-selected-border,
+                $kendo-button-selected-gradient
             );
-            @include box-shadow( $button-selected-shadow );
+            @include box-shadow( $kendo-button-selected-shadow );
         }
 
         // Disabled state
         &:disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include fill(
-                $button-disabled-text,
-                $button-disabled-bg,
-                $button-disabled-border,
-                $button-disabled-gradient
+                $kendo-button-disabled-text,
+                $kendo-button-disabled-bg,
+                $kendo-button-disabled-border,
+                $kendo-button-disabled-gradient
             );
-            @include box-shadow( $button-disabled-shadow );
+            @include box-shadow( $kendo-button-disabled-shadow );
         }
-
-    }
-    .k-button.k-primary {
-        @extend .k-button-solid-primary !optional;
     }
 
-    $_shade-fn: get-function( $solid-button-shade-function );
-
-    @each $name, $color in $button-theme-colors {
-        $_button-text: contrast-wcag( $color );
-        $_button-bg: if( $solid-button-shade-bg-amount, call( $_shade-fn, $color, $solid-button-shade-bg-amount ), null );
-        $_button-border: if( $solid-button-shade-border-amount, call( $_shade-fn, $color, $solid-button-shade-border-amount ), null );
+    $_shade-fn: get-function( $kendo-solid-button-shade-function );
 
-        $_button-hover-text: null;
-        $_button-hover-bg: if( $solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $solid-button-hover-shade-bg-amount ), null );
-        $_button-hover-border: if( $solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $solid-button-hover-shade-border-amount ), null );
+    @each $name, $color in $kendo-button-theme-colors {
+        @if ($name != "base") {
+            $_button-text: contrast-wcag( $color );
+            $_button-bg: if( $kendo-solid-button-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-bg-amount ), null );
+            $_button-border: if( $kendo-solid-button-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-shade-border-amount ), null );
 
-        $_button-active-text: null;
-        $_button-active-bg: if( $solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $solid-button-active-shade-bg-amount ), null );
-        $_button-active-border: if( $solid-button-active-shade-border-amount, call( $_shade-fn, $color, $solid-button-active-shade-border-amount ), null );
+            $_button-hover-text: null;
+            $_button-hover-bg: if( $kendo-solid-button-hover-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-bg-amount ), null );
+            $_button-hover-border: if( $kendo-solid-button-hover-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-hover-shade-border-amount ), null );
 
-        .k-button-solid.k-button-solid-#{$name} {
-            @include fill(
-                $_button-text,
-                $_button-bg,
-                $_button-border,
-                $solid-button-gradient
-            );
+            $_button-active-text: null;
+            $_button-active-bg: if( $kendo-solid-button-active-shade-bg-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-bg-amount ), null );
+            $_button-active-border: if( $kendo-solid-button-active-shade-border-amount, call( $_shade-fn, $color, $kendo-solid-button-active-shade-border-amount ), null );
 
-            // Hover state
-            &:hover,
-            &.k-state-hover {
+            .k-button-solid-#{$name} {
                 @include fill(
-                    $_button-hover-text,
-                    $_button-hover-bg,
-                    $_button-hover-border
+                    $_button-text,
+                    $_button-bg,
+                    $_button-border,
+                    $kendo-solid-button-gradient
                 );
-            }
 
-            // Focus state
-            &:focus,
-            &.k-state-focus {
-                @if ( $solid-button-shadow ) {
-                    box-shadow: 0 0 $solid-button-shadow-blur $solid-button-shadow-spread rgba( $_button-border, $solid-button-shadow-opacity );
+                // Hover state
+                &:hover,
+                &.k-hover {
+                    @include fill(
+                        $_button-hover-text,
+                        $_button-hover-bg,
+                        $_button-hover-border
+                    );
                 }
-            }
-
-            // Active state
-            &:active,
-            &.k-state-active {
-                @include fill(
-                    $_button-active-text,
-                    $_button-active-bg,
-                    $_button-active-border
-                );
-            }
-
-            // Selected
-            &.k-state-selected {
-                @include fill(
-                    $_button-active-text,
-                    $_button-active-bg,
-                    $_button-active-border
-                );
-            }
-        }
-    }
-
-
-    // Menu button
-    .k-menu-button {}
-
-
-    // Button group
-    .k-button-group {}
-
 
-    // Split button
-    .k-split-button:focus,
-    .k-split-button.k-state-focus,
-    .k-split-button.k-state-focused {
-        @include box-shadow( $button-focused-shadow );
-    }
-
-}
-
-
-
-
-@include exports( "outline-button/theme" ) {
+                // Focus state
+                &:focus,
+                &.k-focus {
+                    @if ( $kendo-solid-button-shadow ) {
+                        box-shadow: 0 0 $kendo-solid-button-shadow-blur $kendo-solid-button-shadow-spread rgba( $_button-border, $kendo-solid-button-shadow-opacity );
+                    }
+                }
 
-    // Outline button
-    .k-button-outline {
-        @include box-shadow( none );
-        border-color: currentColor;
-        color: $button-text;
-        background-color: transparent;
+                // Active state
+                &:active,
+                &.k-active {
+                    @include fill(
+                        $_button-active-text,
+                        $_button-active-bg,
+                        $_button-active-border
+                    );
+                }
 
-        // Hover state
-        &:hover,
-        &.k-state-hover {
-            @include fill(
-                contrast-wcag( $button-text ),
-                $button-text,
-                $button-text
-            );
-        }
+                // Selected
+                &.k-selected {
+                    @include fill(
+                        $_button-active-text,
+                        $_button-active-bg,
+                        $_button-active-border
+                    );
+                }
 
-        // Focused state
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            @if ($outline-button-shadow) {
-                box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $button-text, $outline-button-shadow-opacity );
+                // Disabled state
+                &:disabled,
+                &.k-disabled {
+                    @include fill(
+                        $kendo-button-disabled-text,
+                        $kendo-button-disabled-bg,
+                        $kendo-button-disabled-border,
+                        $kendo-button-disabled-gradient
+                    );
+                    @include box-shadow( $kendo-button-disabled-shadow );
+                }
             }
         }
-
-        // Active state
-        &:active,
-        &.k-state-active {
-            @include fill(
-                contrast-wcag( $button-text ),
-                $button-text,
-                $button-text
-            );
-        }
-
-        // Selected state
-        &.k-state-selected {
-            @include fill(
-                contrast-wcag( $button-text ),
-                $button-text,
-                $button-text
-            );
-        }
-    }
-    .k-button-outline.k-primary {
-        @extend .k-button-outline-primary !optional;
     }
 
-    @each $name, $color in $button-theme-colors {
-        .k-button-outline.k-button-outline-#{$name} {
+
+    // Outline button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-outline-#{$name} {
             @include box-shadow( none );
             border-color: currentColor;
             color: $color;
@@ -212,7 +151,7 @@
 
             // Hover state
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 @include fill(
                     contrast-wcag( $color ),
                     $color,
@@ -220,151 +159,121 @@
                 );
             }
 
-            // Focused state
+            // Focus state
             &:focus,
-            &.k-state-focus,
-            &.k-state-focused {
-                @if ($outline-button-shadow) {
-                    box-shadow: 0 0 $outline-button-shadow-blur $outline-button-shadow-spread rgba( $color, $outline-button-shadow-opacity );
+            &.k-focus {
+                @if $kendo-outline-button-shadow {
+                    box-shadow: 0 0 $kendo-outline-button-shadow-blur $kendo-outline-button-shadow-spread rgba( $color, $kendo-outline-button-shadow-opacity );
                 }
             }
 
             // Active state
             &:active,
-            &.k-state-active {
+            &.k-active {
                 @include fill(
                     contrast-wcag( $color ),
                     $color,
                     $color
                 );
-                box-shadow: none;
             }
 
-            // Selected state
-            &.k-state-selected {
+            // Selected
+            &.k-selected {
                 @include fill(
                     contrast-wcag( $color ),
                     $color,
                     $color
                 );
-                box-shadow: none;
             }
-        }
-    }
-
-}
-
-
 
-
-@include exports( "flat-button/theme" ) {
-
-    // Flat button
-    .k-button-flat {
-
-        &,
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focus {
-            color: inherit;
-        }
-
-        // Disabled state
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
-    .k-button-flat.k-primary {
-        @extend .k-button-flat-primary !optional;
-    }
 
-    @each $name, $color in $button-theme-colors {
-        .k-button-flat.k-button-flat-#{$name} {
 
-            &,
-            &:hover,
-            &.k-state-hover,
-            &:active,
-            &.k-state-active,
-            &:focus,
-            &.k-state-focus {
-                color: $color;
-            }
+    // Flat button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": inherit ) ) {
+        .k-button-flat-#{$name} {
+            color: $color;
 
             // Disabled state
             &:disabled,
-            &.k-state-disabled {
-                color: $button-disabled-text;
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
             }
         }
     }
 
-}
-
-
 
-
-@include exports( "link-button/theme" ) {
-
-    @each $name, $color in map-merge( $button-theme-colors, ( "base": $base-text ) ) {
-        .k-button-link.k-button-link-#{$name} {
-            @include box-shadow( none );
+    // Link button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-link-#{$name} {
             color: $color;
 
+            // Hover
             &:hover,
-            &.k-state-hover {
+            &.k-hover {
                 color: try-shade( $color, 2 );
             }
+
+            // Focus
             &:focus,
-            &.k-state-focus {
-                @if ($link-button-shadow) {
-                    box-shadow: 0 0 $link-button-shadow-blur $link-button-shadow-spread rgba( $color, $link-button-shadow-opacity );
+            &.k-focus {
+                @if ( $kendo-link-button-shadow ) {
+                    box-shadow: 0 0 $kendo-link-button-shadow-blur $kendo-link-button-shadow-spread rgba( $color, $kendo-link-button-shadow-opacity );
                 }
             }
+
+            // Active
             &:active,
-            &.k-state-active,
-            &.k-state-selected {
+            &.k-active {
+                color: try-shade( $color, 2 );
+            }
+
+            // Selected
+            &.k-selected {
                 color: try-shade( $color, 2 );
             }
+
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
 
-}
 
+    // Clear button
+    @each $name, $color in map-merge( $kendo-button-theme-colors, ( "base": $base-text ) ) {
+        .k-button-clear-#{$name} {
+            color: $color;
 
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
+        }
+    }
 
 
-@include exports( "clear-button/theme" ) {
+    // Menu button
+    .k-menu-button {}
 
-    .k-button-clear {
-        color: $clear-button-text;
 
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected,
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            color: $clear-button-hover-text;
-        }
+    // Button group
+    .k-button-group {}
 
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-                display: block;
-            }
-        }
 
+    // Split button
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        @include box-shadow( $kendo-button-focus-shadow );
     }
 
 }
diff --git a/packages/default/scss/button/_variables.scss b/packages/default/scss/button/_variables.scss
index 9134e00d82e..8b78687ee35 100644
--- a/packages/default/scss/button/_variables.scss
+++ b/packages/default/scss/button/_variables.scss
@@ -2,197 +2,200 @@
 
 /// Width of the border around the button.
 /// @group button
-$button-border-width: 1px !default;
+$kendo-button-border-width: 1px !default;
 
 /// Border radius of the button.
 /// @group button
-$button-border-radius: $border-radius !default;
+$kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$button-padding-x: map-get( $spacing, 2 ) !default;
-$button-padding-x-sm: null !default;
-$button-padding-x-md: null !default;
-$button-padding-x-lg: null !default;
+$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 2 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$button-padding-y: map-get( $spacing, 1 ) !default;
-$button-padding-y-sm: null !default;
-$button-padding-y-md: null !default;
-$button-padding-y-lg: null !default;
+$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 1 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 1 ) + map-get( $spacing, thin ) !default;
 
 /// Font family of the button.
 /// @group button
-$button-font-family: $font-family !default;
+$kendo-button-font-family: $font-family !default;
 
-/// Font size of the button.
+/// Font sizes of the button.
 /// @group button
-$button-font-size: $font-size !default;
-$button-font-size-sm: null !default;
-$button-font-size-md: null !default;
-$button-font-size-lg: null !default;
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
 
-/// Line height used along with $font-size.
+/// Line heights used along with $font-size.
 /// @group button
-$button-line-height: $line-height !default;
-$button-line-height-sm: null !default;
-$button-line-height-md: null !default;
-$button-line-height-lg: null !default;
+$kendo-button-line-height: $line-height-md !default;
+$kendo-button-line-height-sm: $line-height-md !default;
+$kendo-button-line-height-md: $line-height-md !default;
+$kendo-button-line-height-lg: $line-height-md !default;
 
 /// Calculated height of the button.
 /// @group button
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
-$button-arrow-padding-x: $button-padding-y !default;
-$button-arrow-padding-y: $button-padding-y !default;
+$kendo-button-arrow-padding-x: $kendo-button-padding-y !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 
 /// Theme colors map for the button.
 /// @group button
-$button-theme-colors: (
-    "primary": map-get( $theme-colors, primary ),
-    "secondary": map-get( $theme-colors, secondary ),
-    "tertiary": map-get( $theme-colors, tertiary ),
-    "info": map-get( $theme-colors, info ),
-    "success": map-get( $theme-colors, success ),
-    "warning": map-get( $theme-colors, warning ),
-    "error": map-get( $theme-colors, error ),
-    "dark": map-get( $theme-colors, dark ),
-    "light": map-get( $theme-colors, light ),
-    "inverse": map-get( $theme-colors, inverse )
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": #f5f5f5 )
 ) !default;
 
-/// The background of the buttons.
+/// The base background of the button.
 /// @group button
-$button-bg: #f5f5f5 !default;
-/// The text color of the buttons.
+$kendo-button-bg: #f5f5f5 !default;
+/// The base text color of the button.
 /// @group button
-$button-text: #424242 !default;
-/// The border color of the buttons.
+$kendo-button-text: #424242 !default;
+/// The base border color of the button.
 /// @group button
-$button-border: rgba( black, .08 ) !default;
-/// The background gradient of the buttons.
+$kendo-button-border: rgba( black, .08 ) !default;
+/// The base background gradient of the button.
 /// @group button
-$button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-$button-shadow: null !default;
+$kendo-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: null !default;
 
-/// The background of hovered buttons.
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: try-shade( $kendo-button-bg, .5 ) !default;
+/// The base text color of hovered button.
 /// @group button
-$button-hovered-bg: try-shade( $button-bg, .5 ) !default;
-/// The text color of hovered buttons.
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
 /// @group button
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
+$kendo-button-hover-border: null !default;
+/// The base background gradient of hovered button.
 /// @group button
-$button-hovered-border: null !default;
-/// The background gradient of hovered buttons.
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
 /// @group button
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
+$kendo-button-hover-shadow: null !default;
 
-/// The background color of active buttons.
+/// The base background color of active button.
 /// @group button
-$button-active-bg: try-shade( $button-bg, 1.5 ) !default;
-/// The text color of active buttons.
+$kendo-button-active-bg: try-shade( $kendo-button-bg, 1.5 ) !default;
+/// The base text color of active button.
 /// @group button
-$button-active-text: null !default;
-/// The border color of active buttons.
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
 /// @group button
-$button-active-border: null !default;
-/// The background gradient of active buttons.
+$kendo-button-active-border: null !default;
+/// The base background gradient of active button.
 /// @group button
-$button-active-gradient: null !default;
-$button-active-shadow: null !default;
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
+/// @group button
+$kendo-button-active-shadow: null !default;
 
-/// The background color of selected buttons.
+/// The base background color of selected button.
 /// @group button
-$button-selected-bg: $primary !default;
+$kendo-button-selected-bg: $primary !default;
 /// The text color of selected buttons.
 /// @group button
-$button-selected-text: contrast-wcag( $button-selected-bg ) !default;
+$kendo-button-selected-text: contrast-wcag( $kendo-button-selected-bg ) !default;
 /// The border color of selected buttons.
 /// @group button
-$button-selected-border: $button-selected-bg !default;
+$kendo-button-selected-border: $kendo-button-selected-bg !default;
 /// The background gradient of selected buttons.
 /// @group button
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
-/// @group button
-$button-focused-shadow: 0 0 0 2px rgba( $button-border, .08 ) !default;
-
-
-// Disabled button
-$button-disabled-bg: null !default;
-$button-disabled-text: null !default;
-$button-disabled-border: null !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: null !default;
-
-
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: contrast-wcag( $primary-button-bg ) !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: rgba( black, 0 ), rgba( black, .04 ) !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: try-shade( $primary-button-bg, .5 ) !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: $primary-button-hovered-bg !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: try-shade( $primary-button-bg, 1.5 ) !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: $primary-button-active-bg !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-border !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
-
-$primary-button-focused-shadow: 0 0 0 2px rgba( $primary-button-border, .3 ) !default;
-
-$solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
-$solid-button-shade-function: "try-shade";
-$solid-button-shade-text-amount: 0 !default;
-$solid-button-shade-bg-amount: 0 !default;
-$solid-button-shade-border-amount: 0 !default;
-$solid-button-hover-shade-text-amount: null !default;
-$solid-button-hover-shade-bg-amount: .5 !default;
-$solid-button-hover-shade-border-amount: .5 !default;
-$solid-button-active-shade-text-amount: null !default;
-$solid-button-active-shade-bg-amount: 1.5 !default;
-$solid-button-active-shade-border-amount: 1.5 !default;
-$solid-button-shadow: true !default;
-$solid-button-shadow-blur: 0px !default;
-$solid-button-shadow-spread: 2px !default;
-$solid-button-shadow-opacity: .3 !default;
-
-$outline-button-shadow: true !default;
-$outline-button-shadow-blur: 0px !default;
-$outline-button-shadow-spread: 2px !default;
-$outline-button-shadow-opacity: .3 !default;
-
-$link-button-shadow: true !default;
-$link-button-shadow-blur: 0px !default;
-$link-button-shadow-spread: 2px !default;
-$link-button-shadow-opacity: .3 !default;
-
-$flat-button-hover-opacity: .04 !default;
-$flat-button-focus-opacity: null !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .2 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .1 !default;
+$kendo-button-selected-gradient: $kendo-button-active-gradient !default;
+/// The base shadow of selected button.
+/// @group button
+$kendo-button-selected-shadow: $kendo-button-active-shadow !default;
+
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused button.
+/// @group button
+$kendo-button-focus-shadow: 0 0 0 2px rgba( $kendo-button-border, .08 ) !default;
+
+/// The base background of disabled button.
+/// @group button
+$kendo-button-disabled-bg: null !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: null !default;
+/// The base border color of disabled buttons.
+/// @group button
+$kendo-button-disabled-border: null !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: null !default;
+
+// Solid button
+$kendo-solid-button-gradient: rgba( black, 0 ), rgba( black, .02 ) !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: 0 !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 0 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: .5 !default;
+$kendo-solid-button-hover-shade-border-amount: .5 !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: 1.5 !default;
+$kendo-solid-button-active-shade-border-amount: 1.5 !default;
+$kendo-solid-button-shadow: true !default;
+$kendo-solid-button-shadow-blur: 0px !default;
+$kendo-solid-button-shadow-spread: 2px !default;
+$kendo-solid-button-shadow-opacity: .3 !default;
+
+// Outline button
+$kendo-outline-button-shadow: true !default;
+$kendo-outline-button-shadow-blur: 0px !default;
+$kendo-outline-button-shadow-spread: 2px !default;
+$kendo-outline-button-shadow-opacity: .3 !default;
+
+// Link button
+$kendo-link-button-shadow: true !default;
+$kendo-link-button-shadow-blur: 0px !default;
+$kendo-link-button-shadow-spread: 2px !default;
+$kendo-link-button-shadow-opacity: .3 !default;
+
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .04 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: null !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .2 !default;
+
+/// The color transition of the flat button.
+/// @group button
+$kendo-button-transition: color .2s ease-in-out !default;
diff --git a/packages/default/scss/card/_layout.scss b/packages/default/scss/card/_layout.scss
index 1c24155cf37..14787a77475 100644
--- a/packages/default/scss/card/_layout.scss
+++ b/packages/default/scss/card/_layout.scss
@@ -219,10 +219,6 @@
         border-style: solid;
         border-color: inherit;
         display: inline-flex;
-
-        > .k-button {
-            flex: 1 1 auto;
-        }
     }
 
 
diff --git a/packages/default/scss/card/_variables.scss b/packages/default/scss/card/_variables.scss
index efbbd6390ae..56058528af3 100644
--- a/packages/default/scss/card/_variables.scss
+++ b/packages/default/scss/card/_variables.scss
@@ -62,7 +62,7 @@ $card-actions-border-width: 1px !default;
 $card-actions-gap: map-get( $spacing, 2 ) !default;
 
 $card-deck-scroll-button-radius: 0px !default;
-$card-deck-scroll-button-offset: -$button-border-width !default;
+$card-deck-scroll-button-offset: -$kendo-button-border-width !default;
 
 $card-callout-width: 20px !default;
 $card-callout-height: 20px !default;
diff --git a/packages/default/scss/colorpicker/_layout.scss b/packages/default/scss/colorpicker/_layout.scss
index 930afcc9974..2e7da58d4cf 100644
--- a/packages/default/scss/colorpicker/_layout.scss
+++ b/packages/default/scss/colorpicker/_layout.scss
@@ -29,9 +29,9 @@
         }
 
         .k-selected-color {
-            margin: $button-padding-y;
-            width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
-            height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            margin: $kendo-button-padding-y;
+            width: calc( #{$kendo-button-inner-calc-size} - #{$kendo-button-padding-y * 2} );
+            height: calc( #{$kendo-button-inner-calc-size} - #{$kendo-button-padding-y * 2} );
             border-width: 1px;
             border-style: solid;
             background-clip: content-box;
@@ -40,16 +40,16 @@
             overflow: hidden;
         }
         .k-color-preview {
-            margin: $button-padding-y;
-            width: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
-            height: calc( #{$button-inner-calc-size} - #{$button-padding-y * 2} );
+            margin: $kendo-button-padding-y-md;
+            width: calc( #{$kendo-button-inner-calc-size} - #{$kendo-button-padding-y * 2} );
+            height: calc( #{$kendo-button-inner-calc-size} - #{$kendo-button-padding-y * 2} );
             z-index: 1;
         }
 
         .k-tool-icon {
-            padding: $button-padding-y;
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-inner-calc-size;
+            height: $kendo-button-inner-calc-size;
             border-width: 0;
             border-style: solid;
             border-color: inherit;
@@ -82,8 +82,8 @@
         // Select
         .k-select {
             padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $button-inner-calc-size, null );
-            height: $button-inner-calc-size;
+            width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
+            height: $kendo-button-inner-calc-size;
             border-width: 0;
             border-inline-start-width: $picker-select-border-width;
             border-style: solid;
diff --git a/packages/default/scss/colorpicker/_variables.scss b/packages/default/scss/colorpicker/_variables.scss
index dac4a9bd527..f6c5adeb75b 100644
--- a/packages/default/scss/colorpicker/_variables.scss
+++ b/packages/default/scss/colorpicker/_variables.scss
@@ -3,18 +3,18 @@ $colorpicker-font-family: $font-family !default;
 $colorpicker-font-size: $font-size !default;
 $colorpicker-line-height: $line-height !default;
 
-$colorpicker-bg: $button-bg !default;
-$colorpicker-text: $button-text !default;
-$colorpicker-border: $button-border !default;
-$colorpicker-gradient: $button-gradient !default;
+$colorpicker-bg: $kendo-button-bg !default;
+$colorpicker-text: $kendo-button-text !default;
+$colorpicker-border: $kendo-button-border !default;
+$colorpicker-gradient: $kendo-button-gradient !default;
 
-$colorpicker-hovered-bg: $button-hovered-bg !default;
-$colorpicker-hovered-text: $button-hovered-text !default;
-$colorpicker-hovered-border: $button-hovered-border !default;
-$colorpicker-hovered-gradient: $button-hovered-gradient !default;
+$colorpicker-hovered-bg: $kendo-button-hover-bg !default;
+$colorpicker-hovered-text: $kendo-button-hover-text !default;
+$colorpicker-hovered-border: $kendo-button-hover-border !default;
+$colorpicker-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $colorpicker-focused-bg: null !default;
 $colorpicker-focused-text: null !default;
 $colorpicker-focused-border: null !default;
 $colorpicker-focused-gradient: null !default;
-$colorpicker-focused-shadow: $button-focused-shadow !default;
+$colorpicker-focused-shadow: $kendo-button-focus-shadow !default;
diff --git a/packages/default/scss/common/_base.scss b/packages/default/scss/common/_base.scss
index 5898558a978..c3486ee1e93 100644
--- a/packages/default/scss/common/_base.scss
+++ b/packages/default/scss/common/_base.scss
@@ -119,8 +119,7 @@
         @include disabled( $disabled-styling );
 
 
-        .k-link,
-        .k-button {
+        .k-link {
             cursor: default;
             outline: 0;
         }
diff --git a/packages/default/scss/dataviz/_theme.scss b/packages/default/scss/dataviz/_theme.scss
index 1cae757207a..279191a5220 100644
--- a/packages/default/scss/dataviz/_theme.scss
+++ b/packages/default/scss/dataviz/_theme.scss
@@ -88,18 +88,18 @@
     .k-handle {
         cursor: e-resize;
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
     }
diff --git a/packages/default/scss/datetimepicker/_layout.scss b/packages/default/scss/datetimepicker/_layout.scss
index 7f6f77d21db..fac88abe179 100644
--- a/packages/default/scss/datetimepicker/_layout.scss
+++ b/packages/default/scss/datetimepicker/_layout.scss
@@ -48,7 +48,7 @@
         }
         .k-link {
             padding: $picker-select-padding-y $picker-select-padding-x;
-            width: if( $use-picker-select-width, $button-inner-calc-size, null );
+            width: if( $use-picker-select-width, $kendo-button-inner-calc-size, null );
             height: 100%;
             border-width: 0;
             border-style: solid;
diff --git a/packages/default/scss/dropdownlist/_layout.scss b/packages/default/scss/dropdownlist/_layout.scss
index df078f7e8ef..d810089dd37 100644
--- a/packages/default/scss/dropdownlist/_layout.scss
+++ b/packages/default/scss/dropdownlist/_layout.scss
@@ -68,8 +68,8 @@
             display: none;
         }
         .k-select {
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
+            width: $kendo-button-inner-calc-size;
+            height: $kendo-button-inner-calc-size;
         }
     }
 
diff --git a/packages/default/scss/dropdownlist/_variables.scss b/packages/default/scss/dropdownlist/_variables.scss
index 4066f2d85e7..b71aaeab1f2 100644
--- a/packages/default/scss/dropdownlist/_variables.scss
+++ b/packages/default/scss/dropdownlist/_variables.scss
@@ -1,13 +1,13 @@
 // Dropdownlist
-$dropdownlist-bg: $button-bg !default;
-$dropdownlist-text: $button-text !default;
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-bg: $kendo-button-bg !default;
+$dropdownlist-text: $kendo-button-text !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
-$dropdownlist-hovered-bg: $button-hovered-bg !default;
-$dropdownlist-hovered-text: $button-hovered-text !default;
-$dropdownlist-hovered-border: $button-hovered-border !default;
-$dropdownlist-hovered-gradient: $button-hovered-gradient !default;
+$dropdownlist-hovered-bg: $kendo-button-hover-bg !default;
+$dropdownlist-hovered-text: $kendo-button-hover-text !default;
+$dropdownlist-hovered-border: $kendo-button-hover-border !default;
+$dropdownlist-hovered-gradient: $kendo-button-hover-gradient !default;
 
 $dropdownlist-focused-bg: null !default;
 $dropdownlist-focused-text: null !default;
diff --git a/packages/default/scss/editor/_layout.scss b/packages/default/scss/editor/_layout.scss
index 6066f740225..00f12b9f9de 100644
--- a/packages/default/scss/editor/_layout.scss
+++ b/packages/default/scss/editor/_layout.scss
@@ -166,9 +166,9 @@
 
         // Tool
         .k-tool {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
         }
         .k-tool-text {
             display: none;
@@ -596,8 +596,8 @@
             flex-flow: row wrap;
         }
         .k-list .k-item {
-            padding: $button-padding-y;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             justify-content: center;
             flex: 1 0 33%;
diff --git a/packages/default/scss/fab/_variables.scss b/packages/default/scss/fab/_variables.scss
index 45fb7fd8b99..352a2de1f38 100644
--- a/packages/default/scss/fab/_variables.scss
+++ b/packages/default/scss/fab/_variables.scss
@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
diff --git a/packages/default/scss/gantt/_layout.scss b/packages/default/scss/gantt/_layout.scss
index 1072dce54a1..c1e093bac05 100644
--- a/packages/default/scss/gantt/_layout.scss
+++ b/packages/default/scss/gantt/_layout.scss
@@ -219,9 +219,9 @@
             }
             .k-gantt-pdf,
             .k-gantt-create {
-                padding: $button-padding-y;
-                width: $button-calc-size;
-                height: $button-calc-size;
+                padding: $kendo-button-padding-y;
+                width: $kendo-button-calc-size;
+                height: $kendo-button-calc-size;
 
                 .k-button-icon {}
                 .k-button-text {
diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
index 2e21d7fa828..3dc171c33f8 100644
--- a/packages/default/scss/grid/_layout.scss
+++ b/packages/default/scss/grid/_layout.scss
@@ -4,14 +4,14 @@
 
     $grid-group-dropclue-size: 6px;
     $grid-group-dropclue-line-size: $grid-group-dropclue-size / 3;
-    $grid-group-dropclue-height: $button-calc-size !default;
+    $grid-group-dropclue-height: $kendo-button-calc-size !default;
     $grid-group-dropclue-top: 3px !default;
 
     $grid-row-inner-height: calc( #{$line-height-em} + #{$table-cell-padding-y * 2} );
     // $grid-row-half-inner-height: calc( #{$line-height-em / 2} + #{$table-cell-padding-y} );
 
     // be cautious when changing the next line; see https://github.com/MoOx/reduce-css-calc/issues/38
-    $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$button-calc-size} - #{$line-height-em}) / 2 ) !default;
+    $grid-command-cell-padding-y: calc( #{$table-cell-padding-y} - (#{$kendo-button-calc-size} - #{$line-height-em}) / 2 ) !default;
 
     $grid-hierarchy-col-width: ($icon-size * 2) !default;
 
@@ -26,7 +26,7 @@
     $grid-sorted-icon-spacing: calc( #{$padding-x} - 1px ) !default;
 
     // helper variables
-    $grid-filterable-icon-spacing: calc( #{$button-calc-size} + #{$grid-header-menu-icon-spacing} );
+    $grid-filterable-icon-spacing: calc( #{$kendo-button-calc-size} + #{$grid-header-menu-icon-spacing} );
 
     .k-grid {
         border-width: $grid-border-width;
@@ -423,7 +423,7 @@
 
         &::before {
             content: "";
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             display: inline-block;
             vertical-align: middle;
         }
@@ -456,7 +456,7 @@
     .k-group-indicator {
         @include border-radius( $grid-group-indicator-border-radius );
         margin: 0;
-        padding: $button-padding-y $button-padding-x;
+        padding: $kendo-button-padding-y $kendo-button-padding-x;
         border-width: 1px;
         border-style: solid;
         display: inline-flex;
@@ -623,7 +623,7 @@
             padding-right: $grid-filterable-icon-spacing;
 
             .k-ie & {
-                padding-right: calc( #{ $button-calc-size } + #{ $grid-header-menu-icon-spacing });
+                padding-right: calc( #{ $kendo-button-calc-size } + #{ $grid-header-menu-icon-spacing });
             }
         }
 
@@ -633,9 +633,9 @@
 
         .k-grid-filter,
         .k-header-column-menu {
-            padding: $button-padding-y;
-            width: $button-calc-size;
-            height: $button-calc-size;
+            padding: $kendo-button-padding-y;
+            width: $kendo-button-calc-size;
+            height: $kendo-button-calc-size;
             box-sizing: border-box;
             outline: 0;
             line-height: $form-line-height;
@@ -645,7 +645,7 @@
             justify-content: center;
             position: absolute;
             right: $grid-header-menu-icon-spacing;
-            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $button-inner-calc-size / 2 } );
+            bottom: calc( #{ $grid-header-padding-y } + #{ $line-height-em / 2 } - #{ $kendo-button-inner-calc-size / 2 } );
             z-index: 1;
 
             &:hover {
@@ -1070,12 +1070,12 @@
     }
 
     .k-header > .k-cell-inner {
-        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+        margin: (-1 * $grid-header-padding-y) calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x})) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
     }
 
     .k-filterable {
         > .k-cell-inner {
-            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
+            margin: (-1 * $grid-header-padding-y) calc(-1 * #{$kendo-button-calc-size}) (-1 * $grid-header-padding-y) (-1 * $grid-cell-padding-x);
 
             .k-link {
                 padding-right: 0;
@@ -1442,7 +1442,7 @@
 
         .k-header > .k-cell-inner {
             margin-right: (-1 * $grid-cell-padding-x);
-            margin-left: calc(-1 * calc( #{$button-calc-size} - #{$grid-cell-padding-x}));
+            margin-left: calc(-1 * calc( #{$kendo-button-calc-size} - #{$grid-cell-padding-x}));
 
             .k-sort-order {
                 margin-right: $grid-sorting-index-spacing-x;
@@ -1453,7 +1453,7 @@
         .k-filterable {
             > .k-cell-inner {
                 margin-right: (-1 * $grid-cell-padding-x);
-                margin-left: calc(-1 * #{$button-calc-size});
+                margin-left: calc(-1 * #{$kendo-button-calc-size});
 
                 .k-link {
                     padding-right: $grid-header-padding-x;
diff --git a/packages/default/scss/grid/_theme.scss b/packages/default/scss/grid/_theme.scss
index 77f6b2e0be3..01d66cb83f9 100644
--- a/packages/default/scss/grid/_theme.scss
+++ b/packages/default/scss/grid/_theme.scss
@@ -182,8 +182,8 @@
         .k-header-column-menu,
         .k-hierarchy-cell .k-icon {
             &:hover {
-                color: $button-hovered-text;
-                background-color: $button-hovered-bg;
+                color: $kendo-button-hover-text;
+                background-color: $kendo-button-hover-bg;
             }
             &:focus,
             &.k-state-focus,
diff --git a/packages/default/scss/input/_theme.scss b/packages/default/scss/input/_theme.scss
index a679011796f..47c8fdcae9c 100644
--- a/packages/default/scss/input/_theme.scss
+++ b/packages/default/scss/input/_theme.scss
@@ -9,7 +9,7 @@
         }
 
         .k-clear-value {
-            color: $clear-button-text;
+            color: inherit;
         }
 
         > .k-clear-value {
diff --git a/packages/default/scss/input/_variables.scss b/packages/default/scss/input/_variables.scss
index c217d74a0f4..d559fc15908 100644
--- a/packages/default/scss/input/_variables.scss
+++ b/packages/default/scss/input/_variables.scss
@@ -77,24 +77,24 @@ $picker-select-calc-size: $input-inner-calc-height !default;
 $picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
 $picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
 
-$picker-select-bg: $button-bg !default;
-$picker-select-text: $button-text !default;
-$picker-select-border: $button-border !default;
-$picker-select-gradient: $button-gradient !default;
+$picker-select-bg: $kendo-button-bg !default;
+$picker-select-text: $kendo-button-text !default;
+$picker-select-border: $kendo-button-border !default;
+$picker-select-gradient: $kendo-button-gradient !default;
 
-$picker-select-hovered-bg: $button-hovered-bg !default;
-$picker-select-hovered-text: $button-hovered-text !default;
-$picker-select-hovered-border: $button-hovered-border !default;
-$picker-select-hovered-gradient: $button-hovered-gradient !default;
+$picker-select-hovered-bg: $kendo-button-hover-bg !default;
+$picker-select-hovered-text: $kendo-button-hover-text !default;
+$picker-select-hovered-border: $kendo-button-hover-border !default;
+$picker-select-hovered-gradient: $kendo-button-hover-gradient !default;
 
-$picker-select-pressed-bg: $button-active-bg !default;
-$picker-select-pressed-text: $button-active-text !default;
-$picker-select-pressed-border: $button-active-border !default;
-$picker-select-pressed-gradient: $button-active-gradient !default;
+$picker-select-pressed-bg: $kendo-button-active-bg !default;
+$picker-select-pressed-text: $kendo-button-active-text !default;
+$picker-select-pressed-border: $kendo-button-active-border !default;
+$picker-select-pressed-gradient: $kendo-button-active-gradient !default;
 
 
 // Spinner
-$spinner-width: $button-inner-calc-size !default;
+$spinner-width: $kendo-button-inner-calc-size !default;
 $spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
 $spinner-icon-offset: 2px !default;
 
diff --git a/packages/default/scss/map/_layout.scss b/packages/default/scss/map/_layout.scss
index 42595543810..39999837fd7 100644
--- a/packages/default/scss/map/_layout.scss
+++ b/packages/default/scss/map/_layout.scss
@@ -127,12 +127,6 @@
         display: flex;
 
         .k-pdf-export & { display: none; }
-
-
-        // Buttons
-        .k-button {
-            padding: $button-padding-y;
-        }
     }
 
 }
diff --git a/packages/default/scss/map/_theme.scss b/packages/default/scss/map/_theme.scss
index 964f2dc9f35..1c60bd52ba8 100644
--- a/packages/default/scss/map/_theme.scss
+++ b/packages/default/scss/map/_theme.scss
@@ -9,12 +9,12 @@
 
         .k-navigator {
             @include fill(
-                $button-text,
-                $button-bg,
-                $button-border,
-                $button-gradient
+                $kendo-button-text,
+                $kendo-button-bg,
+                $kendo-button-border,
+                $kendo-button-gradient
             );
-            @include box-shadow( $button-shadow );
+            @include box-shadow( $kendo-button-shadow );
         }
 
         .k-marker {
diff --git a/packages/default/scss/map/_variables.scss b/packages/default/scss/map/_variables.scss
index 3dfee7a9c7f..ea203fbd947 100644
--- a/packages/default/scss/map/_variables.scss
+++ b/packages/default/scss/map/_variables.scss
@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;
diff --git a/packages/default/scss/multiselect/_layout.scss b/packages/default/scss/multiselect/_layout.scss
index 78626f2ba7d..617dc820b1a 100644
--- a/packages/default/scss/multiselect/_layout.scss
+++ b/packages/default/scss/multiselect/_layout.scss
@@ -70,8 +70,8 @@
 
             // Token
             .k-button {
-                min-height: calc( #{$form-line-height-em} + #{$button-padding-y /2} + 2px );
-                padding: ($button-padding-y / 4) ($button-padding-x / 2);
+                min-height: calc( #{$form-line-height-em} + #{$kendo-button-padding-y-md /2} + 2px );
+                padding: ($kendo-button-padding-y-md / 4) ($kendo-button-padding-x-md / 2);
                 margin: $padding-y-sm 0 0 $padding-y-sm;
                 cursor: default;
                 display: inline-flex;
diff --git a/packages/default/scss/multiselect/_variables.scss b/packages/default/scss/multiselect/_variables.scss
index 02216e42e62..0c068d7b07e 100644
--- a/packages/default/scss/multiselect/_variables.scss
+++ b/packages/default/scss/multiselect/_variables.scss
@@ -28,10 +28,10 @@ $multiselect-focused-text: $input-focused-text !default;
 $multiselect-focused-border: $input-focused-border !default;
 $multiselect-focused-shadow: $input-focused-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
 $multiselect-clear-right: calc( #{$icon-size} + #{$input-padding-y} ) !default;
diff --git a/packages/default/scss/pager/_layout.scss b/packages/default/scss/pager/_layout.scss
index 1e9028c7a71..e6c6a7e0aeb 100644
--- a/packages/default/scss/pager/_layout.scss
+++ b/packages/default/scss/pager/_layout.scss
@@ -74,8 +74,8 @@
 
     // Base pager item
     %base-pager-item {
-        min-width: $button-calc-size;
-        height: $button-calc-size;
+        min-width: $kendo-button-calc-size;
+        height: $kendo-button-calc-size;
         color: inherit;
         text-align: center;
         display: inline-flex;
@@ -234,7 +234,7 @@
                 margin-right: $pager-section-spacing;
             }
 
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             border-color: inherit;
         }
 
diff --git a/packages/default/scss/pager/_variables.scss b/packages/default/scss/pager/_variables.scss
index 1e8a55135b2..5640490bfdb 100644
--- a/packages/default/scss/pager/_variables.scss
+++ b/packages/default/scss/pager/_variables.scss
@@ -16,7 +16,7 @@ $pager-focus-shadow: $focused-shadow !default;
 
 $pager-section-spacing: $spacer-x !default;
 
-$pager-item-padding-x: $button-padding-y !default;
+$pager-item-padding-x: $kendo-button-padding-y !default;
 $pager-item-padding-y: $pager-item-padding-x !default;
 $pager-item-border-width: 0px !default;
 $pager-item-border-radius: null !default;
diff --git a/packages/default/scss/scheduler/_theme.scss b/packages/default/scss/scheduler/_theme.scss
index edc47ce5d57..3f704202c00 100644
--- a/packages/default/scss/scheduler/_theme.scss
+++ b/packages/default/scss/scheduler/_theme.scss
@@ -138,7 +138,7 @@
     .k-scheduler-marquee {}
     .k-scheduler-marquee::before,
     .k-scheduler-marquee::after {
-        border-color: $primary-button-border;
+        border-color: $primary;
     }
 
     // Edit dialog
diff --git a/packages/default/scss/scrollview/_variables.scss b/packages/default/scss/scrollview/_variables.scss
index fbc6b803c35..f8a467ad864 100644
--- a/packages/default/scss/scrollview/_variables.scss
+++ b/packages/default/scss/scrollview/_variables.scss
@@ -9,10 +9,10 @@ $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
-$scrollview-pagebutton-bg: $button-bg !default;
-$scrollview-pagebutton-border: $button-border !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: $primary-button-border !default;
+$scrollview-pagebutton-bg: $kendo-button-bg !default;
+$scrollview-pagebutton-border: $kendo-button-border !default;
+$scrollview-pagebutton-primary-bg: $primary !default;
+$scrollview-pagebutton-primary-border: $primary !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
diff --git a/packages/default/scss/slider/_theme.scss b/packages/default/scss/slider/_theme.scss
index b37551ab69b..1ef7027059b 100644
--- a/packages/default/scss/slider/_theme.scss
+++ b/packages/default/scss/slider/_theme.scss
@@ -18,10 +18,6 @@
             @include fill( $bg: $slider-selection-bg );
         }
 
-        .k-button {
-            @include border-radius( 50% );
-        }
-
         .k-draghandle {
             @include fill(
                 $slider-draghandle-text,
diff --git a/packages/default/scss/slider/_variables.scss b/packages/default/scss/slider/_variables.scss
index 649cc12fd58..0f7fdca258c 100644
--- a/packages/default/scss/slider/_variables.scss
+++ b/packages/default/scss/slider/_variables.scss
@@ -18,22 +18,22 @@ $slider-draghandle-border-width: 1px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: null !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: contrast-wcag( $primary  ) !default;
+$slider-draghandle-border: $primary  !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: try-shade( $primary , .5 ) !default;
+$slider-draghandle-hovered-text: null !default;
+$slider-draghandle-hovered-border: $primary  !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: try-shade( $primary , 1.5 ) !default;
+$slider-draghandle-pressed-text: null !default;
+$slider-draghandle-pressed-border: try-shade( $primary , 1.5 ) !default;
 $slider-draghandle-pressed-gradient: null !default;
 
-$slider-draghandle-focused-shadow: $primary-button-focused-shadow !default;
+$slider-draghandle-focused-shadow: 0 0 0 2px rgba( $primary , .3 ) !default;
 
 $slider-transition-speed: .3s !default;
 $slider-transition-function: ease-out !default;
diff --git a/packages/default/scss/spreadsheet/_layout.scss b/packages/default/scss/spreadsheet/_layout.scss
index 5f59151691e..f89167eb517 100644
--- a/packages/default/scss/spreadsheet/_layout.scss
+++ b/packages/default/scss/spreadsheet/_layout.scss
@@ -50,14 +50,6 @@
         z-index: 2;
         top: 0;
         left: 0;
-
-        .k-button {}
-        .k-button:not(:hover) {
-            border-color: transparent;
-            color: inherit;
-            background-color: transparent;
-            background-image: none;
-        }
     }
 
 
@@ -689,15 +681,8 @@
     .k-spreadsheet-popup {
         padding: 0;
 
-        .k-button {
-            @include border-radius( 0 );
-            border-width: 0;
-            color: inherit;
-            background: none;
-        }
-        .k-button-icontext {
-            display: flex;
-            justify-content: flex-start;
+        .k-separator {
+            display: block;
         }
 
         .k-reset-color,
diff --git a/packages/default/scss/spreadsheet/_theme.scss b/packages/default/scss/spreadsheet/_theme.scss
index 83cb84ac2d6..d24e59a389a 100644
--- a/packages/default/scss/spreadsheet/_theme.scss
+++ b/packages/default/scss/spreadsheet/_theme.scss
@@ -126,28 +126,28 @@
     }
     .k-spreadsheet-filter {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        box-shadow: inset 0 0 0 1px $button-border;
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
 
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
         }
     }
diff --git a/packages/default/scss/textbox/_layout.scss b/packages/default/scss/textbox/_layout.scss
index 6c357a23719..f0150ec20dc 100644
--- a/packages/default/scss/textbox/_layout.scss
+++ b/packages/default/scss/textbox/_layout.scss
@@ -45,12 +45,6 @@
 
         .k-input {}
 
-        .k-button-clear {
-            width: $button-inner-calc-size;
-            height: $button-inner-calc-size;
-            border: 0;
-        }
-
         .k-textbox-separator {
             margin: 0;
             width: 0;
diff --git a/packages/default/scss/timeline/_variables.scss b/packages/default/scss/timeline/_variables.scss
index d27c9c08492..02ebef60771 100644
--- a/packages/default/scss/timeline/_variables.scss
+++ b/packages/default/scss/timeline/_variables.scss
@@ -13,8 +13,8 @@ $timeline-mobile-spacing-y: 16px !default;
 $timeline-track-arrow-width: 30px !default;
 $timeline-track-arrow-height: 30px !default;
 
-$timeline-track-arrow-disabled-bg: true-mix($button-bg, $body-bg, 65%) !default;
-$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-bg: true-mix($kendo-button-bg, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
 $timeline-track-arrow-disabled-border: true-mix(#000000, $body-bg, 4.8%) !default;
 
 $timeline-track-size: 6px !default;
@@ -24,16 +24,16 @@ $timeline-track-margin-bottom: 16px !default;
 $timeline-track-bottom-calc: calc((#{$timeline-track-arrow-height} / 2) + #{$timeline-track-wrap-padding-bottom}) !default;
 $timeline-track-start-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
 $timeline-track-end-calc: calc(#{$timeline-track-arrow-width} - 2 * #{$timeline-track-border-width}) !default;
-$timeline-track-bg: $button-bg !default;
-$timeline-track-border-color: $button-border !default;
+$timeline-track-bg: $kendo-button-bg !default;
+$timeline-track-border-color: $kendo-button-border !default;
 
 $timeline-track-item-focus-shadow: 0 3px 4px 0 rgba($primary, .4) !default;
 
 $timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $button-padding-x !default;
-$timeline-flag-padding-y: $button-padding-y !default;
-$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-padding-x: $kendo-button-padding-x !default;
+$timeline-flag-padding-y: $kendo-button-padding-y !default;
+$timeline-flag-line-height: $kendo-button-line-height !default;
 $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
diff --git a/packages/default/scss/timeselector/_layout.scss b/packages/default/scss/timeselector/_layout.scss
index 0b7d9024a19..a59b4f1cb4e 100644
--- a/packages/default/scss/timeselector/_layout.scss
+++ b/packages/default/scss/timeselector/_layout.scss
@@ -35,7 +35,7 @@
 
         .k-title,
         .k-time-selector-header-title {
-            padding: $button-padding-y $button-padding-x;
+            padding: $kendo-button-padding-y $kendo-button-padding-x;
             font-weight: bold;
             display: inline-block;
         }
diff --git a/packages/default/scss/toolbar/_layout.scss b/packages/default/scss/toolbar/_layout.scss
index 7f4d4fefdb6..66ea98bf90e 100644
--- a/packages/default/scss/toolbar/_layout.scss
+++ b/packages/default/scss/toolbar/_layout.scss
@@ -25,7 +25,7 @@
         // Remove once we decide to not size empty containers
         &::before {
             content: "";
-            height: $button-calc-size;
+            height: $kendo-button-calc-size;
             margin-inline-start: -$toolbar-spacing;
         }
 
@@ -177,7 +177,7 @@
             flex-flow: column nowrap;
 
             .k-button {
-                margin: if( $button-border-width == 0, null, 0);
+                margin: if( $kendo-button-border-width == 0, null, 0);
             }
         }
 
diff --git a/packages/default/scss/toolbar/_variables.scss b/packages/default/scss/toolbar/_variables.scss
index c91d175d1b8..98f6b309ae5 100644
--- a/packages/default/scss/toolbar/_variables.scss
+++ b/packages/default/scss/toolbar/_variables.scss
@@ -10,7 +10,7 @@ $toolbar-border-width: 1px !default;
 $toolbar-border-radius: null !default;
 $toolbar-spacing: $toolbar-padding-x !default;
 
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
 $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
diff --git a/packages/material/scss/action-buttons/_layout.scss b/packages/material/scss/action-buttons/_layout.scss
index 7585aa9688e..fac6e877225 100644
--- a/packages/material/scss/action-buttons/_layout.scss
+++ b/packages/material/scss/action-buttons/_layout.scss
@@ -3,9 +3,23 @@
 @include exports("action-buttons/layout/material") {
 
     .k-actions {
+
+        // Button
         .k-button {
             @include box-shadow( none );
         }
+
+
+        // Button group
+        .k-button-group {
+            @include box-shadow( none );
+        }
+
+
+        // Split button
+        .k-split-button {
+            @include box-shadow( none );
+        }
     }
 
 }
diff --git a/packages/material/scss/action-buttons/_theme.scss b/packages/material/scss/action-buttons/_theme.scss
index 19a68a7473b..aa277052b73 100644
--- a/packages/material/scss/action-buttons/_theme.scss
+++ b/packages/material/scss/action-buttons/_theme.scss
@@ -3,9 +3,12 @@
 @include exports("action-buttons/theme/material") {
 
     .k-actions {
-        .k-button:not(.k-primary) {
-            background-color: try-shade( $button-bg );
+
+        .k-button-solid-base {
+            background-color: try-shade( $kendo-button-bg );
+            border-color: try-shade( $kendo-button-bg );
         }
+
     }
 
 }
diff --git a/packages/material/scss/breadcrumb/_variables.scss b/packages/material/scss/breadcrumb/_variables.scss
index a1585b6dc07..afa5b117c6c 100644
--- a/packages/material/scss/breadcrumb/_variables.scss
+++ b/packages/material/scss/breadcrumb/_variables.scss
@@ -14,7 +14,7 @@ $breadcrumb-text: $component-text !default;
 $breadcrumb-border: $component-border !default;
 
 $breadcrumb-delimiter-icon-font-size: $icon-size * .75 !default;
-$breadcrumb-delimiter-icon-padding-x: $button-padding-y !default;
+$breadcrumb-delimiter-icon-padding-x: $kendo-button-padding-y !default;
 $breadcrumb-delimiter-icon-padding-y: 0px !default;
 
 $breadcrumb-link-padding-x: ( $padding-x * 1.25 ) / 2 !default;
diff --git a/packages/material/scss/button/_layout.scss b/packages/material/scss/button/_layout.scss
index 00bdb6052b1..382e285b065 100644
--- a/packages/material/scss/button/_layout.scss
+++ b/packages/material/scss/button/_layout.scss
@@ -6,11 +6,10 @@
     .k-button {
         text-transform: uppercase;
         font-weight: 500;
-        transition: box-shadow 280ms cubic-bezier(.4, 0, .2, 1);
 
         &::before {
             display: block;
-            transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
+            transition: opacity .4s cubic-bezier( .25, .8, .25, 1 );
         }
         &::after {
             display: none !important; // sass-lint:disable-line no-important
@@ -25,15 +24,6 @@
         }
     }
 
-
-    // Button group
-    .k-button-group {}
-
-
-    // Split button
-    .k-split-button {}
-
-
     // Outline button
     .k-button-outline {
         background-color: transparent !important; // sass-lint:disable-line no-important
@@ -42,43 +32,32 @@
 
 
     // Link button
-    .k-button.k-button-link {
-
+    .k-button-link {
         &:hover,
-        &.k-state-hover,
+        &.k-hover,
         &:active,
-        &.k-state-active,
-        &.k-state-selected {
+        &.k-active,
+        &.k-selected {
             &::before {
                 opacity: 0;
             }
         }
 
         &:focus,
-        &.k-state-focus {
+        &.k-focus {
             &::before {
-                opacity: $flat-button-focus-opacity;
+                opacity: $kendo-flat-button-focus-opacity;
             }
         }
     }
 
 
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
-        &::before {
-            display: none;
-        }
+    // Button group
+    .k-button-group {}
 
 
-        &:focus,
-        &.k-state-focus,
-        &.k-state-focused {
-            &::before {
-                display: block;
-            }
-        }
-    }
+    // Split button
+    .k-split-button {}
 
 
     // Popup button group
diff --git a/packages/material/scss/button/_theme.scss b/packages/material/scss/button/_theme.scss
index 68a0cfa2089..7404cdc6cac 100644
--- a/packages/material/scss/button/_theme.scss
+++ b/packages/material/scss/button/_theme.scss
@@ -3,105 +3,108 @@
 @include exports( "button/theme/material" ) {
 
     // Solid button
-    @each $name, $color in $button-theme-colors {
-        .k-button-solid.k-button-solid-#{$name} {
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-solid-#{$name} {
+            @include box-shadow( $kendo-button-shadow );
+            color: if( $name == "base", $kendo-button-text, contrast-wcag( $color ) );
+            background-color: if( $name == "base", $kendo-button-bg, $color );
+            border-color: if( $name == "base", $kendo-button-bg, $color );
+
+            // Hover state
+            &:hover,
+            &.k-hover {
+                @include box-shadow( $kendo-button-hover-shadow );
+            }
+
+            // Focus state
+            &:focus,
+            &.k-focus {
+                @include box-shadow( $kendo-button-focus-shadow );
+            }
 
+            // Active state
+            &:active,
+            &.k-active {
+                @include box-shadow( $kendo-button-active-shadow );
+            }
+
+            // Selected state
+            &.k-selected {
+                @include box-shadow( $kendo-button-selected-shadow );
+            }
+
+            // Disabled state
             &:disabled,
-            &.k-state-disabled {
-                @include fill(
-                    $button-disabled-text,
-                    $button-disabled-bg,
-                    $button-disabled-border
-                );
+            &.k-disabled {
+                @include box-shadow( $kendo-button-disabled-shadow );
             }
         }
     }
 
-    // Flat button
-    .k-button-flat {}
-
 
     // Outline button
-    .k-button-outline {
-        color: $button-text;
-
-        &:hover,
-        &.k-state-hover,
-        &:focus,
-        &.k-state-focus,
-        &:active,
-        &.k-state-active,
-        &.k-state-selected {
-            color: $button-text;
-        }
-
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-    @each $name, $color in $button-theme-colors {
-        .k-button-outline.k-button-outline-#{$name} {
-            color: $color;
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-outline-#{$name} {
+            color: if( $name == "base", $kendo-button-text, $color );
 
             &:hover,
-            &.k-state-hover,
+            &.k-hover,
             &:focus,
-            &.k-state-focus,
+            &.k-focus,
             &:active,
-            &.k-state-active,
-            &.k-state-selected {
-                color: $color;
+            &.k-active,
+            &.k-selected {
+                color: if( $name == "base", $kendo-button-text, $color );
             }
 
+            // Disabled state
             &:disabled,
-            &.k-state-disabled {
-                color: $button-disabled-text;
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
             }
         }
     }
 
 
     // Link button
-    .k-button.k-button-link {
+    @each $name, $color in $kendo-button-theme-colors {
+        .k-button-link-#{$name} {
 
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
+            // Disabled state
+            &:disabled,
+            &.k-disabled {
+                color: $kendo-button-disabled-text;
+            }
         }
     }
 
 
-    // Clear button
-    .k-button-clear,
-    .k-button.k-clear {
-
-        &:disabled,
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
+    // Menu button
+    .k-menu-button {}
 
 
     // Button group
     .k-button-group {
-        @include box-shadow( $button-shadow );
+        @include box-shadow( $kendo-button-shadow );
 
         .k-button {
             @include box-shadow( none );
         }
 
+        // Disabled state
         &:disabled,
         &[disabled],
-        &.k-disabled,
-        &.k-state-disabled {
+        &.k-disabled {
             @include box-shadow( none );
         }
     }
 
 
     // Split button
-    .k-split-button {}
+    .k-split-button:focus,
+    .k-split-button.k-focus {
+        // @include box-shadow( $kendo-button-focus-shadow );
+    }
 
 
     // Variant button group
@@ -112,47 +115,3 @@
     }
 
 }
-
-
-
-
-@include exports( "clear-button/theme" ) {
-    .k-button.k-button-clear {
-        border-color: transparent !important; // sass-lint:disable-line no-important
-        color: $clear-button-text;
-        background: none !important; // sass-lint:disable-line no-important
-        box-shadow: none !important; // sass-lint:disable-line no-important
-
-        &::after {
-            display: block;
-        }
-
-        &:hover,
-        &.k-state-hover,
-        &:active,
-        &.k-state-active,
-        &:focus,
-        &.k-state-focused {
-            color: $clear-button-hover-text;
-        }
-
-        &:active,
-        &.k-state-active {
-            &::after {
-                background: transparent;
-            }
-        }
-
-        &.k-state-focused,
-        &.k-state-focused:active {
-            &::after {
-                background-color: currentColor;
-                opacity: $clear-button-focused-opacity;
-            }
-        }
-
-        &.k-state-disabled {
-            color: $button-disabled-text;
-        }
-    }
-}
diff --git a/packages/material/scss/button/_variables.scss b/packages/material/scss/button/_variables.scss
index c406b76ec3c..9d608e03dde 100644
--- a/packages/material/scss/button/_variables.scss
+++ b/packages/material/scss/button/_variables.scss
@@ -2,197 +2,200 @@
 
 /// Width of the border around the button.
 /// @group button
-$button-border-width: 1px !default;
+$kendo-button-border-width: 1px !default;
 
 /// Border radius of the button.
 /// @group button
-$button-border-radius: map-get( $spacing, 1 ) !default;
+$kendo-button-border-radius: null !default;
 
 /// Horizontal padding of the button.
 /// @group button
-$button-padding-x: map-get( $spacing, 4 ) !default;
-$button-padding-x-sm: null !default;
-$button-padding-x-md: null !default;
-$button-padding-x-lg: null !default;
+$kendo-button-padding-x: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-sm: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-md: map-get( $spacing, 4 ) !default;
+$kendo-button-padding-x-lg: map-get( $spacing, 4 ) !default;
 
 /// Vertical padding of the button.
 /// @group button
-$button-padding-y: map-get( $spacing, 2 ) !default;
-$button-padding-y-sm: null !default;
-$button-padding-y-md: null !default;
-$button-padding-y-lg: null !default;
+$kendo-button-padding-y: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-sm: map-get( $spacing, 2 ) - map-get( $spacing, thin ) !default;
+$kendo-button-padding-y-md: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y-lg: map-get( $spacing, 2 ) + map-get( $spacing, thin ) !default;
 
 /// Font family of the button.
 /// @group button
-$button-font-family: $font-family !default;
+$kendo-button-font-family: $font-family !default;
 
-/// Font size of the button.
+/// Font sizes of the button.
 /// @group button
-$button-font-size: $font-size !default;
-$button-font-size-sm: null !default;
-$button-font-size-md: null !default;
-$button-font-size-lg: null !default;
+$kendo-button-font-size: $font-size-md !default;
+$kendo-button-font-size-sm: $font-size-md !default;
+$kendo-button-font-size-md: $font-size-md !default;
+$kendo-button-font-size-lg: $font-size-md !default;
 
-/// Line height used along with $font-size.
+/// Line heights used along with $font-size.
 /// @group button
-$button-line-height: (20 / 14) !default;
-$button-line-height-sm: null !default;
-$button-line-height-md: null !default;
-$button-line-height-lg: null !default;
+$kendo-button-line-height: ( 20 / 14 ) !default;
+$kendo-button-line-height-sm: ( 20 / 14 ) !default;
+$kendo-button-line-height-md: ( 20 / 14 ) !default;
+$kendo-button-line-height-lg: ( 20 / 14 ) !default;
 
 /// Calculated height of the button.
 /// @group button
-$button-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} + #{$button-border-width * 2} ) !default;
+$kendo-button-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} + #{$kendo-button-border-width * 2} ) !default;
 
 /// Calculated inner height of the button. Without the border width.
 /// @group button
-$button-inner-calc-size: calc( #{$button-line-height * 1em} + #{$button-padding-y * 2} ) !default;
+$kendo-button-inner-calc-size: calc( #{$kendo-button-line-height * 1em} + #{$kendo-button-padding-y * 2} ) !default;
 
-$button-arrow-padding-x: map-get( $spacing, 1 ) !default;
-$button-arrow-padding-y: $button-padding-y !default;
+$kendo-button-arrow-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-button-arrow-padding-y: $kendo-button-padding-y !default;
 
 /// Theme colors map for the button.
 /// @group button
-$button-theme-colors: (
-    "primary": map-get( $theme-colors, primary ),
-    "secondary": map-get( $theme-colors, secondary ),
-    "tertiary": map-get( $theme-colors, tertiary ),
-    "info": map-get( $theme-colors, info ),
-    "success": map-get( $theme-colors, success ),
-    "warning": map-get( $theme-colors, warning ),
-    "error": map-get( $theme-colors, error ),
-    "dark": map-get( $theme-colors, dark ),
-    "light": map-get( $theme-colors, light ),
-    "inverse": map-get( $theme-colors, inverse )
+$kendo-button-theme-colors: map-merge(
+    $theme-colors,
+    ( "base": $base-bg )
 ) !default;
 
-/// The background of the buttons.
+/// The base background of the button.
 /// @group button
-$button-bg: $base-bg !default;
-/// The text color of the buttons.
+$kendo-button-bg: $base-bg !default;
+/// The base text color of the button.
 /// @group button
-$button-text: $base-text !default;
-/// The border color of the buttons.
+$kendo-button-text: $base-text !default;
+/// The base border color of the button.
 /// @group button
-$button-border: $button-bg !default;
-/// The background gradient of the buttons.
+$kendo-button-border: $kendo-button-bg !default;
+/// The base background gradient of the button.
 /// @group button
-$button-gradient: null !default;
-$button-shadow: $box-shadow-depth-2 !default;
+$kendo-button-gradient: null !default;
+/// The base shadow of the button.
+/// @group button
+$kendo-button-shadow: $box-shadow-depth-2 !default;
 
-/// The background of hovered buttons.
+/// The base background of hovered button.
+/// @group button
+$kendo-button-hover-bg: null !default;
+/// The base text color of hovered button.
 /// @group button
-$button-hovered-bg: null !default;
-/// The text color of hovered buttons.
+$kendo-button-hover-text: null !default;
+/// The base border color of hovered button.
 /// @group button
-$button-hovered-text: null !default;
-/// The border color of hovered buttons.
+$kendo-button-hover-border: null !default;
+/// The base background gradient of hovered button.
 /// @group button
-$button-hovered-border: null !default;
-/// The background gradient of hovered buttons.
+$kendo-button-hover-gradient: null !default;
+/// The base shadow of hovered button.
 /// @group button
-$button-hovered-gradient: null !default;
-$button-hovered-shadow: null !default;
+$kendo-button-hover-shadow: null !default;
 
-/// The background color of active buttons.
+/// The base background color of active button.
+/// @group button
+$kendo-button-active-bg: null !default;
+/// The base text color of active button.
 /// @group button
-$button-active-bg: null !default;
-/// The text color of active buttons.
+$kendo-button-active-text: null !default;
+/// The base border color of active button.
 /// @group button
-$button-active-text: null !default;
-/// The border color of active buttons.
+$kendo-button-active-border: null !default;
+/// The base background gradient of active button.
 /// @group button
-$button-active-border: null !default;
-/// The background gradient of active buttons.
+$kendo-button-active-gradient: null !default;
+/// The base shadow of active button.
 /// @group button
-$button-active-gradient: null !default;
-$button-active-shadow: $box-shadow-depth-3 !default;
+$kendo-button-active-shadow: $box-shadow-depth-3 !default;
 
-/// The background color of selected buttons.
+/// The base background color of selected button.
 /// @group button
-$button-selected-bg: $button-active-bg !default;
-/// The text color of selected buttons.
+$kendo-button-selected-bg: $kendo-button-active-bg !default;
+/// The base text color of selected button.
 /// @group button
-$button-selected-text: $button-active-text !default;
-/// The border color of selected buttons.
+$kendo-button-selected-text: $kendo-button-active-text !default;
+/// The base border color of selected button.
 /// @group button
-$button-selected-border: $button-active-bg !default;
-/// The background gradient of selected buttons.
+$kendo-button-selected-border: $kendo-button-active-bg !default;
+/// The base background gradient of selected button.
 /// @group button
-$button-selected-gradient: null !default;
-$button-selected-shadow: null !default;
-
-/// The shadow of focused buttons.
+$kendo-button-selected-gradient: null !default;
+/// The base shadow of selected button.
 /// @group button
-$button-focused-shadow: null !default;
-
-
-// Disabled button
-$button-disabled-bg: try-shade( $body-bg, 12% ) !default;
-$button-disabled-text: $disabled-text !default;
-$button-disabled-border: $button-disabled-bg !default;
-$button-disabled-gradient: null !default;
-$button-disabled-shadow: none !default;
+$kendo-button-selected-shadow: null !default;
 
+/// The base background of focused button.
+/// @group button
+$kendo-button-focus-bg: null !default;
+/// The base text color of focused button.
+/// @group button
+$kendo-button-focus-text: null !default;
+/// The base border color of focused button.
+/// @group button
+$kendo-button-focus-border: null !default;
+/// The base background gradient of focused button.
+/// @group button
+$kendo-button-focus-gradient: null !default;
+/// The base shadow of focused buttons.
+/// @group button
+$kendo-button-focus-shadow: null !default;
 
-// Primary button
-$primary-button-bg: $primary !default;
-$primary-button-text: $primary-contrast !default;
-$primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: null !default;
-$primary-button-shadow: null !default;
-
-$primary-button-hovered-bg: null !default;
-$primary-button-hovered-text: null !default;
-$primary-button-hovered-border: null !default;
-$primary-button-hovered-gradient: null !default;
-$primary-button-hovered-shadow: null !default;
-
-$primary-button-active-bg: null !default;
-$primary-button-active-text: null !default;
-$primary-button-active-border: null !default;
-$primary-button-active-gradient: null !default;
-$primary-button-active-shadow: null !default;
-
-$primary-button-selected-bg: $primary-button-active-bg !default;
-$primary-button-selected-text: $primary-button-active-text !default;
-$primary-button-selected-border: $primary-button-active-gradient !default;
-$primary-button-selected-gradient: null !default;
-$primary-button-selected-shadow: null !default;
+/// The base background color of disabled button.
+/// @group button
+$kendo-button-disabled-bg: try-shade( $body-bg, 12% ) !default;
+/// The base text color of disabled button.
+/// @group button
+$kendo-button-disabled-text: $disabled-text !default;
+/// The base border color of disabled button.
+/// @group button
+$kendo-button-disabled-border: $kendo-button-disabled-bg !default;
+/// The base background gradient of disabled button.
+/// @group button
+$kendo-button-disabled-gradient: null !default;
+/// The base shadow of disabled button.
+/// @group button
+$kendo-button-disabled-shadow: none !default;
 
-$primary-button-focused-shadow: null !default;
+// Solid button
+$kendo-solid-button-gradient: null !default;
+$kendo-solid-button-shade-function: "try-shade";
+$kendo-solid-button-shade-text-amount: null !default;
+$kendo-solid-button-shade-bg-amount: 0 !default;
+$kendo-solid-button-shade-border-amount: 0 !default;
+$kendo-solid-button-hover-shade-text-amount: null !default;
+$kendo-solid-button-hover-shade-bg-amount: null !default;
+$kendo-solid-button-hover-shade-border-amount: null !default;
+$kendo-solid-button-active-shade-text-amount: null !default;
+$kendo-solid-button-active-shade-bg-amount: null !default;
+$kendo-solid-button-active-shade-border-amount: null !default;
+$kendo-solid-button-shadow: null !default;
+$kendo-solid-button-shadow-blur: null !default;
+$kendo-solid-button-shadow-spread: null !default;
+$kendo-solid-button-shadow-opacity: null !default;
 
-$solid-button-gradient: null !default;
-$solid-button-shade-function: "try-shade";
-$solid-button-shade-text-amount: null !default;
-$solid-button-shade-bg-amount: 0 !default;
-$solid-button-shade-border-amount: 0 !default;
-$solid-button-hover-shade-text-amount: null !default;
-$solid-button-hover-shade-bg-amount: null !default;
-$solid-button-hover-shade-border-amount: null !default;
-$solid-button-active-shade-text-amount: null !default;
-$solid-button-active-shade-bg-amount: null !default;
-$solid-button-active-shade-border-amount: null !default;
-$solid-button-shadow: null !default;
-$solid-button-shadow-blur: null !default;
-$solid-button-shadow-spread: null !default;
-$solid-button-shadow-opacity: null !default;
+// Outline button
+$kendo-outline-button-shadow: null !default;
+$kendo-outline-button-shadow-blur: null !default;
+$kendo-outline-button-shadow-spread: null !default;
+$kendo-outline-button-shadow-opacity: null !default;
 
-$outline-button-shadow: null !default;
-$outline-button-shadow-blur: null !default;
-$outline-button-shadow-spread: null !default;
-$outline-button-shadow-opacity: null !default;
+// link button
+$kendo-link-button-shadow: null !default;
+$kendo-link-button-shadow-blur: null !default;
+$kendo-link-button-shadow-spread: null !default;
+$kendo-link-button-shadow-opacity: null !default;
 
-$link-button-shadow: null !default;
-$link-button-shadow-blur: null !default;
-$link-button-shadow-spread: null !default;
-$link-button-shadow-opacity: null !default;
+/// The overlay opacity of hovered flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-hover-opacity: .08 !default;
+/// The overlay opacity of focused flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-focus-opacity: .12 !default;
+/// The overlay opacity of active flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-active-opacity: .16 !default;
+/// The overlay opacity of selected flat button. Used to create background for the flat button.
+/// @group button
+$kendo-flat-button-selected-opacity: .22 !default;
 
-$flat-button-hover-opacity: .08 !default;
-$flat-button-focus-opacity: .12 !default;
-$flat-button-active-opacity: .16 !default;
-$flat-button-selected-opacity: .22 !default;
-
-$clear-button-text: inherit !default;
-$clear-button-hover-text: inherit !default;
-$clear-button-focused-opacity: .155 !default; // equal to 10% of black
+/// The transition of the button.
+/// @group button
+$kendo-button-transition: box-shadow 280ms cubic-bezier( .4, 0, .2, 1 ) !default;
diff --git a/packages/material/scss/chat/_variables.scss b/packages/material/scss/chat/_variables.scss
index 361bbbdc9e0..1b3af6ac220 100644
--- a/packages/material/scss/chat/_variables.scss
+++ b/packages/material/scss/chat/_variables.scss
@@ -35,7 +35,7 @@ $chat-avatar-spacing: $chat-item-spacing-x !default;
 $chat-toolbar-padding-x: $toolbar-padding-x !default;
 $chat-toolbar-padding-y: $toolbar-padding-y !default;
 $chat-toolbar-spacing: $toolbar-spacing !default;
-$chat-toolbar-bg: try-shade( $button-bg, .5 ) !default;
+$chat-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $chat-toolbar-text: $toolbar-text !default;
 $chat-toolbar-border: inherit !default;
 
diff --git a/packages/material/scss/dialog/_layout.scss b/packages/material/scss/dialog/_layout.scss
index efafe6288c4..d342e781ea2 100644
--- a/packages/material/scss/dialog/_layout.scss
+++ b/packages/material/scss/dialog/_layout.scss
@@ -9,12 +9,4 @@
         padding-bottom: #{$window-inner-padding-y / 2};
     }
 
-    .k-dialog-buttongroup {
-
-        .k-button {
-            @include box-shadow( none );
-            min-width: 64px;
-        }
-    }
-
 }
diff --git a/packages/material/scss/fab/_variables.scss b/packages/material/scss/fab/_variables.scss
index 32583e598c7..708024f6b8c 100644
--- a/packages/material/scss/fab/_variables.scss
+++ b/packages/material/scss/fab/_variables.scss
@@ -53,9 +53,9 @@ $fab-item-text: $component-text !default;
 $fab-item-bg: $component-bg !default;
 $fab-item-border: $component-border !default;
 
-$fab-item-icon-text: $button-text !default;
-$fab-item-icon-bg: $button-bg !default;
-$fab-item-icon-border: $button-border !default;
+$fab-item-icon-text: $kendo-button-text !default;
+$fab-item-icon-bg: $kendo-button-bg !default;
+$fab-item-icon-border: $kendo-button-border !default;
 
 $fab-item-shadow: $fab-shadow !default;
 $fab-item-disabled-shadow: $fab-disabled-shadow !default;
diff --git a/packages/material/scss/filemanager/_variables.scss b/packages/material/scss/filemanager/_variables.scss
index 33f38952f18..9d158f85e3f 100644
--- a/packages/material/scss/filemanager/_variables.scss
+++ b/packages/material/scss/filemanager/_variables.scss
@@ -9,7 +9,7 @@ $filemanager-text: $component-text !default;
 $filemanager-border: $component-border !default;
 
 $filemanager-toolbar-border-width: $filemanager-border-width !default;
-$filemanager-toolbar-bg: try-shade( $button-bg, .5 ) !default;
+$filemanager-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $filemanager-toolbar-text: null !default;
 $filemanager-toolbar-border: null !default;
 $filemanager-toolbar-gradient: null !default;
diff --git a/packages/material/scss/grid/_layout.scss b/packages/material/scss/grid/_layout.scss
index 89f209f5c72..3b13d350239 100644
--- a/packages/material/scss/grid/_layout.scss
+++ b/packages/material/scss/grid/_layout.scss
@@ -6,11 +6,11 @@ $grid-group-footer-second-cell-border: 0px !default;
 $grid-header-first-border: 1px !default;
 $grid-sorted-icon-spacing: 4px !default;
 $grid-header-menu-icon-spacing: 14px !default;
-$grid-group-indicator-border-radius: calc( #{$font-size} + #{$button-padding-y} ) !default;
+$grid-group-indicator-border-radius: calc( #{$font-size} + #{$kendo-button-padding-y} ) !default;
 $grid-group-indicator-gap: 8px !default;
 
 $grid-group-dropclue-height: calc( #{$font-size * 2} + #{$padding-y * 2} ) !default;
-$grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header-padding-y * 2} - #{$grid-group-dropclue-height} ) / 2) !default;
+$grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-header-padding-y * 2} - #{$grid-group-dropclue-height} ) / 2) !default;
 
 @import "~@progress/kendo-theme-default/scss/grid/_layout.scss";
 
@@ -18,11 +18,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 
     .k-grid {
 
-        .k-button,
-        .k-button:active {
-            box-shadow: none;
-        }
-
         .k-group-footer td {
             border-top-width: 0;
         }
@@ -38,6 +33,10 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
                 border-width: 0 $grid-cell-vertical-border-width $grid-cell-horizontal-border-width 0;
             }
         }
+
+        .k-command-cell .k-button {
+            @include box-shadow( none );
+        }
     }
 
     .k-grid-header {
@@ -58,10 +57,6 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
             .k-dropdown-operator .k-dropdown-wrap {
                 border-width: 0;
             }
-
-            .k-button.k-button-icon {
-                box-shadow: none;
-            }
         }
 
         .k-header-column-menu {
@@ -92,7 +87,7 @@ $grid-group-dropclue-top: calc( ( #{$button-calc-size} + #{$grid-grouping-header
 
         .k-group-indicator {
             border-width: 0;
-            line-height: $button-line-height;
+            line-height: $kendo-button-line-height;
         }
     }
 
diff --git a/packages/material/scss/input/_variables.scss b/packages/material/scss/input/_variables.scss
index 17be7506630..a9ccae8ca28 100644
--- a/packages/material/scss/input/_variables.scss
+++ b/packages/material/scss/input/_variables.scss
@@ -94,7 +94,7 @@ $picker-select-pressed-gradient: null !default;
 
 
 // Spinner
-$spinner-width: $button-inner-calc-size !default;
+$spinner-width: $kendo-button-inner-calc-size !default;
 $spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
 $spinner-icon-offset: 2px !default;
 
diff --git a/packages/material/scss/map/_variables.scss b/packages/material/scss/map/_variables.scss
index 3dfee7a9c7f..ea203fbd947 100644
--- a/packages/material/scss/map/_variables.scss
+++ b/packages/material/scss/map/_variables.scss
@@ -16,7 +16,7 @@ $map-navigator-height: $map-navigator-width !default;
 $map-navigator-border-width: 1px !default;
 
 $map-zoom-control-margin: $spacer-x !default;
-$map-zoom-control-button-padding-x: $button-padding-y !default;
+$map-zoom-control-button-padding-x: $kendo-button-padding-y !default;
 $map-zoom-control-button-padding-y: $map-zoom-control-button-padding-x !default;
 
 $map-attribution-padding-x: $padding-x-sm !default;
diff --git a/packages/material/scss/menu/_variables.scss b/packages/material/scss/menu/_variables.scss
index f253dec9c22..c1033320f5f 100644
--- a/packages/material/scss/menu/_variables.scss
+++ b/packages/material/scss/menu/_variables.scss
@@ -21,12 +21,12 @@ $menu-item-text: null !default;
 $menu-item-border: null !default;
 $menu-item-gradient: null !default;
 
-$menu-item-hover-bg: rgba( $menu-text, $flat-button-hover-opacity * alpha( $menu-text ) ) !default;
+$menu-item-hover-bg: rgba( $menu-text, $kendo-flat-button-hover-opacity * alpha( $menu-text ) ) !default;
 $menu-item-hover-text: null !default;
 $menu-item-hover-border: null !default;
 $menu-item-hover-gradient: null !default;
 
-$menu-item-expanded-bg: rgba( $menu-text, $flat-button-active-opacity * alpha( $menu-text ) ) !default;
+$menu-item-expanded-bg: rgba( $menu-text, $kendo-flat-button-active-opacity * alpha( $menu-text ) ) !default;
 $menu-item-expanded-text: null !default;
 $menu-item-expanded-border: null !default;
 $menu-item-expanded-gradient: null !default;
diff --git a/packages/material/scss/multiselect/_variables.scss b/packages/material/scss/multiselect/_variables.scss
index c36d2fd686a..f1512465094 100644
--- a/packages/material/scss/multiselect/_variables.scss
+++ b/packages/material/scss/multiselect/_variables.scss
@@ -14,11 +14,11 @@ $multiselect-focused-text: $input-focused-text !default;
 $multiselect-focused-border: $input-focused-border !default;
 $multiselect-focused-shadow: $input-focused-shadow !default;
 
-$multiselect-button-focused-bg: $button-active-bg !default;
-$multiselect-button-focused-text: $button-active-text !default;
-$multiselect-button-focused-border: $button-active-border !default;
-$multiselect-button-focused-gradient: $button-active-gradient !default;
-$multiselect-button-focused-shadow: $button-active-shadow !default;
+$multiselect-button-focused-bg: $kendo-button-active-bg !default;
+$multiselect-button-focused-text: $kendo-button-active-text !default;
+$multiselect-button-focused-border: $kendo-button-active-border !default;
+$multiselect-button-focused-gradient: $kendo-button-active-gradient !default;
+$multiselect-button-focused-shadow: $kendo-button-active-shadow !default;
 
 
 // Tokens
diff --git a/packages/material/scss/pdf-viewer/_variables.scss b/packages/material/scss/pdf-viewer/_variables.scss
index 174e2ddf9fa..368d6ed1e26 100644
--- a/packages/material/scss/pdf-viewer/_variables.scss
+++ b/packages/material/scss/pdf-viewer/_variables.scss
@@ -8,7 +8,7 @@ $pdf-viewer-bg: $component-bg !default;
 $pdf-viewer-text: $component-text !default;
 $pdf-viewer-border: $component-border !default;
 
-$pdf-viewer-toolbar-bg: try-shade( $button-bg, .25 ) !default;
+$pdf-viewer-toolbar-bg: try-shade( $kendo-button-bg, .25 ) !default;
 $pdf-viewer-toolbar-text: null !default;
 $pdf-viewer-toolbar-border: null !default;
 $pdf-viewer-toolbar-gradient: null !default;
diff --git a/packages/material/scss/pivotgrid/_variables.scss b/packages/material/scss/pivotgrid/_variables.scss
index 8cc5bcce18e..417a1a61bbd 100644
--- a/packages/material/scss/pivotgrid/_variables.scss
+++ b/packages/material/scss/pivotgrid/_variables.scss
@@ -101,12 +101,12 @@ $pivotgrid-chrome-border: $grid-border !default;
 $pivotgrid-container-bg: $grid-header-bg !default;
 $pivotgrid-row-headers-bg: null !default;
 
-$pivotgrid-button-bg: try-shade($button-bg, 1) !default;
-$pivotgrid-button-text: $button-text !default;
-$pivotgrid-button-hover-bg: try-shade($button-bg, 2) !default;
-$pivotgrid-button-hover-text: $button-text !default;
-$pivotgrid-button-active-bg: try-shade($button-bg, 2) !default;
-$pivotgrid-button-active-text: $button-text !default;
+$pivotgrid-button-bg: try-shade($kendo-button-bg, 1) !default;
+$pivotgrid-button-text: $kendo-button-text !default;
+$pivotgrid-button-hover-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-hover-text: $kendo-button-text !default;
+$pivotgrid-button-active-bg: try-shade($kendo-button-bg, 2) !default;
+$pivotgrid-button-active-text: $kendo-button-text !default;
 
 $pivotgrid-remove-bg: $pivotgrid-button-text !default;
 $pivotgrid-remove-text: $pivotgrid-button-bg !default;
diff --git a/packages/material/scss/scheduler/_variables.scss b/packages/material/scss/scheduler/_variables.scss
index 5a2503112ca..dc28e1717d4 100644
--- a/packages/material/scss/scheduler/_variables.scss
+++ b/packages/material/scss/scheduler/_variables.scss
@@ -8,12 +8,12 @@ $scheduler-bg: $component-bg !default;
 $scheduler-text: $component-text !default;
 $scheduler-border: $component-border !default;
 
-$scheduler-toolbar-bg: try-shade( $button-bg, .5 ) !default;
+$scheduler-toolbar-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-toolbar-text: null !default;
 $scheduler-toolbar-border: null !default;
 $scheduler-toolbar-gradient: null !default;
 
-$scheduler-footer-bg: try-shade( $button-bg, .5 ) !default;
+$scheduler-footer-bg: try-shade( $kendo-button-bg, .5 ) !default;
 $scheduler-footer-text: null !default;
 $scheduler-footer-border: null !default;
 $scheduler-footer-gradient: null !default;
diff --git a/packages/material/scss/scrollview/_variables.scss b/packages/material/scss/scrollview/_variables.scss
index fbc6b803c35..f8a467ad864 100644
--- a/packages/material/scss/scrollview/_variables.scss
+++ b/packages/material/scss/scrollview/_variables.scss
@@ -9,10 +9,10 @@ $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !default;
 
 $scrollview-pagebutton-size: 10px !default;
-$scrollview-pagebutton-bg: $button-bg !default;
-$scrollview-pagebutton-border: $button-border !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: $primary-button-border !default;
+$scrollview-pagebutton-bg: $kendo-button-bg !default;
+$scrollview-pagebutton-border: $kendo-button-border !default;
+$scrollview-pagebutton-primary-bg: $primary !default;
+$scrollview-pagebutton-primary-border: $primary !default;
 $scrollview-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
 $scrollview-pager-offset: 0 !default;
diff --git a/packages/material/scss/slider/_theme.scss b/packages/material/scss/slider/_theme.scss
index f7dd78a9cae..0eafcd784cc 100644
--- a/packages/material/scss/slider/_theme.scss
+++ b/packages/material/scss/slider/_theme.scss
@@ -14,15 +14,6 @@
             @include fill( $bg: $body-text );
         }
 
-        .k-button {
-            &:hover,
-            &.k-state-hover {
-                &::before {
-                    opacity: 0;
-                }
-            }
-        }
-
         .k-draghandle {
             box-sizing: border-box;
 
diff --git a/packages/material/scss/slider/_variables.scss b/packages/material/scss/slider/_variables.scss
index 3dbdb33cdfa..b743473cad0 100644
--- a/packages/material/scss/slider/_variables.scss
+++ b/packages/material/scss/slider/_variables.scss
@@ -18,19 +18,19 @@ $slider-draghandle-border-width: 0px !default;
 $slider-draghandle-active-scale: 1 !default;
 $slider-draghandle-active-size: 20px !default;
 
-$slider-draghandle-bg: $primary-button-bg !default;
-$slider-draghandle-text: $primary-button-text !default;
-$slider-draghandle-border: $primary-button-border !default;
+$slider-draghandle-bg: $primary !default;
+$slider-draghandle-text: $primary-contrast !default;
+$slider-draghandle-border: $primary !default;
 $slider-draghandle-gradient: null !default;
 
-$slider-draghandle-hovered-bg: $primary-button-hovered-bg !default;
-$slider-draghandle-hovered-text: $primary-button-hovered-text !default;
-$slider-draghandle-hovered-border: $primary-button-hovered-border !default;
+$slider-draghandle-hovered-bg: null !default;
+$slider-draghandle-hovered-text: null !default;
+$slider-draghandle-hovered-border: null !default;
 $slider-draghandle-hovered-gradient: null !default;
 
-$slider-draghandle-pressed-bg: $primary-button-active-bg !default;
-$slider-draghandle-pressed-text: $primary-button-active-text !default;
-$slider-draghandle-pressed-border: $primary-button-active-border !default;
+$slider-draghandle-pressed-bg: null !default;
+$slider-draghandle-pressed-text: null !default;
+$slider-draghandle-pressed-border: null !default;
 $slider-draghandle-pressed-gradient: null !default;
 
 $slider-draghandle-focused-shadow: 0 0 0 11px rgba($primary, .25) !default;
diff --git a/packages/material/scss/spreadsheet/_theme.scss b/packages/material/scss/spreadsheet/_theme.scss
index 6a619e997d2..3cd6f683df4 100644
--- a/packages/material/scss/spreadsheet/_theme.scss
+++ b/packages/material/scss/spreadsheet/_theme.scss
@@ -156,29 +156,29 @@
     }
     .k-spreadsheet-filter {
         @include fill(
-            $button-text,
-            $button-bg,
-            $button-border,
-            $button-gradient
+            $kendo-button-text,
+            $kendo-button-bg,
+            $kendo-button-border,
+            $kendo-button-gradient
         );
-        box-shadow: inset 0 0 0 1px $button-border;
+        box-shadow: inset 0 0 0 1px $kendo-button-border;
 
         &.k-state-active {
             @include fill(
-                $button-active-text,
-                $button-active-bg,
-                $button-active-border,
-                $button-active-gradient
+                $kendo-button-active-text,
+                $kendo-button-active-bg,
+                $kendo-button-active-border,
+                $kendo-button-active-gradient
             );
-            @include box-shadow( $button-active-shadow );
+            @include box-shadow( $kendo-button-active-shadow );
         }
 
         &:hover {
             @include fill(
-                $button-hovered-text,
-                $button-hovered-bg,
-                $button-hovered-border,
-                $button-hovered-gradient
+                $kendo-button-hover-text,
+                $kendo-button-hover-bg,
+                $kendo-button-hover-border,
+                $kendo-button-hover-gradient
             );
         }
     }
diff --git a/packages/material/scss/timeline/_layout.scss b/packages/material/scss/timeline/_layout.scss
index 31a748ecd66..4219bfada99 100644
--- a/packages/material/scss/timeline/_layout.scss
+++ b/packages/material/scss/timeline/_layout.scss
@@ -11,10 +11,10 @@
 
     .k-timeline-track-item:hover .k-timeline-circle::before,
     .k-timeline-track-item.k-state-hover .k-timeline-circle::before {
-        opacity: $flat-button-hover-opacity;
+        opacity: $kendo-flat-button-hover-opacity;
     }
 
     .k-timeline-track-item.k-state-focus .k-timeline-circle::before {
-        opacity: $flat-button-focus-opacity;
+        opacity: $kendo-flat-button-focus-opacity;
     }
 }
diff --git a/packages/material/scss/timeline/_variables.scss b/packages/material/scss/timeline/_variables.scss
index 27df6b974a2..9f2fb2c005a 100644
--- a/packages/material/scss/timeline/_variables.scss
+++ b/packages/material/scss/timeline/_variables.scss
@@ -13,9 +13,9 @@ $timeline-mobile-spacing-y: $padding-x !default;
 $timeline-track-arrow-width: 36px !default;
 $timeline-track-arrow-height: 36px !default;
 
-$timeline-track-arrow-disabled-text: true-mix($button-text, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-text: true-mix($kendo-button-text, $body-bg, 65%) !default;
 $timeline-track-arrow-disabled-bg: true-mix(#000000, $body-bg, 8%) !default;
-$timeline-track-arrow-disabled-border: true-mix($button-border, $body-bg, 65%) !default;
+$timeline-track-arrow-disabled-border: true-mix($kendo-button-border, $body-bg, 65%) !default;
 
 $timeline-track-size: 6px !default;
 $timeline-track-wrap-padding-bottom: $timeline-track-size / 2 !default;
@@ -31,9 +31,9 @@ $timeline-track-item-focus-shadow: $box-shadow-depth-2 !default;
 
 $timeline-track-event-offset: 36px !default;
 
-$timeline-flag-padding-x: $button-padding-x !default;
-$timeline-flag-padding-y: $button-padding-y !default;
-$timeline-flag-line-height: $button-line-height !default;
+$timeline-flag-padding-x: $kendo-button-padding-x !default;
+$timeline-flag-padding-y: $kendo-button-padding-y !default;
+$timeline-flag-line-height: $kendo-button-line-height !default;
 $timeline-flag-min-width: 80px !default;
 $timeline-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-spacing-x}) !default;
 $timeline-mobile-flag-max-width: calc(#{$timeline-flag-min-width} + 2 * #{$timeline-mobile-spacing-x}) !default;
diff --git a/packages/material/scss/toolbar/_theme.scss b/packages/material/scss/toolbar/_theme.scss
index dcf261b1e11..56ebe533955 100644
--- a/packages/material/scss/toolbar/_theme.scss
+++ b/packages/material/scss/toolbar/_theme.scss
@@ -4,17 +4,9 @@
 
     .k-toolbar {
 
-        .k-button {
-            background-color: try-shade( $button-bg );
-        }
-
-        .k-button-primary {
-            background-color: $primary-button-bg;
-
-            &:disabled,
-            &.k-state-disabled {
-                background-color: $button-disabled-bg;
-            }
+        .k-button-solid-base {
+            background-color: try-shade( $kendo-button-bg );
+            border-color: try-shade( $kendo-button-bg );
         }
 
     }
diff --git a/packages/material/scss/toolbar/_variables.scss b/packages/material/scss/toolbar/_variables.scss
index a4ad10ed572..67360c85b78 100644
--- a/packages/material/scss/toolbar/_variables.scss
+++ b/packages/material/scss/toolbar/_variables.scss
@@ -14,7 +14,7 @@ $toolbar-font-family: $font-family !default;
 $toolbar-font-size: $font-size !default;
 $toolbar-line-height: (20 / 14) !default;
 
-$toolbar-inner-calc-size: calc( #{$button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
+$toolbar-inner-calc-size: calc( #{$kendo-button-calc-size} + #{$toolbar-padding-y * 2} ) !default;
 
 $toolbar-bg: $component-bg !default;
 $toolbar-text: $component-text !default;
diff --git a/packages/nouvelle/scss/button/_variables.scss b/packages/nouvelle/scss/button/_variables.scss
index bc8b0c94505..1a6170b0b7f 100644
--- a/packages/nouvelle/scss/button/_variables.scss
+++ b/packages/nouvelle/scss/button/_variables.scss
@@ -1,109 +1,109 @@
-$button-padding-x: map-get( $spacing, 2 ) !default;
-$button-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-button-padding-x: map-get( $spacing, 2 ) !default;
+$kendo-button-padding-y: map-get( $spacing, 1 ) !default;
 
-$button-border-width: 1px !default;
-$button-border-style: solid !default;
+$kendo-button-border-width: 1px !default;
+$kendo-button-border-style: solid !default;
 
-$button-border-radius: map-get( $spacing, 1 ) !default;
+$kendo-button-border-radius: map-get( $spacing, 1 ) !default;
 
-$button-font-family: $font-family !default;
-$button-font-size: $font-size !default;
-$button-line-height: $line-height !default;
+$kendo-button-font-family: $font-family !default;
+$kendo-button-font-size: $font-size !default;
+$kendo-button-line-height: $line-height !default;
 
 
-/// The background of the buttons.
+/// The background of the button.
 /// @group button
-$button-bg: $interactive-bg !default;
-/// The text color of the buttons.
+$kendo-button-bg: $interactive-bg !default;
+/// The text color of the button.
 /// @group button
-$button-text: $interactive-text !default;
-/// The border color of the buttons.
+$kendo-button-text: $interactive-text !default;
+/// The border color of the button.
 /// @group button
-$button-border: $interactive-border !default;
-/// The background gradient of the buttons.
+$kendo-button-border: $interactive-border !default;
+/// The background gradient of the button.
 /// @group button
-$button-gradient: $interactive-gradient !default;
-$button-shadow: null !default;
+$kendo-button-gradient: $interactive-gradient !default;
+$kendo-button-shadow: null !default;
 
 /// The background of hovered buttons.
 /// @group button
-$button-hover-bg: try-shade( $button-bg, .5 ) !default;
+$kendo-button-hover-bg: try-shade( $kendo-button-bg, .5 ) !default;
 /// The text color of hovered buttons.
 /// @group button
-$button-hover-text: $button-text !default;
+$kendo-button-hover-text: $kendo-button-text !default;
 /// The border color of hovered buttons.
 /// @group button
-$button-hover-border: $button-border !default;
+$kendo-button-hover-border: $kendo-button-border !default;
 /// The background gradient of hovered buttons.
 /// @group button
-$button-hover-gradient: $button-gradient !default;
-$button-hover-shadow: null !default;
+$kendo-button-hover-gradient: $kendo-button-gradient !default;
+$kendo-button-hover-shadow: null !default;
 
 /// The background color of focus buttons.
 /// @group button
-$button-focus-bg: $button-hover-bg !default;
+$kendo-button-focus-bg: $kendo-button-hover-bg !default;
 /// The text color of focus buttons.
 /// @group button
-$button-focus-text: $button-hover-text !default;
+$kendo-button-focus-text: $kendo-button-hover-text !default;
 /// The border color of focus buttons.
 /// @group button
-$button-focus-border: $button-hover-border !default;
+$kendo-button-focus-border: $kendo-button-hover-border !default;
 /// The background gradient of focus buttons.
 /// @group button
-$button-focus-gradient: $button-hover-gradient !default;
-$button-focus-shadow: 0 0 0 2px rgba( if( $dark-theme, $white, $black ), .08 ) !default;
+$kendo-button-focus-gradient: $kendo-button-hover-gradient !default;
+$kendo-button-focus-shadow: 0 0 0 2px rgba( if( $dark-theme, $white, $black ), .08 ) !default;
 
 /// The background color of pressed buttons.
 /// @group button
-$button-active-bg: try-shade( $button-bg, 1 ) !default;
+$kendo-button-active-bg: try-shade( $kendo-button-bg, 1 ) !default;
 /// The text color of pressed buttons.
 /// @group button
-$button-active-text: $button-text !default;
+$kendo-button-active-text: $kendo-button-text !default;
 /// The border color of pressed buttons.
 /// @group button
-$button-active-border: $button-border !default;
+$kendo-button-active-border: $kendo-button-border !default;
 /// The background gradient of pressed buttons.
 /// @group button
-$button-active-gradient: $button-gradient !default;
-$button-active-shadow: null !default;
+$kendo-button-active-gradient: $kendo-button-gradient !default;
+$kendo-button-active-shadow: null !default;
 
 
 
 
 // Expose
 :root {
-    --kendo-button-padding-x: #{$button-padding-x};
-    --kendo-button-padding-y: #{$button-padding-y};
-    --kendo-button-border-width: #{$button-border-width};
-    --kendo-button-border-style: #{$button-border-style};
-
-    --kendo-button-border-radius: #{$button-border-radius};
-
-    --kendo-button-font-family: #{$button-font-family};
-    --kendo-button-font-size: #{$button-font-size};
-    --kendo-button-line-height: #{$button-line-height};
-
-    --kendo-button-bg: #{$button-bg};
-    --kendo-button-text: #{$button-text};
-    --kendo-button-border: #{$button-border};
-    --kendo-button-gradient: #{$button-gradient};
-    --kendo-button-shadow: #{$button-shadow};
-
-    --kendo-button-hover-bg: #{$button-hover-bg};
-    --kendo-button-hover-text: #{$button-hover-text};
-    --kendo-button-hover-border: #{$button-hover-border};
-    --kendo-button-hover-gradient: #{$button-hover-gradient};
-    --kendo-button-hover-shadow: #{$button-hover-shadow};
-
-    --kendo-button-focus-bg: #{$button-focus-bg};
-    --kendo-button-focus-text: #{$button-focus-text};
-    --kendo-button-focus-border: #{$button-focus-border};
-    --kendo-button-focus-gradient: #{$button-focus-gradient};
-    --kendo-button-focus-shadow: #{$button-focus-shadow};
-
-    --kendo-button-active-bg: #{$button-active-bg};
-    --kendo-button-active-text: #{$button-active-text};
-    --kendo-button-active-border: #{$button-active-border};
-    --kendo-button-active-gradient: #{$button-active-gradient};
-    --kendo-button-active-shadow: #{$button-active-shadow};
+    --kendo-button-padding-x: #{$kendo-button-padding-x};
+    --kendo-button-padding-y: #{$kendo-button-padding-y};
+    --kendo-button-border-width: #{$kendo-button-border-width};
+    --kendo-button-border-style: #{$kendo-button-border-style};
+
+    --kendo-button-border-radius: #{$kendo-button-border-radius};
+
+    --kendo-button-font-family: #{$kendo-button-font-family};
+    --kendo-button-font-size: #{$kendo-button-font-size};
+    --kendo-button-line-height: #{$kendo-button-line-height};
+
+    --kendo-button-bg: #{$kendo-button-bg};
+    --kendo-button-text: #{$kendo-button-text};
+    --kendo-button-border: #{$kendo-button-border};
+    --kendo-button-gradient: #{$kendo-button-gradient};
+    --kendo-button-shadow: #{$kendo-button-shadow};
+
+    --kendo-button-hover-bg: #{$kendo-button-hover-bg};
+    --kendo-button-hover-text: #{$kendo-button-hover-text};
+    --kendo-button-hover-border: #{$kendo-button-hover-border};
+    --kendo-button-hover-gradient: #{$kendo-button-hover-gradient};
+    --kendo-button-hover-shadow: #{$kendo-button-hover-shadow};
+
+    --kendo-button-focus-bg: #{$kendo-button-focus-bg};
+    --kendo-button-focus-text: #{$kendo-button-focus-text};
+    --kendo-button-focus-border: #{$kendo-button-focus-border};
+    --kendo-button-focus-gradient: #{$kendo-button-focus-gradient};
+    --kendo-button-focus-shadow: #{$kendo-button-focus-shadow};
+
+    --kendo-button-active-bg: #{$kendo-button-active-bg};
+    --kendo-button-active-text: #{$kendo-button-active-text};
+    --kendo-button-active-border: #{$kendo-button-active-border};
+    --kendo-button-active-gradient: #{$kendo-button-active-gradient};
+    --kendo-button-active-shadow: #{$kendo-button-active-shadow};
 }
diff --git a/packages/nouvelle/scss/combobox/_variables.scss b/packages/nouvelle/scss/combobox/_variables.scss
index 55d2ec4ca01..f21f88b8faa 100644
--- a/packages/nouvelle/scss/combobox/_variables.scss
+++ b/packages/nouvelle/scss/combobox/_variables.scss
@@ -44,26 +44,26 @@ $combobox-focus-bg: $input-focus-bg !default;
 $combobox-focus-border: $input-focus-border !default;
 $combobox-focus-shadow: $input-focus-shadow !default;
 
-$combobox-select-padding-x: $button-padding-y !default;
-$combobox-select-padding-y: $button-padding-y !default;
+$combobox-select-padding-x: $kendo-button-padding-y !default;
+$combobox-select-padding-y: $kendo-button-padding-y !default;
 
 $combobox-select-border-width: $input-border-width !default;
 $combobox-select-border-style: $input-border-style !default;
 
-$combobox-select-bg: $button-bg !default;
-$combobox-select-text: $button-text !default;
-$combobox-select-border: $button-border !default;
-$combobox-select-gradient: $button-gradient !default;
+$combobox-select-bg: $kendo-button-bg !default;
+$combobox-select-text: $kendo-button-text !default;
+$combobox-select-border: $kendo-button-border !default;
+$combobox-select-gradient: $kendo-button-gradient !default;
 
-$combobox-select-hover-bg: $button-hover-bg !default;
-$combobox-select-hover-text: $button-hover-text !default;
-$combobox-select-hover-border: $button-hover-border !default;
-$combobox-select-hover-gradient: $button-hover-gradient !default;
+$combobox-select-hover-bg: $kendo-button-hover-bg !default;
+$combobox-select-hover-text: $kendo-button-hover-text !default;
+$combobox-select-hover-border: $kendo-button-hover-border !default;
+$combobox-select-hover-gradient: $kendo-button-hover-gradient !default;
 
-$combobox-select-focus-bg: $button-active-bg !default;
-$combobox-select-focus-text: $button-active-text !default;
-$combobox-select-focus-border: $button-active-border !default;
-$combobox-select-focus-gradient: $button-active-gradient !default;
+$combobox-select-focus-bg: $kendo-button-active-bg !default;
+$combobox-select-focus-text: $kendo-button-active-text !default;
+$combobox-select-focus-border: $kendo-button-active-border !default;
+$combobox-select-focus-gradient: $kendo-button-active-gradient !default;
 
 
 
diff --git a/packages/nouvelle/scss/dropdownlist/_variables.scss b/packages/nouvelle/scss/dropdownlist/_variables.scss
index b17e4067ec3..a6a839f6bc6 100644
--- a/packages/nouvelle/scss/dropdownlist/_variables.scss
+++ b/packages/nouvelle/scss/dropdownlist/_variables.scss
@@ -13,39 +13,39 @@ $dropdownlist-line-height: $input-line-height !default;
 
 /// The background of the dropdownlist.
 /// @group dropdownlist
-$dropdownlist-bg: $button-bg !default;
+$dropdownlist-bg: $kendo-button-bg !default;
 /// The text color of the dropdownlist.
 /// @group dropdownlist
-$dropdownlist-text: $button-text !default;
+$dropdownlist-text: $kendo-button-text !default;
 /// The border color of the dropdownlist.
 /// @group dropdownlist
-$dropdownlist-border: $button-border !default;
-$dropdownlist-gradient: $button-gradient !default;
+$dropdownlist-border: $kendo-button-border !default;
+$dropdownlist-gradient: $kendo-button-gradient !default;
 
 /// The background of hovered dropdownlist.
 /// @group dropdownlist
-$dropdownlist-hover-bg: $button-hover-bg !default;
+$dropdownlist-hover-bg: $kendo-button-hover-bg !default;
 /// The text color of hovered dropdownlist.
 /// @group dropdownlist
-$dropdownlist-hover-text: $button-hover-text !default;
+$dropdownlist-hover-text: $kendo-button-hover-text !default;
 /// The border color of hovered dropdownlist.
 /// @group dropdownlist
-$dropdownlist-hover-border: $button-hover-border !default;
-$dropdownlist-hover-gradient: $button-hover-gradient !default;
+$dropdownlist-hover-border: $kendo-button-hover-border !default;
+$dropdownlist-hover-gradient: $kendo-button-hover-gradient !default;
 
 /// The text color of focus dropdownlist.
 /// @group dropdownlist
-$dropdownlist-focus-text: $button-active-text !default;
+$dropdownlist-focus-text: $kendo-button-active-text !default;
 /// The background color of focus dropdownlist.
 /// @group dropdownlist
-$dropdownlist-focus-bg: $button-active-bg !default;
+$dropdownlist-focus-bg: $kendo-button-active-bg !default;
 /// The border color of focus dropdownlist.
 /// @group dropdownlist
-$dropdownlist-focus-border: $button-active-border !default;
-$dropdownlist-focus-gradient: $button-active-gradient !default;
+$dropdownlist-focus-border: $kendo-button-active-border !default;
+$dropdownlist-focus-gradient: $kendo-button-active-gradient !default;
 
-$dropdownlist-select-padding-x: $button-padding-y !default;
-$dropdownlist-select-padding-y: $button-padding-y !default;
+$dropdownlist-select-padding-x: $kendo-button-padding-y !default;
+$dropdownlist-select-padding-y: $kendo-button-padding-y !default;