Why is there an Alpha on ActionBar Icons?

Question

I am trying to style my TabbedViewNavigator TabBar by creating a custom ButtonBar skin. This is the code of my ButtonBar skin:

 <?xml version="1.0" encoding="utf-8"?>

 <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">

<fx:Metadata>[HostComponent("spark.components.ButtonBar")]</fx:Metadata> 
<fx:Script fb:purpose="styling">
    <![CDATA[
        import mx.core.IFlexDisplayObject;
        import mx.core.ILayoutElement;
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            layoutContents(unscaledWidth, unscaledHeight);
        }
        protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            setElementPosition(scroller, 0, 0);
            setElementSize(scroller, unscaledWidth, unscaledHeight);
            var backgroundAlphaValue:* = getStyle("backgroundAlpha");
            var backgroundAlpha:Number = (backgroundAlphaValue === undefined)
                ? 1 : getStyle("backgroundAlpha");

            graphics.beginFill(getStyle("chromeColor"), backgroundAlpha);
            graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
            graphics.endFill();
        }

        protected function setElementPosition(element:Object, x:Number, y:Number):void
        {
            if (element is ILayoutElement)
            {
                ILayoutElement(element).setLayoutBoundsPosition(x, y, false);
            }
            else if (element is IFlexDisplayObject)
            {
                IFlexDisplayObject(element).move(x, y);   
            }
            else
            {
                element.x = x;
                element.y = y;
            }
        }
        protected function setElementSize(element:Object, width:Number, height:Number):void
        {
            if (element is ILayoutElement)
            {
                ILayoutElement(element).setLayoutBoundsSize(width, height, false);
            }
            else if (element is IFlexDisplayObject)
            {
                IFlexDisplayObject(element).setActualSize(width, height);
            }
            else
            {
                element.width = width;
                element.height = height;
            }
        }
    ]]>
</fx:Script>

<s:states>
    <s:State name="normal" />
    <s:State name="disabled" />
</s:states>

<fx:Declarations>
    <!--- 
        @copy spark.components.ButtonBar#firstButton
        @default spark.skins.spark.ButtonBarFirstButtonSkin
        @see spark.skins.spark.ButtonBarFirstButtonSkin
    -->
    <fx:Component id="firstButton">
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" /><!--css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarFirstButtonSkin-->
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#middleButton
        @default spark.skins.spark.ButtonBarMiddleButtonSkin
        @see spark.skins.spark.ButtonBarMiddleButtonSkin
    -->
    <fx:Component id="middleButton" >
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" /><!-- css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarMiddleButtonSkin-->
    </fx:Component>

    <!--- 
        @copy spark.components.ButtonBar#lastButton
        @default spark.skins.spark.ButtonBarLastButtonSkin
        @see spark.skins.spark.ButtonBarLastButtonSkin
    -->
    <fx:Component id="lastButton" >
        <s:ButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" /><!--css.nxInspect.mobile.redCss.skins.nxButtonBarSkin.ButtonBarLastButtonSkin-->
    </fx:Component>

</fx:Declarations>

<!--- @copy spark.components.SkinnableDataContainer#dataGroup -->
<s:Scroller id="scroller"  interactionMode="touch"
    skinClass="css.nxInspect.mobile.blackgoldCss.skins.nxScrollerTabBarSkin.ScrollerTabBarSkin">
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <!--<s:ButtonBarHorizontalLayout gap="-1"/>-->
            <s:HorizontalLayout useVirtualLayout="false" gap="0" variableColumnWidth="false"
                                columnWidth="400" verticalAlign="justify"/>
        </s:layout>
    </s:DataGroup>  
</s:Scroller>

I cannot figure why the button icons have an alpha!:

Answer 1

Ok,

I made my own ButtonBarButtonSkins and added.

 static private const exclusions:Array = ["labelDisplay",'iconDisplay'];

With this I managed to get the right color for my icons.