The separation and normalization went pretty well and reduced my css doc by about 1200 lines, however there were still elements of font control that i could not external, mostly in components like buttons. I didnt want to have the redundancy and overhead of

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

CustomButton
{
	font-family : 	"Myriad Pro Bold";
	font-weight :	normal;
	font-style : 	normal;
	font-size :	11;
	font-sharpness : 	0;
	font-thickness : 	0;
	letter-spacing :	.1;
	font-anti-alias-type :	advanced;
	font-grid-fit-type :	subpixel;
	text-align :	center;
	color :	#ff3300;
	textRollOverColor :	#ffffff;
	textSelectedColor :	#CC0000;
	fillAlphas : 1, 1, 1, 1;
	fillColors : #ffffff, #ffffff, #0099cc, #0099cc;
}

I was looking for a way to separate the design from the code in my styles similar to how the datagrid has references to text css

1

<mx:DataGrid headerStyleName="customHeaderStyleName"

so I looked around for a way to pull the text styles out of different components so the ux group can easily styles the different fonts in the application without having to worry about the actual component. After looking around I discovered most components can override the textStyle or similar such as

1
2
3
4
5
6
7
8
9
10
11
12
13

public class CustomButton extends Button
{
	public function CustomButton()
	{
		super();
	}
 
	override protected function commitProperties():void
	{
		var textFieldStyleName:String = getStyle("buttonLabelStyleName");
		textField.styleName = textFieldStyleName;
	}
}

this works exactly as i had hoped, now the ux group can set fonts independent of the components and spend the needed time exacting their fonts.

You can see a sample below, side click for the source.