feat(switch): add size and rounded customization to switch

BREAKING CHANGE: Convert monolithic switch styles to multiple class names

Previously, switch class names held too much styling information that
made customizing the switch hard. Now, styles are split in multiple
class names with each being scoped to a single switch appearance property:

* `size` controls the overall physical size of a switch;
* `trackRounded` controls what border radius is applied to the switch track;
* `thumbRounded` controls what border radius is applied to the switch thumb.

You can find more information about the values of each property in the
documentation of the button component -- /docs/components/switch.

BREAKING CHANGE: Remove residual switch styles

No further customization is applied to buttons when hosted inside other
components, except in very few specific cases.

BREAKING CHANGE: Add kendo prefix to all switch variables

Change variable name from `$switch-*` to `$kendo-switch-*`.

packages/bootstrap/scss/switch/_index.scss

@@ -3,8 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 
 
 // Component

packages/bootstrap/scss/switch/_theme.scss

@@ -1,30 +1 @@
 @import "~@progress/kendo-theme-default/scss/switch/_theme.scss";
-
-@include exports( "switch/theme/bootstrap" ) {
-
-    .k-switch-on.k-state-disabled {
-
-        // Switch track
-        .k-switch-container {
-            background-color: try-tint( $switch-on-bg, 50% );
-        }
-
-        // Switch thumb
-        .k-switch-handle {
-            background-color: contrast-wcag( $switch-on-bg );
-        }
-    }
-    .k-switch-off.k-state-disabled {
-
-        // Switch track
-        .k-switch-container {
-            background-color: $input-disabled-bg;
-        }
-
-        // Switch thumb
-        .k-switch-handle {
-            background-color: $switch-off-handle-bg;
-        }
-    }
-
-}

packages/bootstrap/scss/switch/_variables.scss

@@ -1,178 +1,191 @@
 // Switch
-$switch-size: 56px !default;
-$switch-border-radius: 9999px !default;
 
 /// Font family of the switch.
 /// @group switch
-$switch-font-family: $font-family !default;
-$switch-font-size: $font-size-xs !default;
+$kendo-switch-font-family: null !default;
 
-$switch-track-size: null !default;
 /// Border width of the switch track.
 /// @group switch
-$switch-container-border-width: 1px !default;
-$switch-container-padding-x: 2px !default;
-$switch-container-padding-y: $switch-container-padding-x !default;
+$kendo-switch-track-border-width: 1px !default;
 
-$switch-handle-size: 24px !default;
-$switch-handle-border-radius: 9999px !default;
 /// Border width of the switch thumb.
 /// @group switch
