feat(buttons): add styling for buttons

docs/customization.md

@@ -110,7 +110,7 @@ Used to provide contrast between the background and foreground colors.
 <td>$base-text</td>
 <td>
     
-    rgba(0, 0, 0, .87)
+    rgb(0, 0, 0)
 </td>
 <td>The text color of the components' chrome area.
 </td>
@@ -306,7 +306,7 @@ Used to provide contrast between the background and foreground colors.
 <td>$button-hovered-bg</td>
 <td>
     
-    $hovered-bg
+    rgba(0, 0, 0, .12)
 </td>
 <td>The background of hovered buttons.
 </td>
@@ -369,7 +369,7 @@ Used to provide contrast between the background and foreground colors.
 <td>$button-focused-shadow</td>
 <td>
     
-    0 3px 4px 0 rgba(0, 0, 0, .06)
+    $button-shadow
 </td>
 <td>The shadow of focused buttons.
 </td>
@@ -506,4 +506,4 @@ Used to provide contrast between the background and foreground colors.
 
 * [Styling Overview]({% slug themesandstyles_kendouiforangular %})
 * [Web Font Icons]({% slug icons_kendouiforangular %})
-* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %})
+* [Preview of the Themed Components]({% slug preview_kendothemedefault_kendouiforangular %})

scss/_variables.scss

@@ -125,7 +125,7 @@ $bg-color: #ffffff !default;
 $border-color: rgba( black, .08 ) !default;
 
 /// The text color of the components' chrome area.
-$base-text: rgba(0, 0, 0, .87) !default;
+$base-text: rgb(0, 0, 0) !default;
 /// The background of the components' chrome area.
 $base-bg: #fff !default;
 
@@ -228,7 +228,7 @@ $button-border: $base-border !default;
 /// The background gradient of the buttons.
 /// @group buttons
 $button-gradient: $base-gradient !default;
-$button-shadow: null !default;
+$button-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
 
 /// The text color of hovered buttons.
 /// @group buttons
@@ -236,7 +236,7 @@ $button-hovered-text: $hovered-text !default;
 
 /// The background of hovered buttons.
 /// @group buttons
-$button-hovered-bg: $hovered-bg !default;
+$button-hovered-bg: rgba(0, 0, 0, .12) !default;
 
 /// The border color of hovered buttons.
 /// @group buttons
@@ -262,15 +262,15 @@ $button-pressed-border: $button-border !default;
 /// The background gradient of pressed buttons.
 /// @group buttons
 $button-pressed-gradient: none !default;
-$button-pressed-shadow: 0 2px 2px 0 rgba(0, 0, 0, .06) !default;
+$button-pressed-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12) !default;
 
 /// The shadow of focused buttons.
 /// @group buttons
-$button-focused-shadow: 0 3px 4px 0 rgba(0, 0, 0, .06) !default;
+$button-focused-shadow: $button-shadow !default;
 
 
 // Primary button
-$primary-button-text: $accent-contrast !default;
+$primary-button-text: rgba(255, 255, 255, .87) !default;
 $primary-button-bg: $accent !default;
 $primary-button-border: $primary-button-bg !default;
 $primary-button-gradient: rgba( adjust-hue( $primary-button-bg, 14), 0 ), rgba( adjust-hue( $primary-button-bg, 14), .2 ) !default;

scss/button/_layout.scss

@@ -1 +1,5 @@
-@import "~@progress/kendo-theme-default/scss/button/layout";
+@import "~@progress/kendo-theme-default/scss/button/layout";
+
+.k-button:not(.k-button-icon) {
+    min-width: 88px;
+}

scss/button/_theme.scss

@@ -1,20 +1,42 @@
 @include exports("button/theme") {
+    $button-focused-bg: rgba(0, 0, 0, .12) !default;
+
+    $button-disabled-text: rgba(0, 0, 0, .38) !default;
+    $button-disabled-bg: rgba(0, 0, 0, .12) !default;
+
+    $white-overlayed-with-black: darken(#ffffff, 12%) !default;
+
+    $primary-button-focused-text: rgba(224, 224, 224, .86) !default;
+    $primary-button-focused-bg: blend-multiply($primary-button-bg, $white-overlayed-with-black) !default;
+
+    $flat-primary-active-bg: rgba(63, 81, 181, .12) !default;
+
     // Default button
     .k-button {
         @include appearance( button );
-        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        box-shadow: $button-shadow;
+        font-weight: 500;
+
+        // Focused state
+        &:not(.k-no-focus):focus,
+        &:not(.k-no-focus).k-state-focused {
+            background-color: $button-focused-bg;
+            @include appearance( focused-button );
+        }
 
         // Pressed state
         &:active,
         &.k-state-active {
             @include appearance( pressed-button );
-            box-shadow: inset $button-pressed-shadow;
+            box-shadow: $button-pressed-shadow;
         }
 
-        // Focused state
-        &:focus,
-        &.k-state-focused {
-            box-shadow: $button-focused-shadow;
+        // Disabled state
+        &.k-state-disabled {
+            color: $button-disabled-text;
+            background-color: $button-disabled-bg;
+            opacity: 1;
+            box-shadow: none;
         }
     }
 
@@ -23,9 +45,11 @@
         @include appearance( primary-button );
 
         // Focused
-        &:focus,
-        &.k-state-focused {
-            box-shadow: $primary-button-focused-shadow;
+        &:not(.k-no-focus):focus,
+        &:not(.k-no-focus).k-state-focused {
+            color: $primary-button-focused-text;
+            background-color: $primary-button-focused-bg;
+            border-color: $primary-button-focused-bg;
         }
 
         // Active state
@@ -35,8 +59,54 @@
         }
     }
 
-    // Bare button
-    .k-button.k-primary.k-bare {
+    // Flat button
+    .k-button.k-flat {
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            background-color: $button-hovered-bg;
+        }
+
+        // Pressed state
+        &:active,
+        &.k-state-active {
+            box-shadow: none;
+        }
+
+        // Focused state
+        &:focus,
+        &.k-state-focused {
+            box-shadow: none;
+        }
+    }
+
+    // Flat primary button
+    .k-button.k-primary.k-flat {
         color: $accent;
+
+        // Hover state
+        &:hover,
+        &.k-state-hover {
+            background-color: $flat-primary-active-bg;
+        }
+
+        .k-ripple-blob {
+            background-color: rgba($accent, .1);
+        }
+
+        // Focused state
+        &:not(.k-no-focus):focus,
+        &:not(.k-no-focus).k-state-focused {
+            color: $accent;
+            background-color: $flat-primary-active-bg;
+        }
+    }
+
+    .k-button.k-flat,
+    .k-button.k-primary.k-flat {
+        &.k-state-disabled {
+            background-color: transparent;
+            color: $button-disabled-text;
+        }
     }
 }