23 files changed, 391 insertions, 320 deletions
diff --git a/js/components/textfield.reel/textfield.html b/js/components/textfield.reel/textfield.html
index 89adf776..73defabd 100755
--- a/js/components/textfield.reel/textfield.html
+++ b/js/components/textfield.reel/textfield.html
@@ -19,6 +19,6 @@
    </script>
 </head>
 <body>
-    <input id="textfield" class="nj-skinned" type="text">
+    <input id="textfield" class="textfield nj-skinned" type="text">
 </body>
 </html>
 \ No newline at end of file
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.css b/js/components/tools-properties/rect-properties.reel/rect-properties.css
index f50a9873..6541f641 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.css
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.css
@@ -4,7 +4,7 @@
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
-.button {
+.rectProperties .button {
    border:none;
    cursor:default;
    text-align:center;
@@ -12,28 +12,26 @@
    opacity:0.8;
    display:table-cell;
    vertical-align:middle;
-    width:100%;
-    height:100%;
    background-color:#333333;
    color:white;
 }
-.button:hover
+.rectProperties .button:hover
 {
    opacity:1;
 }
-.button:active
+.rectProperties .button:active
 {
    outline:solid 1px black;
 }
-.button.on
+.rectProperties .button.on
 {
    background-color: #333333;
 }
-.button.off
+.rectProperties .button.off
 {
    background-color: #cccccc;
    color:black;
diff --git a/js/components/tools-properties/rect-properties.reel/rect-properties.html b/js/components/tools-properties/rect-properties.reel/rect-properties.html
index e5c52466..214ff1d5 100755
--- a/js/components/tools-properties/rect-properties.reel/rect-properties.html
+++ b/js/components/tools-properties/rect-properties.reel/rect-properties.html
@@ -68,7 +68,7 @@
    </head>
    <body>
-        <div id="rectProperties">
+        <div id="rectProperties" class="rectProperties">
            <button id="lockButton" class="unselectable subToolButton button LockToolUp" style=" margin-left:20px"></button>
            <div id="TLRadiusLabel" class="unselectable subToolButton cornerRadius topLeft"></div>
            <div id="TLRadiusControl" class="label"></div>
diff --git a/js/components/ui/color-chip.reel/color-chip.js b/js/components/ui/color-chip.reel/color-chip.js
index e51bdd8a..ed1ac27a 100755
--- a/js/components/ui/color-chip.reel/color-chip.js
+++ b/js/components/ui/color-chip.reel/color-chip.js
@@ -29,12 +29,20 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
        value: 20
    },
-    initialColor: {
+    color: {
-        value: false
+        value: {r:0, g:0, b:0, a:1, css:'rgb(0,0,0)', mode:'rgb'}
    },
    changeDelegate: {
-        value: null
+        value: function(event) {
+            this.color = event._event.color;
+            var evt = document.createEvent("CustomEvent");
+            evt.initEvent("change", true, true);
+            evt.type = "change";
+            this.dispatchEvent(evt);
+        }
    },
    prepareForDraw: {
@@ -60,10 +68,10 @@ var ColorChip = exports.ColorChip = Montage.create(Component, {
        value: function(evt) {
            if(this.chip) {
                // This is a single chip - Not related to the color panel -- Set the initial color if found
-                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(255,0,0)";
+                var mode = "rgb", r = 0, g = 0, b = 0, a = 1, css = "rgb(0,0,0)";
-                if(this.initialColor) {
+                if(this.color) {
-                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.initialColor);
+                    var colorObj = this.application.ninja.colorController.getColorObjFromCss(this.color.css);
                    mode = colorObj.mode;
                    r = colorObj.value.r;
                    g = colorObj.value.g;
diff --git a/js/components/ui/file-input.reel/file-input.html b/js/components/ui/file-input.reel/file-input.html
index 5cdd8f9e..2a8546a5 100755
--- a/js/components/ui/file-input.reel/file-input.html
+++ b/js/components/ui/file-input.reel/file-input.html
@@ -11,7 +11,7 @@
    <script type="text/montage-serialization">
    {
        "owner": {
-            "module": "js/components/ui/file-input",
+            "module": "js/components/ui/file-input.reel",
            "name": "FileInput",
            "properties": {
                "element": {"#": "fileInput"},
@@ -23,8 +23,8 @@
    </script>
 </head>
 <body>
-    <div id="fileInput">
+    <div id="fileInput" class="fileInput">
-        <input id="fileInputTextField" class="file-path" type="text" />
+        <input id="fileInputTextField" class="file-path nj-skinned" type="text" />
        <input id="fileInputControl" class="browse-button" type="file" />
    </div>
 </body>
diff --git a/js/components/ui/file-input.reel/file-input.js b/js/components/ui/file-input.reel/file-input.js
index 2ea38162..b57f7c21 100755
--- a/js/components/ui/file-input.reel/file-input.js
+++ b/js/components/ui/file-input.reel/file-input.js
@@ -5,7 +5,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot
 </copyright> */
 var Montage = require("montage/core/core").Montage,
-Component = require("montage/ui/component").Component;
+    Component = require("montage/ui/component").Component;
 var FileInput = exports.FileInput = Montage.create(Component, {
diff --git a/js/components/ui/input-group.reel/input-group.html b/js/components/ui/input-group.reel/input-group.html
index c99e29d6..0050b8cb 100755
--- a/js/components/ui/input-group.reel/input-group.html
+++ b/js/components/ui/input-group.reel/input-group.html
@@ -11,7 +11,7 @@
    <script type="text/montage-serialization">
    {
        "eventDelegator": {