diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index c2cdfb8..0000000
--- a/.editorconfig
+++ /dev/null
@@ -1,21 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-
-[*]
-
-# Change these settings to your own preference
-indent_style = space
-indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-
-[*.md]
-trim_trailing_whitespace = false
diff --git a/.gitattributes b/.gitattributes
deleted file mode 100644
index 2125666..0000000
--- a/.gitattributes
+++ /dev/null
@@ -1 +0,0 @@
-* text=auto
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 6f858af..8d4ae25 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1 @@
-node_modules
-dist
-.sass-cache
-.tmp
+bower_components
diff --git a/.jshintrc b/.jshintrc
deleted file mode 100644
index 37996c0..0000000
--- a/.jshintrc
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-  "node": true,
-  "browser": true,
-  "esnext": true,
-  "bitwise": true,
-  "camelcase": true,
-  "curly": true,
-  "eqeqeq": true,
-  "immed": true,
-  "indent": 2,
-  "latedef": true,
-  "newcap": true,
-  "noarg": true,
-  "quotmark": "single",
-  "regexp": true,
-  "undef": true,
-  "unused": true,
-  "strict": true,
-  "trailing": true,
-  "smarttabs": true,
-  "jquery": true,
-  "globals": {
-    "wrap": true,
-    "unwrap": true,
-    "Polymer": true,
-    "Platform": true
-  }
-}
diff --git a/.yo-rc.json b/.yo-rc.json
new file mode 100644
index 0000000..2f04a55
--- /dev/null
+++ b/.yo-rc.json
@@ -0,0 +1,5 @@
+{
+  "generator-polymer": {
+    "ghUser": "nishacodes"
+  }
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index 83e131c..23b85cd 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,56 @@
 # lens-u-colorpicker
 
-See the [component page](http://lenses.github.io/lens-u-colorpicker) for more information.
+An element providing a starting point for your own reusable Polymer elements.
+
+
+## Dependencies
+
+Element dependencies are managed via [Bower](http://bower.io/). You can
+install that via:
+
+    npm install -g bower
+
+Then, go ahead and download the element's dependencies:
+
+    bower install
+
+
+## Playing With Your Element
+
+If you wish to work on your element in isolation, we recommend that you use
+[Polyserve](https://github.com/PolymerLabs/polyserve) to keep your element's
+bower dependencies in line. You can install it via:
+
+    npm install -g polyserve
+
+And you can run it via:
+
+    polyserve
+
+Once running, you can preview your element at
+`http://localhost:8080/components/lens-u-colorpicker/`, where `lens-u-colorpicker` is the name of the directory containing it.
+
+
+## Testing Your Element
+
+Simply navigate to the `/test` directory of your element to run its tests. If
+you are using Polyserve: `http://localhost:8080/components/lens-u-colorpicker/test/`
+
+### web-component-tester
+
+The tests are compatible with [web-component-tester](https://github.com/Polymer/web-component-tester).
+Install it via:
+
+    npm install -g web-component-tester
+
+Then, you can run your tests on _all_ of your local browsers via:
+
+    wct
+
+#### WCT Tips
+
+`wct -l chrome` will only run tests in chrome.
+
+`wct -p` will keep the browsers alive after test runs (refresh to re-run).
+
+`wct test/some-file.html` will test only the files you specify.
diff --git a/bower.json b/bower.json
index 9c5d783..d9d5985 100644
--- a/bower.json
+++ b/bower.json
@@ -1,13 +1,33 @@
 {
   "name": "lens-u-colorpicker",
-  "version": "0.0.0",
-  "keywords": "thelma, polymer, web-components",
+  "version": "1.0.0",
+  "authors": [
+    "Anonymous <anonymous@example.com>"
+  ],
+  "description": "An element providing a solution to no problem in particular.",
+  "keywords": [
+    "web-component",
+    "web-components",
+    "polymer",
+    "seed"
+  ],
   "main": "lens-u-colorpicker.html",
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/<USERNAME>/seed-element/",
+  "ignore": [
+    "/.*",
+    "/test/",
+    "/demo/"
+  ],
   "dependencies": {
-    "th-theme": "thelmanews/th-theme",
-    "polymer": "Polymer/polymer#~0.5.5",
     "flexi-color-picker": "DavidDurman/FlexiColorPicker",
-    "core-icon": "polymer/core-icon#~0.5.5",
-    "core-collapse": "polymer/core-collapse#~0.5.5"
+    "iron-input": "polymerelements/iron-input#~1.0.3",
+    "iron-collapse": "polymerelements/iron-collapse#~1.0.3",
+    "polymer": "Polymer/polymer#~1.1.0",
+    "lenses-styles": "lenses/lenses-styles"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "web-component-tester": "*"
   }
 }
diff --git a/demo.html b/demo.html
deleted file mode 100644
index db98114..0000000
--- a/demo.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!doctype html>
-<html>
-  <head>
-    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-    <title>lens-u-colorpicker Demo</title>
-    <script src="../webcomponentsjs/webcomponents.js"></script>
-    <link rel="import" href="lens-u-colorpicker.html">
-  </head>
-  <body unresolved>
-
-    <p>An example of `lens-u-colorpicker` looks like this:</p>
-
-    <lens-u-colorpicker></lens-u-colorpicker>
-
-  </body>
-</html>
diff --git a/demo/index.html b/demo/index.html
new file mode 100644
index 0000000..e2dfbb0
--- /dev/null
+++ b/demo/index.html
@@ -0,0 +1,19 @@
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>lens-u-colorpicker Demo</title>
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" type="css" href="../../lenses-styles/themes.html">
+    <link rel="import" href="../lens-u-colorpicker.html">
+
+  </head>
+  <body class="belize">
+    <p>An example of <code>&lt;lens-u-colorpicker&gt;</code>:</p>
+    <lens-u-colorpicker></lens-u-colorpicker>
+
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0e22054
--- /dev/null
+++ b/index.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+  <!-- Note: if the main element for this repository doesn't
+       match the folder name, add a src="&lt;main-component&gt;.html" attribute,
+       where &lt;main-component&gt;.html" is a file that imports all of the
+       components you want documented. -->
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/lens-u-colorpicker.css b/lens-u-colorpicker.css
deleted file mode 100644
index 3b64de1..0000000
--- a/lens-u-colorpicker.css
+++ /dev/null
@@ -1,71 +0,0 @@
-:host {
-  width: 100%;
-  height: 100%;
-  display: inline-block;
-}
-
-.color-picker {
-  width: 100%;
-  padding: 5px;
-  background: white;
-  box-sizing: border-box; 
-}
-
-.cp-small {
-  border-radius: 0;
-}
-
-#picker {
-  background-color: white;
-  float: left;
-  width: 100%;
-
-}
-#picker .picker-wrapper {
-  width: 85%;
-}
-
-#picker .picker {
-  width: 100%;
-  height: 200px;
-}
-#picker .slide {
-  width: 100%;
-  height: 200px;
-}
-#picker .slide-wrapper {
-  margin-left: 5px;
-  width: 10%;
-}
-#picker .picker-indicator {
-  width: 5px;
-  height: 5px;
-  border: 2px solid white 1px solid black;
-}
-
-#picker .slide-indicator {
-  width: 100%;
-  height: 2px;
-  left: 0px;
-  background-color: black;
-}
-
-#color{
-  display: inline-block;
-  width: 100%;
-  height: 26px;
-  border-radius: 3px;
-  padding: 5px;
-  font-size: 12px;
-  box-sizing: border-box;
-  border: 2px solid #eee;
-}
-
-.swatch {
-  width: 18px;
-  height: 18px;
-  border-radius: 50%;
-  display: inline-block;
-  border: 1px solid #eee;
-}
-
diff --git a/lens-u-colorpicker.html b/lens-u-colorpicker.html
index ddeaac3..0da66b0 100644
--- a/lens-u-colorpicker.html
+++ b/lens-u-colorpicker.html
@@ -1,66 +1,274 @@
-<link rel="import" href="../polymer/polymer.html"> 
-<link rel="import" href="../th-theme/th-theme.html"> 
-<link rel="import" href="../core-collapse/core-collapse.html"> 
-<link rel="import" href="../core-icons/core-icons.html"> 
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-icons/iron-icons.html">
+<link rel="import" href="../iron-collapse/iron-collapse.html">
+<link rel="import" href="../lenses-styles/theme-styles.html">
 
 <!--
