Extend the sky color picker example

sky/examples/color/color-samples.sky

Index: sky/examples/color/color-samples.sky
diff --git a/sky/examples/color/color-picker.sky b/sky/examples/color/color-samples.sky
similarity index 51%
copy from sky/examples/color/color-picker.sky
copy to sky/examples/color/color-samples.sky
index 39c92c8dc12f583b3ea63ad04a8b4a187686380b..ef2877c377bcd57d008200c63956314264a084d4 100644
--- a/sky/examples/color/color-picker.sky
+++ b/sky/examples/color/color-samples.sky
@@ -3,30 +3,31 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 -->
-<sky>
-<import src="/sky/framework/sky-box.sky"/>
 <import src="/sky/framework/sky-element/sky-element.sky" as="SkyElement" />
-<import src="color-wheel.sky" />
-<sky-element name="color-picker">
+<import src="color-sample.sky" />
+
+<sky-element name="color-samples">
 <template>
   <style>
-  #color-sample {
-     height: 100px;
-     margin-top: 10px;
-     background-color: {{ inputColor }};
-  }
+    :host {
+      display: flex;
+    }
+    color-sample {
+       height: 100%;
+       flex: 1;
+       margin-left: 2px;
+       margin-right: 2px;
+    }
   </style>
-  <sky-box title='Choose a Color'>
-    <color-wheel color="{{ inputColor }}"/>
-    <div id="color-sample"></div>
-  </sky-box>
+  <template repeat="{{ colors }}">
+    <color-sample color="{{ cssColor }}" />
+  </template>
 </template>
 <script>
 module.exports = class extends SkyElement {
   created() {
-    this.inputColor = "#FFFFFF";
+    this.colors = [];
   }
 }.register();
 </script>
 </sky-element>
-</sky>