You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by bi...@apache.org on 2014/11/22 02:00:47 UTC

[04/48] git commit: [flex-sdk] [refs/heads/iso7skins] - Added FlatSpark project

Added FlatSpark project


Project: http://git-wip-us.apache.org/repos/asf/flex-sdk/repo
Commit: http://git-wip-us.apache.org/repos/asf/flex-sdk/commit/e72f72e3
Tree: http://git-wip-us.apache.org/repos/asf/flex-sdk/tree/e72f72e3
Diff: http://git-wip-us.apache.org/repos/asf/flex-sdk/diff/e72f72e3

Branch: refs/heads/iso7skins
Commit: e72f72e3ab217d5b877884be13573bbf1e3bd051
Parents: 105ae47
Author: Mahmoud Ali <ak...@apache.org>
Authored: Mon Oct 6 22:17:36 2014 -0400
Committer: Mahmoud Ali <ak...@apache.org>
Committed: Mon Oct 6 22:17:36 2014 -0400

----------------------------------------------------------------------
 frameworks/projects/flatspark/defaults.css      |  97 +++++
 .../src/assets/fonts/awesome/FontAwesome.otf    | Bin 0 -> 62856 bytes
 .../src/assets/fonts/lato/Lato_Black.otf        | Bin 0 -> 47436 bytes
 .../src/assets/fonts/lato/Lato_Black_Italic.otf | Bin 0 -> 46100 bytes
 .../src/assets/fonts/lato/Lato_Bold.otf         | Bin 0 -> 48800 bytes
 .../src/assets/fonts/lato/Lato_Bold_Italic.otf  | Bin 0 -> 47364 bytes
 .../src/assets/fonts/lato/Lato_Hairline.otf     | Bin 0 -> 46852 bytes
 .../assets/fonts/lato/Lato_Hairline_Italic.otf  | Bin 0 -> 46568 bytes
 .../src/assets/fonts/lato/Lato_Light.otf        | Bin 0 -> 47040 bytes
 .../src/assets/fonts/lato/Lato_Light_Italic.otf | Bin 0 -> 47060 bytes
 .../src/assets/fonts/lato/Lato_Regular.otf      | Bin 0 -> 47088 bytes
 .../assets/fonts/lato/Lato_Regular_Italic.otf   | Bin 0 -> 47356 bytes
 .../flatspark/src/components/ButtonIcon.as      |  41 ++
 .../flatspark/src/components/TextInputIcon.as   |  35 ++
 .../flatspark/src/enums/BrandColorEnum.as       |  30 ++
 .../flatspark/src/enums/ButtonColorEnum.as      |  59 +++
 .../flatspark/src/enums/ButtonSizeEnum.as       |  31 ++
 .../flatspark/src/enums/ColorSwatchEnum.as      |  40 ++
 .../projects/flatspark/src/enums/SizeEnum.as    |  32 ++
 .../flatspark/src/enums/TextInputSizeEnum.as    |  30 ++
 .../src/itemRenderers/DefaultItemRenderer.mxml  |  51 +++
 .../projects/flatspark/src/skins/AlertSkin.mxml | 230 +++++++++++
 .../flatspark/src/skins/ButtonIconSkin.mxml     | 191 +++++++++
 .../flatspark/src/skins/ButtonSkin.mxml         | 184 +++++++++
 .../flatspark/src/skins/CheckBoxSkin.mxml       | 136 +++++++
 .../flatspark/src/skins/ComboBoxButtonSkin.mxml | 108 +++++
 .../flatspark/src/skins/ComboBoxSkin.mxml       | 127 ++++++
 .../src/skins/ComboBoxTextInputSkin.mxml        | 218 ++++++++++
 .../src/skins/DropDownListButtonSkin.mxml       | 109 +++++
 .../flatspark/src/skins/DropDownListSkin.mxml   | 143 +++++++
 .../flatspark/src/skins/HScrollBarSkin.mxml     |  87 ++++
 .../src/skins/HScrollBarThumbSkin.mxml          |  74 ++++
 .../src/skins/HScrollBarTrackSkin.mxml          |  71 ++++
 .../projects/flatspark/src/skins/PanelSkin.mxml | 253 ++++++++++++
 .../flatspark/src/skins/ProgressBarSkin.mxml    |  54 +++
 .../flatspark/src/skins/RadioButtonSkin.mxml    | 129 ++++++
 .../flatspark/src/skins/ScrollerSkin.mxml       | 106 +++++
 .../flatspark/src/skins/TextInputIconSkin.mxml  | 338 ++++++++++++++++
 .../flatspark/src/skins/TextInputSkin.mxml      | 330 +++++++++++++++
 .../src/skins/TitleWindowCloseButtonSkin.mxml   | 118 ++++++
 .../flatspark/src/skins/TitleWindowSkin.mxml    | 256 ++++++++++++
 .../flatspark/src/skins/VScrollBarSkin.mxml     |  87 ++++
 .../src/skins/VScrollBarThumbSkin.mxml          |  74 ++++
 .../src/skins/VScrollBarTrackSkin.mxml          |  71 ++++
 .../flatspark/src/utils/AwesomeUtils.as         | 399 +++++++++++++++++++
 .../projects/flatspark/src/utils/ColorUtils.as  |  90 +++++
 .../projects/flatspark/src/utils/ConfigSkin.as  |  44 ++
 47 files changed, 4473 insertions(+)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/defaults.css
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/defaults.css b/frameworks/projects/flatspark/defaults.css
new file mode 100644
index 0000000..5c4783b
--- /dev/null
+++ b/frameworks/projects/flatspark/defaults.css
@@ -0,0 +1,97 @@
+/* CSS file */
+@namespace s "library://ns.adobe.com/flex/spark";
+@namespace components "flatSpark.components.*";
+@namespace ns "http://flex.apache.org/experimental/ns";
+
+
+@font-face { 
+	src: url("flatSpark/assets/fonts/awesome/FontAwesome.otf"); 
+	fontFamily: FontAwesome;
+	embedAsCFF: true;
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Regular.otf");
+	fontFamily: Lato; 
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Regular_Italic.otf");
+	fontFamily: Lato;
+	fontStyle: italic;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Bold.otf");
+	fontFamily: Lato;
+	fontWeight: bold;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Bold_Italic.otf");
+	fontFamily: Lato;
+	fontStyle: italic;
+	fontWeight: bold;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Light.otf");
+	fontFamily: LatoLight;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Light_Italic.otf");
+	fontFamily: LatoLight;
+	fontStyle: italic;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Hairline.otf");
+	fontFamily: LatoHairline;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Hairline_Italic.otf");
+	fontFamily: LatoHairline;
+	fontStyle: italic;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Black.otf");
+	fontFamily: LatoBlack;
+	embedAsCFF: true; 
+}
+
+@font-face {
+	src:url("flatSpark/assets/fonts/lato/Lato_Black_Italic.otf");
+	fontFamily: LatoBlack;
+	fontStyle: italic;
+	embedAsCFF: true; 
+}
+
+global
+{
+	modal-transparency: 0.98;
+	modal-transparency-blur: 0;
+	modal-transparency-color: #2c3e50;
+}
+
+s|Application {
+	fontFamily: Lato, Helvetica, Arial, sans-serif;
+}
+
+components|ButtonIcon {
+	skinClass: ClassReference("flatSpark.skins.ButtonIconSkin");
+}
+
+components|TextInputIcon {
+	skinClass: ClassReference("flatSpark.skins.TextInputIconSkin");
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/awesome/FontAwesome.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/awesome/FontAwesome.otf b/frameworks/projects/flatspark/src/assets/fonts/awesome/FontAwesome.otf
new file mode 100644
index 0000000..8b0f54e
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/awesome/FontAwesome.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black.otf
new file mode 100644
index 0000000..237ffb7
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black_Italic.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black_Italic.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black_Italic.otf
new file mode 100644
index 0000000..97f1b93
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Black_Italic.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold.otf
new file mode 100644
index 0000000..7f0a3d3
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold_Italic.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold_Italic.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold_Italic.otf
new file mode 100644
index 0000000..4eb4518
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Bold_Italic.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline.otf
new file mode 100644
index 0000000..4edb976
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline_Italic.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline_Italic.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline_Italic.otf
new file mode 100644
index 0000000..50b82a2
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Hairline_Italic.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light.otf
new file mode 100644
index 0000000..3226cb9
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light_Italic.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light_Italic.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light_Italic.otf
new file mode 100644
index 0000000..d7557b0
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Light_Italic.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular.otf
new file mode 100644
index 0000000..1f94789
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular_Italic.otf
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular_Italic.otf b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular_Italic.otf
new file mode 100644
index 0000000..6341374
Binary files /dev/null and b/frameworks/projects/flatspark/src/assets/fonts/lato/Lato_Regular_Italic.otf differ

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/components/ButtonIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/components/ButtonIcon.as b/frameworks/projects/flatspark/src/components/ButtonIcon.as
new file mode 100644
index 0000000..96e1221
--- /dev/null
+++ b/frameworks/projects/flatspark/src/components/ButtonIcon.as
@@ -0,0 +1,41 @@
+/**	
+	  Licensed to the Apache Software Foundation (ASF) under one or more
+	  contributor license agreements.  See the NOTICE file distributed with
+	  this work for additional information regarding copyright ownership.
+	  The ASF licenses this file to You under the Apache License, Version 2.0
+	  (the "License"); you may not use this file except in compliance with
+	  the License.  You may obtain a copy of the License at
+	
+		  http://www.apache.org/licenses/LICENSE-2.0
+	
+	  Unless required by applicable law or agreed to in writing, software
+	  distributed under the License is distributed on an "AS IS" BASIS,
+	  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+	  See the License for the specific language governing permissions and
+	  limitations under the License.	
+*/
+
+package flatSpark.components
+{
+
+	import spark.components.Button;
+	
+	import flatSpark.enums.BrandColorEnum;
+
+	public class ButtonIcon extends spark.components.Button
+	{
+
+		[Bindable]
+		public var iconFont:String;
+		
+		[Bindable]
+		public var brand:int = BrandColorEnum.Default;
+
+
+		public function ButtonIcon()
+		{
+			super();
+		}
+
+	}
+}

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/components/TextInputIcon.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/components/TextInputIcon.as b/frameworks/projects/flatspark/src/components/TextInputIcon.as
new file mode 100644
index 0000000..73caada
--- /dev/null
+++ b/frameworks/projects/flatspark/src/components/TextInputIcon.as
@@ -0,0 +1,35 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.components
+{
+	import flash.events.FocusEvent;
+	
+	import spark.components.TextInput;
+	
+	public class TextInputIcon extends spark.components.TextInput
+	{
+		[Bindable]
+		public var iconFont:String;
+		
+		public function TextInputIcon()
+		{
+			super();
+		}
+		
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/BrandColorEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/BrandColorEnum.as b/frameworks/projects/flatspark/src/enums/BrandColorEnum.as
new file mode 100644
index 0000000..9be14b2
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/BrandColorEnum.as
@@ -0,0 +1,30 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	public class BrandColorEnum
+	{
+		public static const Primary:int = 1;
+		public static const Success:int = 2;
+		public static const Warning:int = 3;
+		public static const Inverse:int = 4;
+		public static const Default:int = 5;
+		public static const Info:int = 6;
+		public static const Danger:int = 7;
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/ButtonColorEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/ButtonColorEnum.as b/frameworks/projects/flatspark/src/enums/ButtonColorEnum.as
new file mode 100644
index 0000000..48d1a55
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/ButtonColorEnum.as
@@ -0,0 +1,59 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	import flatSpark.utils.ColorUtils;
+
+	public class ButtonColorEnum
+	{
+		public static const PrimaryUp:uint = ColorUtils.Turquoise;
+		public static const PrimaryHover:uint = 0x48C9B0;
+		public static const PrimaryDown:uint = 0x16A085;
+		public static const PrimaryDisabled:uint = ColorUtils.Turquoise;
+		
+		public static const SuccessUp:uint = ColorUtils.Emerald;
+		public static const SuccessHover:uint = 0x58D68D;
+		public static const SuccessDown:uint = 0x27AD60;
+		public static const SuccessDisabled:uint = ColorUtils.Emerald;
+		
+		public static const WarningUp:uint = ColorUtils.SunFlower;
+		public static const WarningHover:uint = 0xF5D313;
+		public static const WarningDown:uint = 0xCDA70D;
+		public static const WarningDisabled:uint = ColorUtils.SunFlower;
+		
+		public static const InverseUp:uint = ColorUtils.WetAsphalt;
+		public static const InverseHover:uint = 0x415B76;
+		public static const InverseDown:uint = 0x2C3E50;
+		public static const InverseDisabled:uint = ColorUtils.WetAsphalt;
+		
+		public static const DefaultUp:uint = ColorUtils.Silver;
+		public static const DefaultHover:uint = 0xCACFD2;
+		public static const DefaultDown:uint = 0xA1A6A9;
+		public static const DefaultDisabled:uint = ColorUtils.Silver;
+		
+		public static const InfoUp:uint = ColorUtils.PeterRiver;
+		public static const InfoHover:uint = 0x5DADE2;
+		public static const InfoDown:uint = 0x2C81BA;
+		public static const InfoDisabled:uint = ColorUtils.PeterRiver;
+		
+		public static const DangerUp:uint = ColorUtils.Alizarin;
+		public static const DangerHover:uint = 0xEC7063;
+		public static const DangerDown:uint = 0xC44133;
+		public static const DangerDisabled:uint = ColorUtils.Alizarin;
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/ButtonSizeEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/ButtonSizeEnum.as b/frameworks/projects/flatspark/src/enums/ButtonSizeEnum.as
new file mode 100644
index 0000000..bb210fc
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/ButtonSizeEnum.as
@@ -0,0 +1,31 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	public class ButtonSizeEnum
+	{
+		public static const Large:int = 43;
+		public static const Normal:int = 32;
+		public static const Small:int = 28;
+		public static const ExtraSmall:int = 20;
+		
+		public function ButtonSizeEnum()
+		{
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/ColorSwatchEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/ColorSwatchEnum.as b/frameworks/projects/flatspark/src/enums/ColorSwatchEnum.as
new file mode 100644
index 0000000..a1a2769
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/ColorSwatchEnum.as
@@ -0,0 +1,40 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	public class ColorSwatchEnum
+	{
+		public static const Turquoise_GreenSea:int = 1;
+		public static const Emerald_Nephritis:int = 2;
+		public static const PeterRiver_BelizeHole:int = 3;
+		public static const Amethyst_Wisteria:int = 4;
+		public static const WetAsphalt_MidnightBlue:int = 5;
+		public static const SunFlower_Orange:int = 6;
+		public static const Carrot_Pumpkin:int = 7;
+		public static const Alizarin_Pomegranate:int = 8;
+		public static const Clouds_Silver:int = 9;
+		public static const Concrete_Asbestos:int = 10;
+		
+		
+		private var _colorSwatch:int;
+		
+		public function ColorSwatchEnum(colorSwatch:int = 3) {
+			_colorSwatch = colorSwatch;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/SizeEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/SizeEnum.as b/frameworks/projects/flatspark/src/enums/SizeEnum.as
new file mode 100644
index 0000000..83600fa
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/SizeEnum.as
@@ -0,0 +1,32 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	public class SizeEnum
+	{
+		public static const Small:int = 10;
+		public static const Medium:int = 12;
+		public static const Large:int = 14;
+
+		private var _size:int;
+		
+		public function SizeEnum(size:int = 12) {
+			_size = size;
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/enums/TextInputSizeEnum.as
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/enums/TextInputSizeEnum.as b/frameworks/projects/flatspark/src/enums/TextInputSizeEnum.as
new file mode 100644
index 0000000..e7c38be
--- /dev/null
+++ b/frameworks/projects/flatspark/src/enums/TextInputSizeEnum.as
@@ -0,0 +1,30 @@
+/**	
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements.  See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License.  You may obtain a copy of the License at
+ 
+ http://www.apache.org/licenses/LICENSE-2.0
+ 
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.	
+ */
+
+package flatSpark.enums
+{
+	public class TextInputSizeEnum
+	{
+		public static const Large:int = 41;
+		public static const Normal:int = 38;
+		public static const Small:int = 31;
+		
+		public function TextInputSizeEnum()
+		{
+		}
+	}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/itemRenderers/DefaultItemRenderer.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/itemRenderers/DefaultItemRenderer.mxml b/frameworks/projects/flatspark/src/itemRenderers/DefaultItemRenderer.mxml
new file mode 100644
index 0000000..ddada4e
--- /dev/null
+++ b/frameworks/projects/flatspark/src/itemRenderers/DefaultItemRenderer.mxml
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				autoDrawBackground="false" height="32">
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="hovered" />
+		<s:State name="selected" />
+	</s:states>
+	<fx:Script>
+		<![CDATA[
+			
+			import flatSpark.utils.ColorUtils;
+			
+		]]>
+	</fx:Script>
+	
+	<s:Rect id="bgFill"
+			radiusX="4"
+			includeIn="hovered,selected"
+			left="0" right="0" top="0" bottom="0">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.MidnightBlue}"
+						  color.selected="{ColorUtils.Turquoise}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Label id="labelDisplay" paddingRight="4" paddingTop="1" paddingBottom="1" paddingLeft="4" 
+			 verticalAlign="middle" height="100%" fontFamily="Lato" fontSize="15" fontWeight="normal" 
+			 fontStyle="normal" color="{ColorUtils.Clouds}" color.hovered="{ColorUtils.Silver}"/>
+	
+</s:ItemRenderer>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/AlertSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/AlertSkin.mxml b/frameworks/projects/flatspark/src/skins/AlertSkin.mxml
new file mode 100644
index 0000000..b42abdf
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/AlertSkin.mxml
@@ -0,0 +1,230 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" blendMode="normal" mouseEnabled="false"
+			 minWidth="131" minHeight="30" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
+	<fx:Metadata>
+		<![CDATA[
+		[HostComponent("spark.components.Alert")]
+		]]>
+	</fx:Metadata>
+	
+		<fx:Script fb:purpose="styling">
+			<![CDATA[
+				import flatSpark.utils.ColorUtils;
+
+		/* Define the skin elements that should not be colorized.
+		For panel, border and title background are skinned, but the content area and title text are not. */
+		static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
+		
+		/**
+		 * @private
+		 */
+		override public function get colorizeExclusions():Array {return exclusions;}
+		
+		/**
+		 * @private
+		 */
+		override protected function initializationComplete():void
+		{
+			useChromeColor = true;
+			super.initializationComplete();
+		}
+		
+		/**
+		 * @private
+		 */
+		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
+		{
+				setPartCornerRadii(topMaskRect);
+				setPartCornerRadii(background);
+			
+			if (bottomMaskRect) setPartCornerRadii(bottomMaskRect);
+			
+			super.updateDisplayList(unscaledWidth, unscaledHeight);
+		}
+		
+		/**
+		 * @private
+		 */
+		private function setPartCornerRadii(target:Rect):void
+		{
+			target.topLeftRadiusX = cornerRadius;
+			target.topRightRadiusX = cornerRadius;
+			target.bottomLeftRadiusX = cornerRadius;
+			target.bottomRightRadiusX = cornerRadius;
+		}
+		
+		private var cornerRadius:Number=4;
+				
+			]]>
+	</fx:Script>
+	
+	<fx:Declarations>
+		<s:Group id="contentGroup" />
+	</fx:Declarations>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="disabled" />
+		<s:State name="normalWithControlBar" stateGroups="withControls" />
+		<s:State name="disabledWithControlBar" stateGroups="withControls" />
+	</s:states>
+	
+	<!-- drop shadow can't be hittable so all other graphics go in this group -->
+	<s:Group left="0" right="0" top="0" bottom="0">
+		
+		<!-- top group mask -->
+		<!--- @private -->
+		<s:Group left="0" top="0" right="0" bottom="0" id="topGroupMask" >
+			<!--- @private -->
+			<s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
+				<s:fill>
+					<s:SolidColor alpha="0"/>
+				</s:fill>
+			</s:Rect>
+		</s:Group>
+		
+		<!-- bottom group mask -->
+		<!--- @private -->
+		<s:Group left="0" top="0" right="0" bottom="0" id="bottomGroupMask"
+				 includeIn="normalWithControlBar, disabledWithControlBar">
+			<!--- @private -->
+			<s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
+				<s:fill>
+					<s:SolidColor alpha="0"/>
+				</s:fill>
+			</s:Rect>
+		</s:Group>
+		
+		<!-- layer 2: background fill -->
+		<!--- Defines the appearance of the PanelSkin class's background. -->
+		<s:Rect id="background" left="0" top="0" right="0" bottom="0">
+			<s:fill>
+				<s:SolidColor id="backgroundFill" color="#FFFFFF"/>
+			</s:fill>
+		</s:Rect>
+		
+		<!-- layer 3: contents -->
+		<!--- Contains the vertical stack of titlebar content and controlbar. -->
+		<s:Group left="0" top="0" right="0" bottom="0" id="contents">
+			<s:layout>
+				<s:VerticalLayout gap="0" horizontalAlign="justify" />
+			</s:layout>
+			
+			<!--- @private -->
+			<s:Group id="topGroup" mask="{topGroupMask}">
+				
+				<!-- layer 0: title bar fill -->
+				<!--- @private -->
+				<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.Concrete}"/>
+					</s:fill>
+				</s:Rect>
+				
+				<!-- layer 1: title bar highlight -->
+				<!--- @private -->
+				<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="1">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.Concrete}"/>
+					</s:fill>
+				</s:Rect>
+				
+				<!-- layer 2: title bar divider -->
+				<!--- @private -->
+				<s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
+					<s:fill>
+						<s:SolidColor color="{ColorUtils.Asbestos}"/>
+					</s:fill>
+				</s:Rect>
+				
+				<!-- layer 3: text -->
+				<!--- @copy spark.components.Panel#titleDisplay -->
+				<s:Label id="titleDisplay" maxDisplayedLines="1"  fontFamily="Lato" fontSize="15" fontStyle="normal" color="#FFFFFF"
+						 left="15" right="5" top="2" bottom="0" minHeight="36" height="36"
+						 verticalAlign="middle" fontWeight="bold" />
+			</s:Group>
+			
+			<!--
+			Note: setting the minimum size to 0 here so that changes to the host component's
+			size will not be thwarted by this skin part's minimum size.   This is a compromise,
+			more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+			-->
+			<!--- @copy spark.components.SkinnableContainer#contentGroup -->
+			<!--<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0">
+			</s:Group>-->
+			<s:HGroup width="100%" height="100%" verticalAlign="middle" horizontalAlign="center" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20">
+				<s:Group id="iconGroup" height="100%">
+					
+				</s:Group>
+				<s:VGroup width="100%" height="100%" paddingLeft="5" paddingRight="5" paddingBottom="5" gap="20"
+						  verticalAlign="middle" horizontalAlign="center">
+					<s:RichText id="messageDisplay"  fontFamily="Lato" fontSize="14" fontStyle="normal" color="0x000000" lineHeight="160%"
+								left="9" right="3" top="1" bottom="0" minHeight="30" maxWidth="400"
+								verticalAlign="middle"/>
+					
+					<!--
+					To-do: Need to adjust the styles for buttons
+					-->
+					<s:HGroup id="buttonGroup" width="100%" minWidth="0" minHeight="0" gap="8"
+							  horizontalAlign="center"/>
+				</s:VGroup>
+			</s:HGroup>
+			
+			
+			<!--- @private -->
+			<s:Group id="bottomGroup" minWidth="0" minHeight="0"
+					 includeIn="normalWithControlBar, disabledWithControlBar" >
+				
+				<s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
+					
+					<!-- layer 0: control bar divider line -->
+					<s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
+						<s:fill>
+							<s:SolidColor  color="#FFFFFF"/>
+						</s:fill>
+					</s:Rect>
+					
+					<!-- layer 1: control bar highlight -->
+					<s:Rect left="0" right="0" top="1" bottom="0">
+						<s:fill>
+							<s:SolidColor  color="#FFFFFF"/>
+						</s:fill>
+					</s:Rect>
+					
+					<!-- layer 2: control bar fill -->
+					<s:Rect left="1" right="1" top="2" bottom="1">
+						<s:fill>
+							<s:SolidColor  color="#FFFFFF"/>
+						</s:fill>
+					</s:Rect>
+				</s:Group>
+				<!-- layer 3: control bar -->
+				<!--- @copy spark.components.Panel#controlBarGroup -->
+				<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
+					<s:layout>
+						<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
+					</s:layout>
+				</s:Group>
+			</s:Group>
+		</s:Group>
+	</s:Group>
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ButtonIconSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ButtonIconSkin.mxml b/frameworks/projects/flatspark/src/skins/ButtonIconSkin.mxml
new file mode 100644
index 0000000..f009956
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ButtonIconSkin.mxml
@@ -0,0 +1,191 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the Spark Button component.  
+
+@see spark.components.Button
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
+			 xmlns:s="library://ns.adobe.com/flex/spark" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+			 minWidth="21" minHeight="21" height="{ButtonSizeEnum.Normal}"
+			 alpha.disabled="0.5">
+	<fx:Metadata>[HostComponent("flatSpark.components.ButtonIcon")]</fx:Metadata>
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[         
+			import flatSpark.enums.ButtonColorEnum;
+			import flatSpark.enums.ButtonSizeEnum;
+			import flatSpark.enums.TextInputSizeEnum;
+			import flatSpark.utils.ColorUtils;
+
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["iconDisplay", "labelDisplay"];
+			
+			/** 
+			 * @private
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				hostComponent.useHandCursor=true;
+				hostComponent.buttonMode=true;
+				super.initializationComplete();
+			}  
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{
+				var cr:Number = getStyle("cornerRadius");
+				
+				if (cornerRadius != cr)
+				{
+					cornerRadius = cr;
+					fill_up.radiusX = cornerRadius;
+					fill_over.radiusX = cornerRadius;
+					fill_down.radiusX = cornerRadius;
+					fill_disabled.radiusX = cornerRadius;
+				}
+				
+				/*var larguraIcone:int = 0;
+				if (iconFont.text != null && iconFont.text != "")
+				{
+					larguraIcone = 60;
+				}*/
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+			private var cornerRadius:Number = 2;
+			
+			private static function getFontSize(height:int):int
+			{
+				var altura:int = 15;
+				
+				switch (height)
+				{
+					case ButtonSizeEnum.Large:
+						altura = 17;
+						break;
+					case ButtonSizeEnum.Normal:
+						altura = 14;
+						break;
+					case ButtonSizeEnum.Small:
+						altura = 13;
+						break;
+					case ButtonSizeEnum.ExtraSmall:
+						altura = 12;
+						break;
+				}
+				
+				return altura;
+			}
+			
+			private static function getIconSize(height:int):int
+			{
+				var altura:int = 17;
+				
+				switch (height)
+				{
+					case ButtonSizeEnum.Large:
+						altura = 19;
+						break;
+					case ButtonSizeEnum.Normal:
+						altura = 17;
+						break;
+					case ButtonSizeEnum.Small:
+						altura = 15;
+						break;
+					case ButtonSizeEnum.ExtraSmall:
+						altura = 12;
+						break;
+				}
+				
+				return altura;
+			}
+			
+		]]>        
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" id="stateUp"/>
+		<s:State name="over" id="stateOver"/>
+		<s:State name="down" id="stateDown"/>
+		<s:State name="disabled" id="stateDisabled"/>
+	</s:states>
+	
+	
+	<!-- layer 2: fill -->
+	<!--- @private -->
+	<s:Rect id="fill_up" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="up">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateUp)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_over" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="over">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateOver)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_down" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateDown)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_disabled" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="disabled">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(hostComponent.brand,stateDisabled)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 8: text -->
+	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
+	<s:HGroup verticalAlign="middle" verticalCenter="0" horizontalAlign="center" horizontalCenter="0" left="10" right="10" top="2" bottom="2">
+		<s:Label id="iconFont" color="0xFFFFFF" color.disabled="0xE3E3E3" text="{hostComponent.iconFont}"
+				 textAlign="left" fontSize="{getIconSize(hostComponent.height)}" fontFamily="FontAwesome"
+				 maxDisplayedLines="1" includeInLayout="{hostComponent.iconFont != null}"
+				 horizontalCenter="0" verticalCenter="0" verticalAlign="middle">
+		</s:Label>
+		
+		<s:Label id="labelDisplay" color="0xFFFFFF" color.disabled="0xE3E3E3"
+				 textAlign="center" fontSize="{getFontSize(hostComponent.height)}" fontFamily="Lato"
+				 maxDisplayedLines="1"
+				 horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
+		</s:Label>
+	</s:HGroup>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ButtonSkin.mxml b/frameworks/projects/flatspark/src/skins/ButtonSkin.mxml
new file mode 100644
index 0000000..aa0f9c5
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ButtonSkin.mxml
@@ -0,0 +1,184 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the Spark Button component.  
+
+@see spark.components.Button
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
+			 xmlns:s="library://ns.adobe.com/flex/spark" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
+			 minWidth="21" minHeight="21" height="{ButtonSizeEnum.Normal}"
+			 alpha.disabled="0.5">
+	<fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata>
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[         
+			import flatSpark.enums.BrandColorEnum;
+			import flatSpark.enums.ButtonColorEnum;
+			import flatSpark.enums.ButtonSizeEnum;
+			import flatSpark.enums.TextInputSizeEnum;
+			import flatSpark.utils.ColorUtils;
+
+			/* Define the skin elements that should not be colorized. 
+			For button, the graphics are colorized but the label is not. */
+			static private const exclusions:Array = ["iconDisplay", "labelDisplay"];
+			
+			/** 
+			 * @private
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				hostComponent.useHandCursor=true;
+				hostComponent.buttonMode=true;
+				super.initializationComplete();
+			}  
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{
+				var cr:Number = getStyle("cornerRadius");
+				
+				if (cornerRadius != cr)
+				{
+					cornerRadius = cr;
+					fill_up.radiusX = cornerRadius;
+					fill_over.radiusX = cornerRadius;
+					fill_down.radiusX = cornerRadius;
+					fill_disabled.radiusX = cornerRadius;
+				}
+				
+				/*var larguraIcone:int = 0;
+				if (iconFont.text != null && iconFont.text != "")
+				{
+					larguraIcone = 60;
+				}*/
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+			private var cornerRadius:Number = 2;
+			
+			private static function getFontSize(height:int):int
+			{
+				var altura:int = 15;
+				
+				switch (height)
+				{
+					case ButtonSizeEnum.Large:
+						altura = 17;
+						break;
+					case ButtonSizeEnum.Normal:
+						altura = 14;
+						break;
+					case ButtonSizeEnum.Small:
+						altura = 13;
+						break;
+					case ButtonSizeEnum.ExtraSmall:
+						altura = 12;
+						break;
+				}
+				
+				return altura;
+			}
+			
+			private static function getIconSize(height:int):int
+			{
+				var altura:int = 17;
+				
+				switch (height)
+				{
+					case ButtonSizeEnum.Large:
+						altura = 19;
+						break;
+					case ButtonSizeEnum.Normal:
+						altura = 17;
+						break;
+					case ButtonSizeEnum.Small:
+						altura = 15;
+						break;
+					case ButtonSizeEnum.ExtraSmall:
+						altura = 12;
+						break;
+				}
+				
+				return altura;
+			}
+			
+		]]>        
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" id="stateUp"/>
+		<s:State name="over" id="stateOver"/>
+		<s:State name="down" id="stateDown"/>
+		<s:State name="disabled" id="stateDisabled"/>
+	</s:states>
+	
+	
+	<!-- layer 2: fill -->
+	<!--- @private -->
+	<s:Rect id="fill_up" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="up">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(BrandColorEnum.Default,stateUp)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_over" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="over">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(BrandColorEnum.Default,stateOver)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_down" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="down">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(BrandColorEnum.Default,stateDown)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	<s:Rect id="fill_disabled" left="1" right="1" top="1" bottom="1" radiusX="6" includeIn="disabled">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.ButtonColor(BrandColorEnum.Default,stateDisabled)}"/>
+		</s:fill>
+	</s:Rect>
+	
+	
+	<!-- layer 8: text -->
+	<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay  -->
+	<s:Label id="labelDisplay" color="0xFFFFFF" color.disabled="0xE3E3E3" right="10" left="10"
+			 textAlign="center" fontSize="{getFontSize(hostComponent.height)}" fontFamily="Lato"
+			 maxDisplayedLines="1"
+			 horizontalCenter="0" verticalCenter="1" verticalAlign="middle">
+	</s:Label>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/CheckBoxSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/CheckBoxSkin.mxml b/frameworks/projects/flatspark/src/skins/CheckBoxSkin.mxml
new file mode 100644
index 0000000..6b8f68c
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/CheckBoxSkin.mxml
@@ -0,0 +1,136 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+<!--- The default skin class for the Spark CheckBox component.  
+
+      @see spark.components.CheckBox
+        
+      @langversion 3.0
+      @playerversion Flash 10
+      @playerversion AIR 1.5
+      @productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5" useHandCursor="true">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.CheckBox")]
+    ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For button, the graphics are colorized but the label is not. */
+        static private const exclusions:Array = ["labelDisplay", "check"];
+
+       /** 
+        * @private 
+        */     
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
+        static private const symbols:Array = [];
+
+       /**
+        * @private 
+        */
+        override public function get symbolItems():Array {return symbols};
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+    </fx:Script>
+    
+    <fx:Script>
+        <![CDATA[
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+            /** 
+             * @private 
+             */     
+            private static const focusExclusions:Array = ["labelDisplay"];
+
+            /**
+             * @private
+             */
+            override public function get focusSkinExclusions():Array { return focusExclusions;};
+        ]]>
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="up" />
+        <s:State name="over" stateGroups="overStates" />
+        <s:State name="down" stateGroups="downStates" />
+        <s:State name="disabled" stateGroups="disabledStates" />
+        <s:State name="upAndSelected" stateGroups="selectedStates" />
+        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
+        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
+        <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" />
+    </s:states>
+    
+    <s:Group verticalCenter="0" width="22" height="22" layoutDirection="ltr">
+        <!-- fill -->
+        <s:Rect left="1" top="1" right="1" bottom="1" radiusX="6">
+            <s:fill>
+                <s:SolidColor color="{ColorUtils.Silver}"/>
+            </s:fill>
+        </s:Rect>
+		
+		<s:Rect left="1" top="1" right="1" bottom="1" radiusX="6" includeIn="overStates">
+			<s:fill>
+				<s:SolidColor color="{ColorUtils.Asbestos}"/>
+			</s:fill>
+		</s:Rect>
+		
+		<s:Rect left="1" top="1" right="1" bottom="1" radiusX="6" includeIn="selectedStates">
+			<s:fill>
+				<s:SolidColor color="{ColorUtils.Turquoise}"/>
+			</s:fill>
+		</s:Rect>
+        
+		<!--<s:Label fontFamily="FontAwesome" fontSize="12" color="#FFFFFF" text="{AwesomeUtils.fa_check}" includeIn="overStates"
+				 itemCreationPolicy="immediate" verticalAlign="middle" horizontalCenter="0" verticalCenter="0" alpha="0.75"
+				 />-->
+		
+		<s:Label fontFamily="FontAwesome" fontSize="12" color="#FFFFFF" text="{AwesomeUtils.fa_check}" includeIn="selectedStates"
+				 itemCreationPolicy="immediate" verticalAlign="middle" horizontalCenter="0" verticalCenter="0"
+				 />
+    </s:Group>
+
+    <!-- Label -->
+    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
+    <s:Label id="labelDisplay"
+             textAlign="start" color="{ColorUtils.WetAsphalt}"
+             verticalAlign="middle" fontSize="14"
+             maxDisplayedLines="1" fontFamily="Lato" paddingLeft="30"
+             left="0" right="0" top="3" bottom="3" verticalCenter="2" />
+
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ComboBoxButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ComboBoxButtonSkin.mxml b/frameworks/projects/flatspark/src/skins/ComboBoxButtonSkin.mxml
new file mode 100644
index 0000000..3d15498
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ComboBoxButtonSkin.mxml
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the anchor button on a Spark ComboBox component.  
+
+@see spark.components.ComboBox        
+@see spark.skins.spark.ComboBoxSkin
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="19" minHeight="23">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+			/* Define the skin elements that should not be colorized. 
+			For dropDownList buttons, the graphics are colorized but the arrow is not. */
+			static private const exclusions:Array = [];
+			
+			private var cornerRadius:Number = 4;
+			
+			/** 
+			 * @private
+			 */     
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+			/* Define the symbol fill items that should be colored by the "symbolColor" style. */
+			static private const symbols:Array = [];
+			
+			/**
+			 * @private 
+			 */
+			override public function get symbolItems():Array {return symbols};
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{				
+				fill.bottomRightRadiusX = fill.topRightRadiusX = cornerRadius;
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+		]]>
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: fill -->
+	<!--- @private -->
+	<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.Turquoise}" />
+		</s:fill>
+	</s:Rect>
+	
+	<!--- The arrow graphic displayed in the anchor button. -->
+	<s:Label right="17" top="6" fontFamily="FontAwesome" fontSize="19" color="#FFFFFF" text="{AwesomeUtils.fa_caret_down}" includeIn="up, down, over, disabled"
+			 itemCreationPolicy="immediate" verticalAlign="middle" verticalCenter="0" />
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ComboBoxSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ComboBoxSkin.mxml b/frameworks/projects/flatspark/src/skins/ComboBoxSkin.mxml
new file mode 100644
index 0000000..f98f46e
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ComboBoxSkin.mxml
@@ -0,0 +1,127 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<!--- The default skin class for the Spark ComboBox component. 
+The skin for the anchor button for a ComboBox component 
+is defined by the ComboBoxButtonSkin class.  The skin for the text input
+is defined by the ComboBoxTextInputSkin class.
+
+@see spark.components.ComboBox        
+@see spark.skins.spark.ComboBoxButtonSkin
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  height="41"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" initialize="initializeHandler(event)"> 
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.ComboBox")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[       
+			import mx.events.FlexEvent;
+			
+			import flatSpark.utils.ColorUtils;
+			private var paddingChanged:Boolean;
+			private var cornerRadiusChanged:Boolean;
+			private var cornerRadius:Number = 4;            
+			
+			/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+			static private const contentFill:Array = [];
+			
+			override public function get contentItems():Array {return contentFill; }
+			
+			protected function initializeHandler(event:FlexEvent):void
+			{
+				// TODO Auto-generated method stub
+				hostComponent.useHandCursor=true;
+				hostComponent.buttonMode=true;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="open" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!--- 
+	The PopUpAnchor control that opens the drop-down list. 
+	
+	<p>In a custom skin class that uses transitions, set the 
+	<code>itemDestructionPolicy</code> property to <code>never</code>.</p>
+	-->
+	<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
+				   left="0" right="0" top="{hostComponent.height+4}" bottom="0" itemDestructionPolicy="auto"
+				   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
+		
+		<!--- 
+		This includes borders, background colors, scrollers, and filters. 
+		@copy spark.components.supportClasses.DropDownListBase#dropDown
+		-->
+		<s:Group id="dropDown">
+			
+			<s:Path top="2" right="20" data="M 0 10 L 10 0 L 20 10 Z">
+				<s:fill>
+					<s:SolidColor color="{ColorUtils.WetAsphalt}" alpha="1"/>
+				</s:fill>
+			</s:Path>
+			
+			<!-- fill -->
+			<!--- Defines the appearance of drop-down list's background fill. -->
+			<s:Rect id="background" left="0" right="0" top="10" bottom="0" radiusX="4" >
+				<s:fill>
+					<s:SolidColor id="bgFill" color="{ColorUtils.WetAsphalt}" />
+				</s:fill>
+			</s:Rect>
+			<!--- @private -->
+			<s:Scroller id="scroller" left="4" top="14" right="4" bottom="4" hasFocusableChildren="false" minViewportInset="1" skinClass="flatSpark.skins.ScrollerSkin">
+				<!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
+				<s:DataGroup id="dataGroup" itemRenderer="flatSpark.itemRenderers.DefaultItemRenderer">
+					<s:layout>
+						<s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
+					</s:layout>
+				</s:DataGroup> 
+			</s:Scroller>
+		</s:Group>
+	</s:PopUpAnchor>
+	
+	<!---  The default skin is ComboBoxButtonSkin. 
+	@copy spark.components.supportClasses.DropDownListBase#openButton
+	@see spark.skins.spark.ComboBoxButtonSkin -->
+	<s:Button id="openButton" width="29" right="0" top="0" bottom="0" focusEnabled="false"
+			  skinClass="flatSpark.skins.ComboBoxButtonSkin" tabEnabled="false" />  
+	<!--- @copy spark.components.ComboBox#textInput -->
+	<s:TextInput id="textInput" enabled.disabled="false"
+				 left="0" right="29" top="0" bottom="0" 
+				 skinClass="flatSpark.skins.ComboBoxTextInputSkin"/> 
+	
+</s:SparkSkin>
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/ComboBoxTextInputSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/ComboBoxTextInputSkin.mxml b/frameworks/projects/flatspark/src/skins/ComboBoxTextInputSkin.mxml
new file mode 100644
index 0000000..d4b1ce9
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/ComboBoxTextInputSkin.mxml
@@ -0,0 +1,218 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<!--- The default skin class for the textInput of a Spark ComboBox component.  
+
+@see spark.components.ComboBox
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
+			 blendMode="normal">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.TextInput")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+			
+			private var paddingChanged:Boolean;
+			private var cornerRadius:Number = 4;
+			
+			/* Define the skin elements that should not be colorized. */
+			static private const exclusions:Array = ["background", "textDisplay", "promptDisplay"];
+			
+			/**
+			 * @private
+			 */   
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+			/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+			static private const contentFill:Array = [];
+			
+			/**
+			 *  @private
+			 */
+			override public function get contentItems():Array {return contentFill; }
+			
+			/**
+			 *  @private
+			 */
+			override protected function commitProperties():void
+			{
+				super.commitProperties();
+				
+				if (paddingChanged)
+				{
+					updatePadding();
+					paddingChanged = false;
+				}
+			}
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{				
+				if (promptDisplay)
+				{
+					promptDisplay.setLayoutBoundsSize(unscaledWidth, unscaledHeight);
+					promptDisplay.setLayoutBoundsPosition(8, 0);
+				}
+				
+				background.bottomLeftRadiusX = background.topLeftRadiusX = cornerRadius;
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+			/**
+			 *  @private
+			 */
+			private function updatePadding():void
+			{
+				if (!textDisplay)
+					return;
+				
+				// Push padding styles into the textDisplay
+				var padding:Number;
+				
+				padding = getStyle("paddingLeft");
+				if (textDisplay.getStyle("paddingLeft") != padding)
+					textDisplay.setStyle("paddingLeft", padding);
+				
+				padding = getStyle("paddingTop");
+				if (textDisplay.getStyle("paddingTop") != padding)
+					textDisplay.setStyle("paddingTop", padding);
+				
+				padding = getStyle("paddingRight");
+				if (textDisplay.getStyle("paddingRight") != padding)
+					textDisplay.setStyle("paddingRight", padding);
+				
+				padding = getStyle("paddingBottom");
+				if (textDisplay.getStyle("paddingBottom") != padding)
+					textDisplay.setStyle("paddingBottom", padding);
+				
+				if (!promptDisplay)
+					return;
+				
+				padding = getStyle("paddingLeft");
+				if (promptDisplay.getStyle("paddingLeft") != padding)
+					promptDisplay.setStyle("paddingLeft", padding);
+				
+				padding = getStyle("paddingTop");
+				if (promptDisplay.getStyle("paddingTop") != padding)
+					promptDisplay.setStyle("paddingTop", padding);
+				
+				padding = getStyle("paddingRight");
+				if (promptDisplay.getStyle("paddingRight") != padding)
+					promptDisplay.setStyle("paddingRight", padding);
+				
+				padding = getStyle("paddingBottom");
+				if (promptDisplay.getStyle("paddingBottom") != padding)
+					promptDisplay.setStyle("paddingBottom", padding);
+			}
+			
+			/**
+			 *  @private
+			 */
+			override public function styleChanged(styleProp:String):void
+			{
+				var allStyles:Boolean = !styleProp || styleProp == "styleName";
+				
+				super.styleChanged(styleProp);
+				
+				if (allStyles || styleProp.indexOf("padding") == 0)
+				{
+					paddingChanged = true;
+					invalidateProperties();
+				}
+			}
+		]]>
+	</fx:Script>
+	
+	<fx:Script>
+		<![CDATA[
+			/** 
+			 * @private 
+			 */     
+			private static const focusExclusions:Array = ["textDisplay"];
+			
+			/**
+			 *  @private
+			 */
+			override public function get focusSkinExclusions():Array { return focusExclusions;};
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal"/>
+		<s:State name="disabled" stateGroups="disabledStates"/>
+		<s:State name="normalWithPrompt"/>
+		<s:State name="disabledWithPrompt" stateGroups="disabledStates"/>
+	</s:states>
+	
+	<!-- fill -->
+	<!--- Defines the appearance of the TextInput component's background. -->
+	<s:Rect id="background" left="0" right="0" top="0" bottom="0">
+		<s:fill>
+			<s:SolidColor id="bgFill" color="{ColorUtils.Turquoise}" />
+		</s:fill>
+	</s:Rect>
+	
+	<!-- text -->
+	<!--- @copy spark.components.supportClasses.SkinnableTextBase#textDisplay -->
+	<!--	<s:RichEditableText id="textDisplay"
+	lineBreak="explicit"
+	widthInChars="10" verticalCenter="0"/>-->
+	<s:RichEditableText id="textDisplay" verticalAlign="middle" lineBreak="explicit" backgroundColor="{ColorUtils.Turquoise}"
+						widthInChars="10" fontFamily="Lato" fontWeight="normal" color="0xFFFFFF"
+						left="8" right="8" top="8" bottom="8" fontSize="15" verticalCenter="0"/>
+	<!--- Defines the Label that is used for prompt text. The includeInLayout property is false so the prompt text does not affect measurement. -->
+	<!--	<s:Label id="promptDisplay" maxDisplayedLines="1"
+	verticalAlign="middle"
+	mouseEnabled="false" mouseChildren="false"
+	includeIn="normalWithPrompt,disabledWithPrompt" 
+	includeInLayout="false"/>-->
+	<s:Label id="promptDisplay" maxDisplayedLines="1"
+			 verticalAlign="middle" fontFamily="Lato" fontSize="15" fontWeight="normal" fontStyle="italic" color="{ColorUtils.Clouds}"
+			 mouseEnabled="false" mouseChildren="false" left="8" right="8" top="8" bottom="8" verticalCenter="0"
+			 includeIn="normalWithPrompt,disabledWithPrompt" 
+			 includeInLayout="false"/>
+	
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/DropDownListButtonSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/DropDownListButtonSkin.mxml b/frameworks/projects/flatspark/src/skins/DropDownListButtonSkin.mxml
new file mode 100644
index 0000000..3215dfb
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/DropDownListButtonSkin.mxml
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the anchor button on a Spark DropDownList component.  
+
+@see spark.components.DropDownList        
+@see spark.skins.spark.DropDownListSkin
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="19" minHeight="23">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.AwesomeUtils;
+			import flatSpark.utils.ColorUtils;
+			
+			/* Define the skin elements that should not be colorized. 
+			For dropDownList buttons, the graphics are colorized but the arrow is not. */
+			static private const exclusions:Array = [];
+			
+			/**
+			 * @private
+			 */  
+			override public function get colorizeExclusions():Array {return exclusions;}
+			
+			/* Define the symbol fill items that should be colored by the "symbolColor" style. */
+			static private const symbols:Array = [];
+			
+			/**
+			 * @private
+			 */
+			override public function get symbolItems():Array {return symbols};
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+			
+			/**
+			 *  @private
+			 */
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{				
+				fill.radiusX = cornerRadius;
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+			private var cornerRadius:Number = 4;
+			
+		]]>
+	</fx:Script>
+	
+	<!-- states -->
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- layer 1: fill -->
+	<!--- @private -->
+	<s:Rect id="fill" left="0" right="0" top="0" bottom="0">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.Turquoise}" />
+		</s:fill>
+	</s:Rect>
+	
+	<!--- The arrow graphic displayed in the anchor button. -->
+	<s:Label right="17" top="6" fontFamily="FontAwesome" fontSize="19" color="#FFFFFF" text="{AwesomeUtils.fa_caret_down}" includeIn="up, down, over, disabled"
+			 itemCreationPolicy="immediate" verticalAlign="middle" verticalCenter="0" />
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/DropDownListSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/DropDownListSkin.mxml b/frameworks/projects/flatspark/src/skins/DropDownListSkin.mxml
new file mode 100644
index 0000000..ced72c7
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/DropDownListSkin.mxml
@@ -0,0 +1,143 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+<!--- The default skin class for the Spark DropDownList component. 
+The skin for the anchor button for a DropDownList component 
+is defined by the DropDownListButtonSkin class.  
+
+<p>In a custom skin class that uses transitions, set the 
+<code>itemDestructionPolicy</code> property to <code>never</code>
+for the PopUpAnchor defined by the popUp property.</p>      
+
+@see spark.components.DropDownList        
+@see spark.skins.spark.DropDownListButtonSkin
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  height="41"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled=".5" initialize="initializeHandler(event)"> 
+	
+	<!-- host component -->
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.DropDownList")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[            
+			import mx.events.FlexEvent;
+			
+			import flatSpark.itemRenderers.DefaultItemRenderer;
+			import flatSpark.utils.ColorUtils;
+			
+			/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
+			static private const contentFill:Array = [];
+			
+			/**
+			 * @private
+			 */
+			override public function get contentItems():Array { return contentFill; }
+			
+			override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
+			{		
+				//background.bottomRightRadiusX = background.topRightRadiusX = cornerRadius;
+
+				
+				super.updateDisplayList(unscaledWidth, unscaledHeight);
+			}
+			
+			private var cornerRadius:Number = 4;
+			
+			protected function initializeHandler(event:FlexEvent):void
+			{
+				// TODO Auto-generated method stub
+				hostComponent.useHandCursor=true;
+				hostComponent.buttonMode=true;
+			}
+			
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="normal" />
+		<s:State name="open" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!--- 
+	The PopUpAnchor control that opens the drop-down list. 
+	
+	<p>In a custom skin class that uses transitions, set the 
+	<code>itemDestructionPolicy</code> property to <code>never</code>.</p>
+	-->
+	<s:PopUpAnchor id="popUp"  displayPopUp.normal="false" displayPopUp.open="true" includeIn="open"
+				   left="0" right="0" top="{hostComponent.height+4}" bottom="0" itemDestructionPolicy="auto"
+				   popUpPosition="below" popUpWidthMatchesAnchorWidth="true">
+		
+		<!--- 
+		This includes borders, background colors, scrollers, and filters.
+		@copy spark.components.supportClasses.DropDownListBase#dropDown
+		-->
+		<s:Group id="dropDown">
+			
+			<s:Path top="2" right="20" data="M 0 10 L 10 0 L 20 10 Z">
+				<s:fill>
+					<s:SolidColor color="{ColorUtils.WetAsphalt}" alpha="1"/>
+				</s:fill>
+			</s:Path>
+			
+			<!-- fill -->
+			<!--- Defines the appearance of drop-down list's background fill. -->
+			<s:Rect id="background" left="0" right="0" top="10" bottom="0" radiusX="4" >
+				<s:fill>
+					<s:SolidColor id="bgFill" color="{ColorUtils.WetAsphalt}" />
+				</s:fill>
+			</s:Rect>
+			
+			<!--- @private -->
+			<s:Scroller id="scroller" left="4" top="14" right="4" bottom="4" hasFocusableChildren="false" minViewportInset="1" skinClass="flatSpark.skins.ScrollerSkin">
+				<!--- @copy spark.components.SkinnableDataContainer#dataGroup-->
+				<s:DataGroup id="dataGroup" itemRenderer="flatSpark.itemRenderers.DefaultItemRenderer">
+					<s:layout>
+						<s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="1" requestedMaxRowCount="6"/>
+					</s:layout>
+				</s:DataGroup> 
+			</s:Scroller>
+		</s:Group>
+	</s:PopUpAnchor>
+	
+	<!---  The default skin is DropDownListButtonSkin. 
+	@copy spark.components.supportClasses.DropDownListBase#openButton
+	@see spark.skins.spark.DropDownListButtonSkin -->
+	<s:Button id="openButton" width="29" left="0" right="0" top="0" bottom="0" focusEnabled="false" tabEnabled="false"
+			  skinClass="flatSpark.skins.DropDownListButtonSkin" />  
+	
+	<!--- @copy spark.components.DropDownList#labelDisplay -->
+
+	<s:Label id="labelDisplay" verticalAlign="middle" maxDisplayedLines="1"  backgroundColor="{ColorUtils.Turquoise}"
+			 mouseEnabled="false" mouseChildren="false" fontFamily="Lato" fontWeight="normal" color="0xFFFFFF" 
+			 left="10" right="37" top="8" bottom="8" fontSize="15" verticalCenter="0"></s:Label> 
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/HScrollBarSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/HScrollBarSkin.mxml b/frameworks/projects/flatspark/src/skins/HScrollBarSkin.mxml
new file mode 100644
index 0000000..82099b7
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/HScrollBarSkin.mxml
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the Spark HScrollBar component. The thumb and track skins are defined by the
+HScrollBarThumbSkin and HScrollBarTrackSkin classes, respectively.  
+
+       @see spark.components.HScrollBar
+       @see spark.skins.spark.HScrollBarThumbSkin
+       @see spark.skins.spark.HScrollBarTrackSkin
+        
+      @langversion 3.0
+      @playerversion Flash 10
+      @playerversion AIR 1.5
+      @productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="35" minHeight="15" 
+    alpha.disabled="0.5" alpha.inactive="0.5">
+
+    <fx:Metadata>
+    <![CDATA[ 
+        /** 
+         * @copy spark.skins.spark.ApplicationSkin#hostComponent
+         */
+        [HostComponent("spark.components.HScrollBar")]
+    ]]>
+    </fx:Metadata> 
+    
+    <fx:Script fb:purpose="styling">
+        /* Define the skin elements that should not be colorized. 
+           For scroll bar, the skin itself is colorized but the individual parts are not. */
+        static private const exclusions:Array = ["track", "thumb"];
+
+        /**
+         * @private
+         */
+        override public function get colorizeExclusions():Array {return exclusions;}
+        
+        /**
+         * @private
+         */
+        override protected function initializationComplete():void
+        {
+            useChromeColor = true;
+            super.initializationComplete();
+        }
+    </fx:Script>
+    
+    <s:states>
+        <s:State name="normal" />
+        <s:State name="disabled" />
+        <s:State name="inactive" />
+    </s:states>
+    
+    <!---  The default skin class is HScrollBarTrackSkin.    
+            @copy spark.components.supportClasses.TrackBase#track
+            @see spark.skins.spark.HScrollBarTrackSkin -->
+    <s:Button id="track" left="0" right="0" width="54" 
+              focusEnabled="false" tabEnabled="false"
+              skinClass="flatSpark.skins.HScrollBarTrackSkin" />
+
+    <!---  The default skin class is HScrollBarThumbSkin. 
+            @copy spark.components.supportClasses.TrackBase#thumb
+            @see spark.skins.spark.HScrollBarThumbSkin -->
+    <s:Button id="thumb" 
+              focusEnabled="false" visible.inactive="false" tabEnabled="false"
+              skinClass="flatSpark.skins.HScrollBarThumbSkin" />
+
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/HScrollBarThumbSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/HScrollBarThumbSkin.mxml b/frameworks/projects/flatspark/src/skins/HScrollBarThumbSkin.mxml
new file mode 100644
index 0000000..df5adf4
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/HScrollBarThumbSkin.mxml
@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the thumb of a Spark HScrollBar component.  
+
+@see spark.components.HScrollBar
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="up" />
+		<s:State name="over" />
+		<s:State name="down" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- background -->
+	<s:Rect left="0" top="0" right="0" bottom="0" minWidth="8" minHeight="8" radiusX="2" alpha="0.5">
+		<s:stroke>
+			<s:SolidColorStroke color="{ColorUtils.MidnightBlue}" weight="1"/>
+		</s:stroke>
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.Silver}" />
+		</s:fill>
+	</s:Rect>
+</s:SparkSkin>