-$switch-handle-border-width: null !default;
-$switch-thumb-start-x: 0px !default;
-// TODO: Remove width property from jQuery and Blazor, and do not use 100% for thumb X calc
-$switch-thumb-end-x: calc( 100% - #{$switch-handle-size} ) !default;
+$kendo-switch-thumb-border-width: null !default;
 
-$switch-label-offset: null !default;
-$switch-label-width: null !default;
 /// Text transform of the switch label.
 /// @group switch
-$switch-label-text-transform: null !default;
+$kendo-switch-label-text-transform: null !default;
 /// Display of the switch label.
 /// @group switch
-$switch-label-display: none !default;
+$kendo-switch-label-display: none !default;
 
-$switch-container-shadow: null !default;
-$switch-container-hovered-shadow: null !default;
-$switch-container-focused-shadow: null !default;
+/// Map with the different switch sizes.
+/// @group switch
+$kendo-switch-sizes: (
+    sm: ( font-size: null, track-width: 48px, track-height: 26px, thumb-width: 20px, thumb-height: 20px, thumb-offset: 3px, label-offset: null ),
+    md: ( font-size: null, track-width: 56px, track-height: 30px, thumb-width: 24px, thumb-height: 24px, thumb-offset: 3px, label-offset: null ),
+    lg: ( font-size: null, track-width: 64px, track-height: 34px, thumb-width: 28px, thumb-height: 28px, thumb-offset: 3px, label-offset: null )
+) !default;
 
 /// The background of the track when the switch is not checked.
 /// @group switch
-$switch-off-bg: $input-bg !default;
+$kendo-switch-off-track-bg: $component-bg !default;
 /// The text color of the track when the switch is not checked.
 /// @group switch
-$switch-off-text: null !default;
+$kendo-switch-off-track-text: null !default;
 /// The border color of the track when the switch is not checked.
 /// @group switch
-$switch-off-border: $gray-500 !default;
+$kendo-switch-off-track-border: $gray-500 !default;
 /// The background gradient of the track when the switch is not checked.
 /// @group switch
-$switch-off-gradient: null !default;
-$switch-off-shadow: null !default;
+$kendo-switch-off-track-gradient: null !default;
 
 /// The background of the track when the hovered switch is not checked.
 /// @group switch
-$switch-off-hovered-bg: null !default;
+$kendo-switch-off-track-hover-bg: null !default;
 /// The text color of the track when the hovered switch is not checked.
 /// @group switch
-$switch-off-hovered-text: null !default;
+$kendo-switch-off-track-hover-text: null !default;
 /// The border color of the track when the hovered switch is not checked.
 /// @group switch
-$switch-off-hovered-border: null !default;
+$kendo-switch-off-track-hover-border: null !default;
 /// The background gradient of the track when the hovered switch is not checked.
 /// @group switch
-$switch-off-hovered-gradient: null !default;
+$kendo-switch-off-track-hover-gradient: null !default;
 
 /// The background of the track when the focused switch is not checked.
 /// @group switch
-$switch-off-focused-bg: null !default;
+$kendo-switch-off-track-focus-bg: null !default;
 /// The text color of the track when the focused switch is not checked.
 /// @group switch
-$switch-off-focused-text: null !default;
+$kendo-switch-off-track-focus-text: null !default;
 /// The border color of the track when the focused switch is not checked.
 /// @group switch
-$switch-off-focused-border: $input-focused-border !default;
+$kendo-switch-off-track-focus-border: mix( $kendo-switch-off-track-bg, $primary ) !default;
 /// The background gradient of the track when the focused switch is not checked.
 /// @group switch
-$switch-off-focused-gradient: null !default;
+$kendo-switch-off-track-focus-gradient: null !default;
 /// The ring around the track when the focused switch is not checked.
 /// @group switch
-$switch-off-focused-shadow: $input-focused-shadow !default;
+$kendo-switch-off-track-focus-ring: .25rem solid rgba( $primary, .25 ) !default;
+
+/// The background of the track when the disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-bg: if( $dark-theme, $gray-800, $gray-200 ) !default;
+/// The text color of the track when the disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-text: null !default;
+/// The border color of the track when the disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-border: null !default;
+/// The background gradient of the track when the disabled switch is not checked.
+/// @group switch
+$kendo-switch-off-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is not checked.
 /// @group switch
-$switch-off-handle-bg: $gray-500 !default;
+$kendo-switch-off-thumb-bg: $gray-500 !default;
 /// The text color of the thumb when the switch is not checked.
 /// @group switch
-$switch-off-handle-text: null !default;
+$kendo-switch-off-thumb-text: null !default;
 /// The border color of the thumb when the switch is not checked.
 /// @group switch
-$switch-off-handle-border: null !default;
+$kendo-switch-off-thumb-border: null !default;
 /// The background gradient of the thumb when the switch is not checked.
 /// @group switch
-$switch-off-handle-gradient: null !default;
-$switch-off-handle-shadow: null !default;
+$kendo-switch-off-thumb-gradient: null !default;
 
 /// The background of the thumb when the hovered switch is not checked.
 /// @group switch
-$switch-off-handle-hovered-bg: null !default;
+$kendo-switch-off-thumb-hover-bg: null !default;
 /// The text color of the thumb when the hovered switch is not checked.
 /// @group switch
-$switch-off-handle-hovered-text: null !default;
+$kendo-switch-off-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered switch is not checked.
 /// @group switch
-$switch-off-handle-hovered-border: null !default;
+$kendo-switch-off-thumb-hover-border: null !default;
 /// The background gradient of the thumb when the hovered switch is not checked.
 /// @group switch
-$switch-off-handle-hovered-gradient: null !default;
+$kendo-switch-off-thumb-hover-gradient: null !default;
 
 
 /// The background of the track when the switch is checked.
 /// @group switch
-$switch-on-bg: $primary !default;
+$kendo-switch-on-track-bg: $primary !default;
 /// The text color of the track when the switch is checked.
 /// @group switch
-$switch-on-text: null !default;
+$kendo-switch-on-track-text: null !default;
 /// The border color of the track when the switch is checked.
 /// @group switch
-$switch-on-border: $primary !default;
+$kendo-switch-on-track-border: $kendo-switch-on-track-bg !default;
 /// The background gradient of the track when the switch is checked.
 /// @group switch
-$switch-on-gradient: null !default;
-$switch-on-shadow: null !default;
+$kendo-switch-on-track-gradient: null !default;
 
-/// The background of the track wen the hovered switch is checked.
+/// The background of the track when the hovered switch is checked.
 /// @group switch
-$switch-on-hovered-bg: null !default;
-/// The text color of the track wen the hovered switch is checked.
+$kendo-switch-on-track-hover-bg: null !default;
+/// The text color of the track when the hovered switch is checked.
 /// @group switch
-$switch-on-hovered-text: null !default;
-/// The border color of the track wen the hovered switch is checked.
+$kendo-switch-on-track-hover-text: null !default;
+/// The border color of the track when the hovered switch is checked.
 /// @group switch
-$switch-on-hovered-border: null !default;
-/// The background gradient of the track wen the hovered switch is checked.
+$kendo-switch-on-track-hover-border: null !default;
+/// The background gradient of the track when the hovered switch is checked.
 /// @group switch
-$switch-on-hovered-gradient: null !default;
+$kendo-switch-on-track-hover-gradient: null !default;
 
-/// The background of the track wen the focused switch is checked.
+/// The background of the track when the focused switch is checked.
 /// @group switch
-$switch-on-focused-bg: null !default;
-/// The text color of the track wen the focused switch is checked.
+$kendo-switch-on-track-focus-bg: null !default;
+/// The text color of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-text: null !default;
+/// The border color of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-border: null !default;
+/// The background gradient of the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-gradient: null !default;
+/// The ring around the track when the focused switch is checked.
+/// @group switch
+$kendo-switch-on-track-focus-ring: .25rem solid rgba( $kendo-switch-on-track-border, .25 ) !default;
+
+/// The background of the track when the disabled switch is checked.
 /// @group switch
-$switch-on-focused-text: null !default;
-/// The border color of the track wen the focused switch is checked.
+$kendo-switch-on-track-disabled-bg: try-tint( $kendo-switch-on-track-bg, 50% ) !default;
+/// The text color of the track when the disabled switch is checked.
 /// @group switch
-$switch-on-focused-border: null !default;
-/// The background gradient of the track wen the focused switch is checked.
+$kendo-switch-on-track-disabled-text: null !default;
+/// The border color of the track when the disabled switch is checked.
 /// @group switch
-$switch-on-focused-gradient: null !default;
-/// The ring around the track wen the focused switch is checked.
+$kendo-switch-on-track-disabled-border: null !default;
+/// The background gradient of the track when the disabled switch is checked.
 /// @group switch
-$switch-on-focused-shadow: $input-focused-shadow !default;
+$kendo-switch-on-track-disabled-gradient: null !default;
 
 /// The background of the thumb when the switch is checked.
 /// @group switch
-$switch-on-handle-bg: white !default;
+$kendo-switch-on-thumb-bg: contrast-wcag( $kendo-switch-on-track-bg ) !default;
 /// The text color of the thumb when the switch is checked.
 /// @group switch
-$switch-on-handle-text: null !default;
+$kendo-switch-on-thumb-text: null !default;
 /// The border color of the thumb when the switch is checked.
 /// @group switch
-$switch-on-handle-border: null !default;
+$kendo-switch-on-thumb-border: null !default;
 /// The background gradient of the thumb when the switch is checked.
 /// @group switch
-$switch-on-handle-gradient: null !default;
-$switch-on-handle-shadow: null !default;
+$kendo-switch-on-thumb-gradient: null !default;
 
 /// The background of the thumb when the hovered switch is checked.
 /// @group switch
-$switch-on-handle-hovered-bg: null !default;
+$kendo-switch-on-thumb-hover-bg: null !default;
 /// The text color of the thumb when the hovered switch is checked.
 /// @group switch
-$switch-on-handle-hovered-text: null !default;
+$kendo-switch-on-thumb-hover-text: null !default;
 /// The border color of the thumb when the hovered switch is checked.
 /// @group switch
-$switch-on-handle-hovered-border: null !default;
+$kendo-switch-on-thumb-hover-border: null !default;
 /// The background gradient of the thumb when the hovered switch is checked.
 /// @group switch
-$switch-on-handle-hovered-gradient: null !default;
+$kendo-switch-on-thumb-hover-gradient: null !default;

packages/classic/scss/switch/_index.scss

@@ -3,8 +3,6 @@
 
 // Dependencies
 @import "../common/_index.scss";
-@import "../button/_variables.scss";
-@import "../input/_variables.scss";
 
 
 // Component