Update Sky widgets to have more material design

sky/examples/widgets/widget-root.sky

Index: sky/examples/widgets/widget-root.sky
diff --git a/sky/examples/widgets/widget-root.sky b/sky/examples/widgets/widget-root.sky
index 17975d9f1dba9911b16013d780bc5a8d14f6ba7a..2aad246a5d6d38dac315ca1af790a0b775dbe695 100644
--- a/sky/examples/widgets/widget-root.sky
+++ b/sky/examples/widgets/widget-root.sky
@@ -13,6 +13,9 @@
 <sky-element>
 <template>
   <style>
+  :host {
+    font-family: 'Roboto Regular', 'Helvetica';
+  }
   div {
     display: flex;
     align-items: center;
@@ -34,9 +37,11 @@
     </sky-box>
   
     <sky-box title='Buttons'>
-      <sky-button id='button'>Button</sky-button>
-      <div>highlight: {{ myButton.highlight }}</div>
-      <div>clickCount: {{ clickCount }}</div>
+      <div style="display: flex; flex-direction: horizontal">
+        <div style="flex:1" />
+        <sky-button level="1" id="button">CANCEL</sky-button>
+        <sky-button level="1" primary>CONFIRM</sky-button>
+      </div>
     </sky-box>
   
     <sky-box title='Checkboxes'>