http://git-wip-us.apache.org/repos/asf/flex-sdk/blob/e72f72e3/frameworks/projects/flatspark/src/skins/HScrollBarTrackSkin.mxml
----------------------------------------------------------------------
diff --git a/frameworks/projects/flatspark/src/skins/HScrollBarTrackSkin.mxml b/frameworks/projects/flatspark/src/skins/HScrollBarTrackSkin.mxml
new file mode 100644
index 0000000..a9b8340
--- /dev/null
+++ b/frameworks/projects/flatspark/src/skins/HScrollBarTrackSkin.mxml
@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+
+-->
+
+
+<!--- The default skin class for the track on a Spark HScrollBar component.  
+
+@see spark.components.HScrollBar
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+-->
+<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
+			 xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
+	
+	<fx:Metadata>
+		<![CDATA[ 
+		/** 
+		* @copy spark.skins.spark.ApplicationSkin#hostComponent
+		*/
+		[HostComponent("spark.components.Button")]
+		]]>
+	</fx:Metadata> 
+	
+	<fx:Script fb:purpose="styling">
+		<![CDATA[
+			import flatSpark.utils.ColorUtils;
+			
+			/**
+			 * @private
+			 */
+			override protected function initializationComplete():void
+			{
+				useChromeColor = true;
+				super.initializationComplete();
+			}
+		]]>
+	</fx:Script>
+	
+	<s:states>
+		<s:State name="up" />
+		<s:State name="down" />
+		<s:State name="over" />
+		<s:State name="disabled" />
+	</s:states>
+	
+	<!-- border/fill -->
+	<s:Rect top="0" bottom="0" left="0" right="0" minWidth="8" minHeight="8" radiusX="2">
+		<s:fill>
+			<s:SolidColor color="{ColorUtils.MidnightBlue}" />
+		</s:fill>
+	</s:Rect>
+</s:SparkSkin>