fix(button): add initial styles for button

packages/nouvelle/.sassdocrc

@@ -0,0 +1,6 @@
+{
+    "meta": {
+        "name": "nouvelle",
+        "friendlyName": "Nouvelle"
+    }
+}

packages/nouvelle/LICENSE.md

@@ -0,0 +1,17 @@
+# Kendo UI Nouvelle Theme
+
+This package is part of the following suites:
+
+* [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/)
+* [KendoReact](http://www.telerik.com/kendo-react-ui/)
+* [Kendo UI for jQuery](http://www.telerik.com/kendo-ui)
+* [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc)
+* [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui)
+
+## License
+
+All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
+
+If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+*Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*

packages/nouvelle/README.md

@@ -0,0 +1,32 @@
+# Kendo UI Nouvelle Theme
+
+The Kendo UI Nouvelle Theme is a css variables heavy theme for the Kendo UI components.
+
+* [License](#license)
+* [Basic Usage](#basic-usage)
+
+## License
+
+This package is part of the following suites:
+
+* [Kendo UI for Angular](http://www.telerik.com/kendo-angular-ui/)
+* [KendoReact](http://www.telerik.com/kendo-react-ui/)
+* [Kendo UI for jQuery](http://www.telerik.com/kendo-ui)
+* [UI for ASP.NET MVC](http://www.telerik.com/aspnet-mvc)
+* [UI for ASP.NET Core](http://www.telerik.com/aspnet-core-ui)
+
+All available Kendo UI commercial licenses may be obtained at http://www.telerik.com/purchase/kendo-ui.
+
+If you do not own a commercial license, the usage of this software shall be governed by the [Apache License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
+
+## Basic Usage
+
+For more information on how to implement the Nouvelle theme in your project, refer to the following articles:
+
+* [Using the Nouvelle Theme in Angular Projects](http://www.telerik.com/kendo-angular-ui/components/styling/)
+* [Using the Nouvelle Theme in React Projects](https://www.telerik.com/kendo-react-ui/components/styling/theme-Nouvelle/)
+* [Using the Nouvelle Theme in jQuery Projects](http://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes)
+
+*Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries or affiliates. All rights reserved.*
+
+*Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries.*

packages/nouvelle/docs/customization-buttons.md

@@ -0,0 +1,223 @@
+---
+title: Customizing Buttons
+description: "Refer to the list of the Kendo UI Nouvelle theme variables available for customization."
+slug: variables_kendothemenouvelle_buttons
+position: 9
+---
+
+# Customizing Buttons
+
+The following table lists the available variables for customization.
+
+<style>
+    .theme-variables th,
+    .theme-variables td {
+        vertical-align: top;
+    }
+
+    .color-preview {
+        margin-right: .5em;
+        border-radius: 50%;
+        width: 1em;
+        height: 1em;
+        vertical-align: middle;
+        display: inline-block;
+        border: 1px solid rgba(0,0,0,.08);
+    }
+
+    .theme-variables-description-container > div {
+        margin: 0 0 .5em 2em;
+    }
+
+    .theme-variables-description {
+        display: block;
+        margin-left: 1em;
+    }
+</style>
+
+
+<table class="theme-variables">
+    <colgroup>
+    <col style="width: 200px; white-space:nowrap;" />
+    <col />
+    <col />
+    <col />
+</colgroup>
+<thead>
+    <tr>
+        <th>Name</th>
+        <th>Type</th>
+        <th>Default value</th>
+        <th>Computed value</th>
+    </tr>
+</thead>
+<tbody>
+        <tr>
+    <td>$button-bg</td>
+    <td></td>
+    <td>$interactive-bg</td>
+    <td><span class="color-preview" style="background-color: #f6f6f6"></span>#f6f6f6</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background of the buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-text</td>
+    <td></td>
+    <td>$interactive-text</td>
+    <td><span class="color-preview" style="background-color: #656565"></span>#656565</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of the buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-border</td>
+    <td></td>
+    <td>$interactive-border</td>
+    <td>rgba( black, .08 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of the buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-gradient</td>
+    <td></td>
+    <td>$interactive-gradient</td>
+    <td>rgba( black, 0 ), rgba( black, .02 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of the buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-hover-bg</td>
+    <td></td>
+    <td>$hover-bg</td>
+    <td>shade( $interactive-bg, .5 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background of hovered buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-hover-text</td>
+    <td></td>
+    <td>$hover-text</td>
+    <td>$interactive-text</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of hovered buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-hover-border</td>
+    <td></td>
+    <td>$hover-border</td>
+    <td>rgba( black, .15 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of hovered buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-hover-gradient</td>
+    <td></td>
+    <td>$hover-gradient</td>
+    <td>rgba( black, 0 ), rgba( black, .02 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of hovered buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-active-text</td>
+    <td></td>
+    <td>$button-text</td>
+    <td><span class="color-preview" style="background-color: #656565"></span>#656565</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of pressed buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-active-bg</td>
+    <td></td>
+    <td>$button-bg</td>
+    <td><span class="color-preview" style="background-color: #f6f6f6"></span>#f6f6f6</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of pressed buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-active-border</td>
+    <td></td>
+    <td>$button-border</td>
+    <td>rgba( black, .08 )</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of pressed buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-active-gradient</td>
+    <td></td>
+    <td>none</td>
+    <td>none</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of pressed buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-focus-text</td>
+    <td></td>
+    <td>null</td>
+    <td>null</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The text color of focus buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-focus-bg</td>
+    <td></td>
+    <td>null</td>
+    <td>null</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background color of focus buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-focus-border</td>
+    <td></td>
+    <td>null</td>
+    <td>null</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The border color of focus buttons.</div></div>
+    </td>
+</tr>
+<tr>
+    <td>$button-focus-gradient</td>
+    <td></td>
+    <td>null</td>
+    <td>null</td>
+</tr>
+<tr>
+    <td colspan="4" class="theme-variables-description-container"><div><b>Description</b><div class="theme-variables-description">The background gradient of focus buttons.</div></div>
+    </td>
+</tr>
+</tbody>
+</table>
+
+## Suggested Links
+
+* [Styling Overview]({% slug themesandstyles %})
+* [Web Font Icons]({% slug icons %})
+* [Preview of the Themed Components](../)
+