Fix styling

packages/common/vpu-button.js

@@ -73,26 +73,12 @@ class Button extends VPULitElement {
         // language=css
         return css`
             ${commonUtils.getThemeCSS()}
-            .button {
-                cursor: pointer;
-                justify-content: center;
-                padding-bottom: calc(.375rem - 1px);
-                padding-left: .75rem;
-                padding-right: .75rem;
-                padding-top: calc(.375rem - 1px);
-                text-align: center;
-                white-space: nowrap;
-            }`;
+            ${commonUtils.getButtonCSS()}
+        `;
     }
 
     render() {
         return html`
-            <style>
-                .primary {
-                    background: var(--vpu-primary-bg-color);
-                    color: var(--vpu-primary-text-color);
-                }
-            </style>
             <button @click="${this.clickHandler}" class="button ${this.type}" ?disabled="${this.disabled}">
                 ${this.value} <vpu-mini-spinner style="display: ${this.spinner ? "inline" : "none"}"></vpu-mini-spinner>
             </button>

packages/common/vpu-common-demo.js

@@ -125,7 +125,7 @@ class VpuCommonDemo extends VPULitElement {
                 <div class="content">
                     <h2>Button</h2>
                     <div class="control">
-                        <vpu-button value="Load" @click="${this.buttonClickHandler}" type="primary"></vpu-button>
+                        <vpu-button value="Load" @click="${this.buttonClickHandler}" type="is-primary"></vpu-button>
                     </div>
                 </div>
                 <div class="content">