title: Defining custom css properties in Flex 4
body: <p>I'm creating a Flex theme and I'm defining the default component appearance. All buttons should have a default skin. A special style can be applied to the buttons using styleName, which defines a set of colors to the button skin.</p>
  
  <p>I have created a Spark Button skin as follows:</p>
  
  <pre><code>&lt;!-- ButtonSkin.mxml --&gt;
  
  &lt;s:Skin 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="24" alpha.disabled="0.5"&gt;
  
      &lt;fx:Metadata&gt;
          &lt;![CDATA[
              [HostComponent("spark.components.Button")]
              [Style(name="backgroundGradient", states="up, over, down", format="Array", inherit="yes")]
          ]]&gt;
      &lt;/fx:Metadata&gt;
  
      &lt;fx:Script&gt;
          &lt;![CDATA[
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
                  var backgroundGradient:Array = getStyle("backgroundGradient");
                  topGradientEntry.color = backgroundGradient[0];
                  bottomGradientEntry.color = backgroundGradient[1];
  
                  super.updateDisplayList(unscaledWidth, unscaledHeight);
              }
          ]]&gt;
      &lt;/fx:Script&gt;
  
      &lt;s:states&gt;
          &lt;s:State name="up" /&gt;
          &lt;s:State name="over" /&gt;
          &lt;s:State name="down" /&gt;
          &lt;s:State name="disabled" /&gt;
      &lt;/s:states&gt;
  
      &lt;!-- shapes using topGradientEntry.color and bottomGradientEntry.color --&gt;
  &lt;/s:Skin&gt;
  </code></pre>
  
  <p>set the main css file like this:</p>
  
  <pre><code>/** default.css **/
  
  s|Button {
      skinClass: ClassReference('mytheme.skins.ButtonSkin');
      fontWeight: bold;
  }
  
  skins|ButtonSkin {
      backgroundGradient: 0x000000, 0xFFFFFF;
  }
  
  s|Button.btn-primary:up {
      backgroundGradient: 0x000000, 0xFFFFFF;
  }
  s|Button.btn-primary:over {
      backgroundGradient: 0x000000, 0xFFFFFF;
  }
  s|Button.btn-primary:down {
      backgroundGradient: 0x000000, 0xFFFFFF;
  }
  
  s|Button.btn-inverted:up {
      backgroundGradient: 0xFFFFFF, 0x000000;
  }
  s|Button.btn-inverted:over {
      backgroundGradient: 0xFFFFFF, 0x000000;
  }
  s|Button.btn-inverted:down {
      backgroundGradient: 0xFFFFFF, 0x000000;
  }
  </code></pre>
  
  <p>The application would style the buttons like this:</p>
  
  <pre><code>&lt;!-- Main.mxml --&gt;
  
  &lt;s:Button label="Default" x="10" y="10" width="75" height="26"/&gt;
  &lt;s:Button label="Button" x="110" y="10" width="75" height="26" styleName="btn-success"/&gt;
  &lt;s:Button label="Primary" x="210" y="10" width="75" height="26" styleName="btn-primary"/&gt;
  </code></pre>
  
  <p>But I'm getting the error "CSS Value for 'backgroundGradient' not supported" on all occurrences.</p>