feat(checkbox): add sizing property to checkbox

BREAKING CHANGE: Convert monolithic checkbox styles to multiple class names

Previously, `k-checkbox` held all the styling information related to
the checkbox component. Now, styles are split in multiple class names
with each being scoped to a single checkbox appearance property:

* `size` controls the overall physical size of a checkbox;
* `rounded` controls what border radius is applied to a checkbox.

BREAKING CHANGE: Add kendo prefix to all checkbox variables

Change variable names from `$checkbox-*` to `$kendo-checkbox-*`.

packages/bootstrap/scss/checkbox/_variables.scss

@@ -1,142 +1,161 @@
 // Checkbox
 
-$checkbox-size: map-get( $spacing, 4 ) !default;
-$checkbox-radius: map-get( $spacing, 1 ) !default;
 /// Border width of checkbox.
 /// @group checkbox
-$checkbox-border-width: 1px !default;
+$kendo-checkbox-border-width: 1px !default;
+
+// Checkbox sizes
+$kendo-checkbox-sizes: (
+    sm: (
+        size: map-get( $spacing, 3 ),
+        glyph-size: ( map-get( $spacing, 3 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 3 ) * 3
+    ),
+    md: (
+        size: map-get( $spacing, 4 ),
+        glyph-size: ( map-get( $spacing, 4 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 4 ) * 3
+    ),
+    lg: (
+        size: map-get( $spacing, 5 ),
+        glyph-size: ( map-get( $spacing, 5 ) - map-get( $spacing, thin ) ),
+        ripple-size: map-get( $spacing, 5 ) * 3
+    )
+) !default;
 
 /// Background color of checkbox.
 /// @group checkbox
-$checkbox-bg: $component-bg !default;
+$kendo-checkbox-bg: $component-bg !default;
 /// Color of checkbox.
 /// @group checkbox
-$checkbox-text: null !default;
+$kendo-checkbox-text: null !default;
 /// Border color of checkbox.
 /// @group checkbox
-$checkbox-border: contrast-wcag( $checkbox-bg, $gray-400, $gray-600 ) !default;
+$kendo-checkbox-border: contrast-wcag( $kendo-checkbox-bg, $gray-400, $gray-600 ) !default;
 
 /// Background color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-bg: null !default;
+$kendo-checkbox-hover-bg: null !default;
 /// Color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-text: null !default;
+$kendo-checkbox-hover-text: null !default;
 /// Border color of hovered checkbox.
 /// @group checkbox
-$checkbox-hovered-border: null !default;
+$kendo-checkbox-hover-border: null !default;
 
 /// Background color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-bg: $primary !default;
+$kendo-checkbox-checked-bg: $primary !default;
 /// Color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-text: contrast-wcag( $checkbox-checked-bg ) !default;
+$kendo-checkbox-checked-text: contrast-wcag( $kendo-checkbox-checked-bg ) !default;
 /// Border color of checked checkbox.
 /// @group checkbox
-$checkbox-checked-border: $checkbox-checked-bg !default;
+$kendo-checkbox-checked-border: $kendo-checkbox-checked-bg !default;
 
 /// Background color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-indeterminate-bg: $kendo-checkbox-checked-bg !default;
 /// Color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-text: $checkbox-checked-text !default;
+$kendo-checkbox-indeterminate-text: $kendo-checkbox-checked-text !default;
 /// Border color of indeterminate checkbox.
 /// @group checkbox
-$checkbox-indeterminate-border: $checkbox-checked-border !default;
+$kendo-checkbox-indeterminate-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused checkbox.
 /// @group checkbox
-$checkbox-focused-border: try-tint( $primary, 50% ) !default;
+$kendo-checkbox-focus-border: try-tint( $primary, 50% ) !default;
 /// Box shadow of focused checkbox.
 /// @group checkbox
-$checkbox-focused-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
+$kendo-checkbox-focus-shadow: 0 0 0 .25rem rgba( $primary, .25 ) !default;
 /// Border color of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-border: $checkbox-checked-border !default;
+$kendo-checkbox-focus-checked-border: $kendo-checkbox-checked-border !default;
 /// Box shadow of focused and checked checkbox.
 /// @group checkbox
-$checkbox-focused-checked-shadow: $checkbox-focused-shadow !default;
+$kendo-checkbox-focus-checked-shadow: $kendo-checkbox-focus-shadow !default;
 
 /// Background color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-bg: null !default;
+$kendo-checkbox-disabled-bg: null !default;
 /// Color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-text: null !default;
+$kendo-checkbox-disabled-text: null !default;
 /// Border color of disabled checkbox.
 /// @group checkbox
-$checkbox-disabled-border: null !default;
+$kendo-checkbox-disabled-border: null !default;
 
 /// Background color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-bg: null !default;
+$kendo-checkbox-disabled-checked-bg: null !default;
 /// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-text: null !default;
-/// Border color of disabled and checked checkbox.
+$kendo-checkbox-disabled-checked-text: null !default;
+/// Color of disabled and checked checkbox.
 /// @group checkbox
-$checkbox-disabled-checked-border: null !default;
+$kendo-checkbox-disabled-checked-border: null !default;
 
 /// Background color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-bg: null !default;
+$kendo-checkbox-invalid-bg: null !default;
 /// Color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-text: $invalid-text !default;
+$kendo-checkbox-invalid-text: $invalid-text !default;
 /// Border color of invalid checkbox.
 /// @group checkbox
-$checkbox-invalid-border: $invalid-border !default;
+$kendo-checkbox-invalid-border: $invalid-border !default;
 
 
 // Checkbox indicator
 
 /// Type of checkbox indicator.
 /// @group checkbox
-$checkbox-indicator-type: image !default;
+$kendo-checkbox-indicator-type: image !default;
 
 /// Glyph font family of checkbox indicator.
 /// @group checkbox
-$checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
-$checkbox-glyph-size: $checkbox-size !default;
+$kendo-checkbox-glyph-font-family: "WebComponentsIcons", monospace !default;
 /// Glyph of checkbox indicator.
 /// @group checkbox
-$checkbox-checked-glyph: "\e118" !default;
+$kendo-checkbox-checked-glyph: "\e118" !default;
 /// Glyph of indeterminate checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-glyph: "\e121" !default;
+$kendo-checkbox-indeterminate-glyph: "\e121" !default;
 
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
+$kendo-checkbox-checked-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-checked-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/></svg>") ) !default;
 /// Image of checked checkbox indicator.
 /// @group checkbox
-$checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
+$kendo-checkbox-indeterminate-image: escape-svg( url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$kendo-checkbox-indeterminate-text}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>") ) !default;
 
 
 // Checkbox label
-$checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
+
+/// The horizontal margin of the checkbox inside a label.
+/// @group checkbox
+$kendo-checkbox-label-margin-x: map-get( $spacing, 1 ) !default;
 
 
 // Checkbox list
 
 /// Spacing between items of horizontal checkbox list.
 /// @group checkbox
-$checkbox-list-spacing: map-get( $spacing, 4 ) !default;
+$kendo-checkbox-list-spacing: map-get( $spacing, 4 ) !default;
 /// Horizontal padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-x: 0px !default;
+$kendo-checkbox-list-item-padding-x: 0px !default;
 /// Vertical padding of checkbox list items.
 /// @group checkbox
-$checkbox-list-item-padding-y: $list-item-padding-y !default;
+$kendo-checkbox-list-item-padding-y: $list-item-padding-y !default;
 
 
 // Checkbox ripple
-$checkbox-ripple-size: $checkbox-size * 3 !default;
+
 /// Background color of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-bg: $checkbox-checked-bg !default;
+$kendo-checkbox-ripple-bg: $kendo-checkbox-checked-bg !default;
 /// Opacity of checkbox ripple.
 /// @group checkbox
-$checkbox-ripple-opacity: .25 !default;
+$kendo-checkbox-ripple-opacity: .25 !default;

packages/bootstrap/scss/radio/_variables.scss

@@ -10,76 +10,76 @@ $radio-border-width: 1px !default;
 
 /// Background color of radio button.
 /// @group radio
-$radio-bg: $checkbox-bg !default;
+$radio-bg: $kendo-checkbox-bg !default;
 /// Color of radio button.
 /// @group radio
-$radio-text: $checkbox-text !default;
+$radio-text: $kendo-checkbox-text !default;
 /// Border color of radio button.
 /// @group radio
-$radio-border: $checkbox-border !default;
+$radio-border: $kendo-checkbox-border !default;
 
 /// Background color of hovered radio button.
 /// @group radio
-$radio-hovered-bg: $checkbox-hovered-bg !default;
+$radio-hovered-bg: $kendo-checkbox-hover-bg !default;
 /// Color of hovered radio button.
 /// @group radio
-$radio-hovered-text: $checkbox-hovered-text !default;
+$radio-hovered-text: $kendo-checkbox-hover-text !default;
 /// Border color of hovered radio button.
 /// @group radio
-$radio-hovered-border: $checkbox-hovered-border !default;
+$radio-hovered-border: $kendo-checkbox-hover-border !default;
 
 /// Background color of checked radio button.
 /// @group radio
-$radio-checked-bg: $checkbox-checked-bg !default;
+$radio-checked-bg: $kendo-checkbox-checked-bg !default;
 /// Color of checked radio button.
 /// @group radio
-$radio-checked-text: $checkbox-checked-text !default;
+$radio-checked-text: $kendo-checkbox-checked-text !default;
 /// Border color of checked radio button.
 /// @group radio
-$radio-checked-border: $checkbox-checked-border !default;
+$radio-checked-border: $kendo-checkbox-checked-border !default;
 
 /// Border color of focused radio button.
 /// @group radio
-$radio-focused-border: $checkbox-hovered-border !default;
+$radio-focused-border: $kendo-checkbox-focus-border !default;
 /// Box shadow of focused radio button.
 /// @group radio
-$radio-focused-shadow: $checkbox-focused-shadow !default;
+$radio-focused-shadow: $kendo-checkbox-focus-shadow !default;
 /// Border color of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-border: $checkbox-checked-border !default;
+$radio-focused-checked-border: $kendo-checkbox-focus-checked-border !default;
 /// Box shadow of focused and checked radio button.
 /// @group radio
-$radio-focused-checked-shadow: $checkbox-focused-checked-shadow !default;
+$radio-focused-checked-shadow: $kendo-checkbox-focus-checked-shadow !default;
 
 /// Background color of disabled radio button.
 /// @group radio
-$radio-disabled-bg: $checkbox-disabled-bg !default;
+$radio-disabled-bg: $kendo-checkbox-disabled-bg !default;
 /// Color of disabled radio button.
 /// @group radio
-$radio-disabled-text: $checkbox-disabled-text !default;
+$radio-disabled-text: $kendo-checkbox-disabled-text !default;
 /// Border color of disabled radio button.
 /// @group radio
-$radio-disabled-border: $checkbox-disabled-border !default;
+$radio-disabled-border: $kendo-checkbox-disabled-border !default;
 
 /// Background color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-bg: $checkbox-disabled-checked-bg !default;
+$radio-disabled-checked-bg: $kendo-checkbox-disabled-checked-bg !default;
 /// Color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-text: $checkbox-disabled-checked-text !default;
+$radio-disabled-checked-text: $kendo-checkbox-disabled-checked-text !default;
 /// Border color of disabled and checked radio button.
 /// @group radio
-$radio-disabled-checked-border: $checkbox-disabled-checked-border !default;
+$radio-disabled-checked-border: $kendo-checkbox-disabled-checked-border !default;
 
 /// Background color of invalid radio button.
 /// @group radio
-$radio-invalid-bg: $checkbox-invalid-bg !default;
+$radio-invalid-bg: $kendo-checkbox-invalid-bg !default;
 /// Color of invalid radio button.
 /// @group radio
-$radio-invalid-text: $checkbox-invalid-text !default;
+$radio-invalid-text: $kendo-checkbox-invalid-text !default;
 /// Border color of invalid radio button.
 /// @group radio
-$radio-invalid-border: $checkbox-invalid-border !default;
+$radio-invalid-border: $kendo-checkbox-invalid-border !default;
 
 
 // Radio indicator