feat(checkbox): add styles for checkboxes

docs/customization.md

@@ -107,6 +107,26 @@ Used to provide contrast between the background and foreground colors.
 </td>
 </tr>
 <tr>
+<td>$secondary</td>
+<td>
+    <span class="color-preview" style="background-color: #ff4081"></span>
+    #ff4081
+</td>
+<td>The secondary color for focusing user attention.<br/>
+Used to focus attention, more sparingly than the primary accent.
+</td>
+</tr>
+<tr>
+<td>$secondary-contrast</td>
+<td>
+    <span class="color-preview" style="background-color: #ffffff"></span>
+    #ffffff
+</td>
+<td>The color used along with the secondary accent color denoted by $secondary.<br/>
+Used to provide contrast between the background and foreground colors.
+</td>
+</tr>
+<tr>
 <td>$base-text</td>
 <td>
     

scss/_variables.scss

@@ -120,6 +120,14 @@ $accent: #3f51b5 !default;
 /// Used to provide contrast between the background and foreground colors.
 $accent-contrast: #ffffff !default;
 
+/// The secondary color for focusing user attention.
+/// Used to focus attention, more sparingly than the primary accent.
+$secondary: #ff4081 !default;
+
+/// The color used along with the secondary accent color denoted by $secondary.
+/// Used to provide contrast between the background and foreground colors.
+$secondary-contrast: #ffffff !default;
+
 $text-color: #656565 !default;
 $bg-color: #ffffff !default;
 $border-color: rgba( black, .12 ) !default;
@@ -388,7 +396,7 @@ $chart-minor-lines: rgba(0, 0, 0, .04) !default;
 $chart-area-opacity: .8 !default;
 
 // Icons
-$icon-size: 16px;
+$icon-size: 24px;
 $icon-size-lg: 32px;
 $icon-spacing: 4px !default;
 

scss/input/_layout.scss

@@ -1 +1,5 @@
-@import "~@progress/kendo-theme-default/scss/input/layout";
+$checkbox-size: 20px !default;
+$checkbox-border-width: 2px !default;
+$checkbox-line-height: 24px !default;
+
+@import "~@progress/kendo-theme-default/scss/input/layout";