Color Picker List Button Skin

ColorPickerListButtonSkin.mxml

<?xml version="1.0" encoding="utf-8"?> 
<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="24" minHeight="24"> 
	<fx:Metadata>
		<![CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("spark.components.Button")]
		]]>
	</fx:Metadata> 
	
	<fx:Script fb:purpose="styling">
		/* 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 = []//"icon"];
		
		/**
		 * @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 = ["arrowFill1", "arrowFill2"];
		
		/**
		 * @private 
		 */
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}
		
		/**
		 *  @private
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
		{
			var cr:Number = getStyle("cornerRadius");
			
			if (cornerRadius != cr)
			{
				cornerRadius = cr;
				shadow.radiusX = cornerRadius;
				fill.radiusX = cornerRadius;
				lowlight.radiusX = cornerRadius;
				highlight.radiusX = cornerRadius;
				border.radiusX = cornerRadius;
			}
			
			if (highlightStroke) highlightStroke.radiusX = cornerRadius;
			if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
			if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;
			
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
		
		private var cornerRadius:Number = 2;
	</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: shadow -->
	<!--- @private -->
	<s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0x000000" 
								 color.down="0xFFFFFF"
								 alpha="0.01"
								 alpha.down="0" />
				<s:GradientEntry color="0x000000" 
								 color.down="0xFFFFFF" 
								 alpha="0.07"
								 alpha.down="0.5" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 2: fill -->
	<!--- @private -->
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF" 
								 color.over="0xBBBDBD" 
								 color.down="0xAAAAAA" 
								 alpha="0.85" />
				<s:GradientEntry color="0xD8D8D8" 
								 color.over="0x9FA0A1" 
								 color.down="0x929496" 
								 alpha="0.85" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 3: fill lowlight -->
	<!--- @private -->
	<s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
		<s:fill>
			<s:LinearGradient rotation="270">
				<s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
				<s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
				<s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 4: fill highlight -->
	<!--- @private -->
	<s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.0"
								 alpha="0.33" 
								 alpha.over="0.22" 
								 alpha.down="0.12"/>
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.48"
								 alpha="0.33"
								 alpha.over="0.22"
								 alpha.down="0.12" />
				<s:GradientEntry color="0xFFFFFF"
								 ratio="0.48001"
								 alpha="0" />
			</s:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<!-- layer 5: highlight stroke (all states except down) -->
	<!--- @private -->
	<s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" excludeFrom="down" radiusX="2">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
				<s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 6: highlight stroke (down state only) -->
	<!--- @private -->
	<s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
				<s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
				<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
				<s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
				<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	<!--- @private -->
	<s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
				<s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
	<!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
	<!--- @private -->
	<s:Rect id="border" left="0" right="0" top="0" bottom="0" width="20" height="20" radiusX="2">
		<s:stroke>
			<s:LinearGradientStroke rotation="90" weight="1">
				<s:GradientEntry color="0x000000" 
								 alpha="0.5625"
								 alpha.down="0.6375" />
				<s:GradientEntry color="0x000000" 
								 alpha="0.75" 
								 alpha.down="0.85" />
			</s:LinearGradientStroke>
		</s:stroke>
	</s:Rect>
	
</s:SparkSkin>