-A Thelma component providing solution to no problem in particular.
+'lens-u-colorpicker' is a colorpicker element, that allows the user to choose a color from a
+color palette or a colorpicker.
 
-##### Example
+Example:
 
-    <lens-u-colorpicker></lens-u-colorpicker>
+    <lens-u-colorpicker colorPalette='["red", "white", "blue"]'></lens-u-colorpicker>
 
-@element lens-u-colorpicker
-@blurb Element providing solution to no problem in particular.
-@status alpha
-@homepage http://lenses.github.io/lens-u-colorpicker
 -->
-
-<polymer-element name="lens-u-colorpicker" attributes="color presetColors">
+<dom-module id="lens-u-colorpicker">
   <template>
-    <core-style ref="theme"></core-style>
-    <link href="../flexi-color-picker/themes.css" media="all" rel="stylesheet" type="text/css" />
-    <link rel="stylesheet" href="lens-u-colorpicker.css">
-    
-    <div id="color" on-click="{{toggleColorPicker}}" style="background-color:{{color}}">{{color}}<core-icon icon="arrow-drop-down" style="display: inline-block; position: absolute; right: 0; top: 0"></core-icon> </div>
-    <core-collapse id="collapse">
-      <div class="color-picker">
-        <template repeat="{{color in presetColors}}">
-          <span class="swatch" title="{{color}}" on-click="{{selectColor}}" style="background-color:{{color}}"></span>
+    <style include="theme-styles"></style>
+    <style>
+      :host {
+        display: block;
+        font-family: sans-serif;
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        display: inline-block;
+      }
+
+      #color {
+        display: inline-block;
+        height: 26px;
+        width: 100%;
+        padding: 3px;
+        box-sizing: border-box;
+        background-color: var(--selected-color);
+        color: var(--contrast-color);
+      }
+
+      iron-icon {
+        cursor: pointer;
+        background-color: color: var(--contrast-color);
+        float: right;
+      }
+
+      .swatch-container {
+        min-height: 26px;
+        padding: 3px 5px;
+        box-sizing: border-box;
+        background-color: var(--background);
+      }
+
+      .swatch {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        display: inline-block;
+        cursor: pointer;
+        margin-top: 2px;
+        
+      }
+
+      #colorpicker {
+        background-color: white;
+        width: 100%;
+      }
+
+      /* Note: It seems that /deep/ combinator is required to select classes within the #colorpicker div */
+      #colorpicker /deep/ .picker-wrapper, #colorpicker /deep/ .slide-wrapper {
+        display: inline-block;
+        float: left;
+        box-sizing: border-box;
+        cursor: pointer;
+      }
+
+      #colorpicker /deep/ .picker-wrapper {
+        width: 85%;
+      }
+
+      #colorpicker /deep/ .slide-wrapper {
+        width: 15%;
+        border-left: 2px solid white;
+      }
+
+      #colorpicker /deep/ .picker, #colorpicker /deep/ .slide {
+        width: 100%;
+        height: 200px;
+      }
+
+     /* TODO: These indicators do not move with the chosen color for some reason. Disabled temporarily */
+     /* #colorpicker /deep/ .picker-indicator {
+        width: 5px;
+        height: 5px;
+        border: 2px solid white 1px solid black;
+      }
+
+      #colorpicker /deep/ .slide-indicator {
+        width: 100%;
+        height: 5px;
+        left: 0px;
+        background-color: black;
+      }
+  */
+    </style>
+    <div id="color"><span>{{color}}</span> <iron-icon icon="arrow-drop-down" on-click="toggleCollapse"></iron-icon></div>
+    <iron-collapse id="collapse" opened="true">
+      <div class="swatch-container">
+        <template is="dom-if" if="{{!colorPalette.length}}">
+          <span class="bg-accent0 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent1 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent2 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent3 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent4 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent5 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent6 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent7 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent8 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent9 swatch" on-click="_chooseColor"></span>
+          <span class="bg-accent10 swatch" on-click="_chooseColor"></span>
+        </template>
+        <template is="dom-if" if="{{colorPalette.length}}">
+          <template is="dom-repeat" items="{{colorPalette}}" as="color">
+            <span class="swatch" style$="{{_styleBgColor(color)}}" on-click="_chooseColor"></span>
+          </template>
         </template>
       </div>
-      <div id="picker" class="cp-small"></div>
-    </core-collapse>
-
+      <div id="colorpicker"></div>
+    </iron-collapse>
   </template>
-  <script type="text/javascript" src="../flexi-color-picker/colorpicker.js"></script>
-  <script>
-    Polymer({
-      ready: function () {
-        this.getColors();
-        ColorPicker(this.$.picker, function(hex, hsv, rgb) {
-          this.color = hex;
-        }.bind(this));
-      },
-      toggleColorPicker: function(){
-        this.$.collapse.toggle(); 
-      },
-      selectColor: function(e, detail, selection){
-        this.color = selection.title;
+
+</dom-module>
+<script type="text/javascript" src="../flexi-color-picker/colorpicker.js"></script>
+<script>
+
+  Polymer({
+    is: 'lens-u-colorpicker',
+
+    properties: {
+      /**
+       * The chosen color from the colorpicker.
+       *
+       * @attribute color
+       * @type String
+       * @default '#FFFFFF'
+       */
+      color:  {
+        type: String,
+        value: '#FFFFFF'
       },
-      getColors: function(){
-        var theme  = window.CoreStyle.g.theme;
-        this.presetColors = this.presetColors || [];
-
-        for (var color in theme){
-          if(/^accent/.test(color)){
-            this.presetColors.push(theme[color]);
-          }
+
+      /**
+       * An array of preset colors to be included as swatches next to the colorpicker.
+       * 
+       * @attribute colorPalette
+       * @type Array
+       * @default []
+       */
+      colorPalette: {
+        type: Array,
+        value: function(){
+          return [];
         }
-        
-        this.presetColors.push(theme['background']);
-        this.presetColors.push(theme['foreground1']);
       }
-    });
-  </script>
-</polymer-element>
\ No newline at end of file
+    },
+
+    listeners: {
+      'colorpicker.tap': '_changeColor',
+      'colorpicker.track': '_changeColor'
+    },
+
+    /**
+     * Initial set up of colorpicker.
+     */
+    ready: function() {
+      this.customStyle['--selected-color'] = this.color;
+      
+      var colorPicker = ColorPicker(this.$.colorpicker, function(hex, hsv, rgb) {
+          this.color = hex.toUpperCase();
+      }.bind(this));
+
+      this.updateStyles();
+    },
+
+    /**
+     * Expands and collapses the colorpicker.
+     */
+    toggleCollapse: function(){
+      this.$.collapse.toggle();
+    },
+
+    /**
+     * Selects the color when a swatch is clicked.
+     */
+    _chooseColor: function(e, detail){
+      var swatchEl = e.path[0],
+          rgb = window.getComputedStyle(swatchEl).backgroundColor,
+          hex = this._rgbToHex(rgb);
+
+      if (hex){
+        this.color = hex;
+        this._changeColor();
+      }
+    },
+
+    /**
+     * Updates color in stylesheet when a new color is selected.
+     */
+    _changeColor: function(){
+      
+      this.customStyle['--selected-color'] = this.color;
+      this.customStyle['--contrast-color'] = this._getContrastColor(this.color);
+      
+      // Updates the color reflected in stylesheet. Why doesn't this.updateStyles() work, like suggested in the docs?
+      Polymer.updateStyles();
+    },
+
+    /**
+     * Applies background color to swatches.
+     * 
+     * @param  {String} color 
+     * @return {String} Inline style property for background color.
+     */
+    _styleBgColor: function(color){
+      return "background-color: " + color + ";";
+    },
+
+    /**
+     * Determines which color (black or white) will contrast to the selected color, such that text will always be visible against it.
+     * 
+     * @param  {String} colorToContrast ex: '#333333'
+     * @return {String} contrastColor   '#ffffff' or '#000000'
+     */
+    _getContrastColor: function(colorToContrast){
+      // Note: Hexcodes where the first character is a number less than 5 tend to be dark colors, so white would be the contrast color.
+      
+      var hexMatch = colorToContrast.match(/#(\d)/), // Creates a match group for the first character in hex code if it is a digit.
+          getContrastColor = '#000000'; // Sets default contrast color to black.
+      
+      if (hexMatch){
+        if (parseInt(hexMatch[1]) < 5 ){
+          getContrastColor = '#FFFFFF'; // The selected color is dark, so set contrast color to be white.
+        }
+      } 
+
+      return getContrastColor;
+    },
+
+    /**
+     * Converts RGB color to hex because the selected hex code is displayed. 
+     * 
+     * @param  {String} rgb ex: 'rgb(255, 255, 255)'
+     * @return {String} hex ex: '#ffffff'
+     */
+    _rgbToHex: function(rgb){
+      var hexChars = '0123456789ABCDEF',
+          rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+
+      function hex(x) {
+        return isNaN(x) ? "00" : hexChars[(x - x % 16) / 16] + hexChars[x % 16];
+      }
+
+      if (rgb){
+        var r = hex(rgb[1]),
+            g = hex(rgb[2]),
+            b =  hex(rgb[3]),
+            hex = '#' + r + g + b;
+        return hex;
+      } else {
+        return;
+      }
+      
+    }
+
+  });
+
+</script>
diff --git a/test/basic-test.html b/test/basic-test.html
new file mode 100755
index 0000000..a3ac106
--- /dev/null
+++ b/test/basic-test.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <!-- Step 1: import the element to test -->
+    <link rel="import" href="../lens-u-colorpicker.html">
+  </head>
+  <body>
+
+    <!-- You can use the document as a place to set up your fixtures. -->
+    <lens-u-colorpicker></lens-u-colorpicker>
+
+    <script>
+      var myEl = document.querySelector('lens-u-colorpicker');
+
+      suite('<lens-u-colorpicker>', function() {
+
+        test('defines the "author" property', function() {
+          assert.equal(myEl.author.name, 'Dimitri Glazkov');
+          assert.equal(myEl.author.image, 'http://addyosmani.com/blog/wp-content/uploads/2013/04/unicorn.jpg');
+        });
+
+        test('says hello', function() {
+          assert.equal(myEl.sayHello(), 'lens-u-colorpicker says, Hello World!');
+
+          var greetings = myEl.sayHello('greetings Earthlings');
+          assert.equal(greetings, 'lens-u-colorpicker says, greetings Earthlings');
+        });
+
+        test('fires lasers', function(done) {
+          myEl.addEventListener('lens-u-colorpicker-lasers', function(event) {
+            assert.equal(event.detail.sound, 'Pew pew!');
+            done();
+          });
+          myEl.fireLasers();
+        });
+
+      });
+    </script>
+
+  </body>
+</html>
diff --git a/test/index.html b/test/index.html
new file mode 100755
index 0000000..eb77239
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+  </head>
+  <body>
+    <script>
+      // Load and run all tests (.html, .js):
+      WCT.loadSuites([
+        'basic-test.html',
+      ]);
+    </script>
+  </body>
+</html>