I want to create a Flickr group that we can upload them to as a reference. This is a really rough little html page I build that shows all of the color values I found in the 3.6 default theme for Windows as a table. It also shows the two basic Mozilla OS fonts, "message-box" and "menu" as well as a sample button. Before we start collecting screen-shots, I'd love some feedback on the test, should I add a few more objects? are there Linux or Mac-specific Mozilla OS colors you would like to see tested?
OLD TEST
Code: Select all
<html>
<!-- Beginning of HTML -->
<title>Mozilla OS Colors Test</title>
<body ><center>
<br>
Mozilla OS Colors from Firefox 3.6 Strata theme.<br>
<br>
<table bgcolor="black"><tbody style="font: message-box;">
<tr> <td style="background-color:ThreeDHighlight; color:ThreeDDarkShadow;" colSpan="3">
ThreeDHighlight</td></tr>
<tr><td style="background-color:ThreeDLightShadow; color:ThreeDDarkShadow;" colSpan="3">
ThreeDLightShadow</td></tr>
<tr><td style="background-color:ThreeDFace; color:ThreeDDarkShadow;" colSpan="3">
ThreeDFace</td></tr>
<tr> <td style="background-color:ThreeDShadow; color:ThreeDHighlight;" colSpan="3">
ThreeDShadow</td></tr>
<tr><td style="background-color:ThreeDDarkShadow; color:ThreeDHighlight;" colSpan="3">
ThreeDDarkShadow</td></tr>
<tr><td style="background-color:ButtonShadow; color:ThreeDHighlight;" colSpan="3">
ButtonShadow</td></tr>
<tr> <td style="background-color:ActiveBorder; color:black;" colSpan="3">
ActiveBorder</td></tr>
<tr height="5px"> <td style="background-color:black;" colSpan="3"></td></tr>
<tr>
<td style="background-color:-moz-Dialog; color:-moz-DialogText;" colSpan="2">
-moz-Dialog / -moz-DialogText</td>
<td style="background-color:-moz-DialogText;" width="1*"></td>
</tr>
<tr >
<td style="background-color:ButtonFace; color:ButtonText;" colSpan="2">
ButtonFace / ButtonText</td>
<td style="background-color:ButtonText;" width="1*"></td>
</tr>
<tr>
<td style="background-color:Highlight; color:HighlightText;" colSpan="2">
Highlight / HighlightText</td>
<td style="background-color:HighlightText;" width="1*"></td>
</tr>
<tr>
<td style="background-color:-moz-menuhover; color:-moz-menuhovertext; font: menu;" colSpan="2">
-moz-menuhover / -moz-menuhovertext</td>
<td style="background-color:-moz-menuhovertext; color:-moz-menuhover; font: menu;" width="1*">
font: Menu</td>
</tr>
<tr>
<td style="background-color:-moz-cellhighlight; color:-moz-cellhighlighttext; font: menu;"
colSpan="2">
-moz-cellhighlight / -moz-cellhighlighttext</td>
<td style="background-color:-moz-cellhighlighttext; color:-moz-cellhighlight; font: menu;"
width="1*">
font: Menu</td>
</tr>
<tr>
<td style="background-color:Menu; color:MenuText; font: menu;" colSpan="2">
Menu / MenuText </td>
<td style="background-color:MenuText; color:Menu; font: menu;" width="1*">
font: Menu</td>
</tr>
<tr>
<td style="background-color:-moz-Field; color:-moz-FieldText;" colSpan="2">
-moz-Field / -moz-FieldText</td>
<td style="background-color:-moz-FieldText;" width="1*"></td>
</tr>
<tr>
<td style="background-color:Window; color:WindowText;" colSpan="2">
Window / WindowText</td>
<td style="background-color:WindowText;" width="1*"></td>
</tr>
<tr>
<td style="background-color:InfoBackground; color:InfoText;" colSpan="2">
InfoBackground / InfoText</td>
<td style="background-color:InfoText;" width="1*"></td>
</tr>
<tr height="5px"> <td style="background-color:black;" colSpan="3"></td></tr>
<tr>
<td style="background-color:-moz-menuhover; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
<td style="background-color:-moz-menubarhovertext; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
<td style="background-color:-moz-menubarhovertext; color:-moz-menubarhovertext;" width="1*">
-moz-menubarhovertext</td>
</tr>
<tr>
<td style="background-color:white; color:-moz-nativehyperlinktext;" width="1*">
-moz-nativehyperlinktext</td>
<td style="background-color:-moz-nativehyperlinktext;" colSpan="2"></td>
</tr>
<tr>
<td style="background-color:white; color:GrayText;" width="1*">
GrayText</td>
<td style="background-color:GrayText;" colSpan="2"></td>
</tr>
<tr>
<td style="background-color:ActiveCaption; color:InactiveCaption;" colSpan="3">
ActiveCaption</td>
</tr>
<tr>
<td style="background-color:InactiveCaption; color:ActiveCaption;" colSpan="3">
InactiveCaption</td>
</tr>
</tbody></table>
<br>
<button>Sample OS Button</button><br>
</center></body>
</html>
EDIT March 2011: I'm updating this test again to include all of the colors I missed. I think it's organized a bit better too.
Code: Select all
<html>
<!-- Beginning of HTML -->
<title>Mozilla OS System Colors Test</title>
<body><center>
<br>
<table bgcolor="black" width="800px"><tbody style="font: message-box;">
<tr>
<td style="background-color:white; color:black; font-size:120%" colSpan="5" align="center" >
System colors from: <a href="https://developer.mozilla.org/en/CSS/color_value">https://developer.mozilla.org/en/CSS/color_value</a></td>
<td style="background-color:white; color:black; width="1*" align="center">
<button>Sample OS Button</button>
</td>
</tr>
<tr>
<td style="background-color:Background; color:Window;" colSpan="6" align="center">
Background</td>
</tr>
<tr>
<td style="background-color:InactiveCaption; color:InactiveCaptionText;" width="1*" align="right">
InactiveCaption</td>
<td style="background-color:InactiveCaptionText; color:InactiveCaption;" width="1*">
InactiveCaptionText</td>
<td style="background-color:ActiveBorder; color:WindowText;" width="1*" align="center">
ActiveBorder</td>
<td style="background-color:InactiveBorder; color:WindowText;" width="1*" align="center">
InactiveBorder</td>
<td style="background-color:Scrollbar; color:WindowText;" width="1*" align="center">
Scrollbar</td>
<td style="background-color:AppWorkspace; color:Window;" width="1*" align="center">
AppWorkspace</td>
</tr>
<tr>
<td style="background-color:ActiveCaption; color:CaptionText;" width="1*" align="right">
ActiveCaption</td>
<td style="background-color:CaptionText; color:ActiveCaption;" width="1*">
CaptionText</td>
<td style="background-color:Window; color:WindowText;" width="1*" align="right">
Window</td>
<td style="background-color:WindowText; color:Window;" width="1*">
WindowText</td>
<td style="background-color:WindowFrame; color:Window;"colSpan="2" align="center">
WindowFrame</td>
</tr>
<tr>
<td style="background-color:Highlight; color:HighlightText;" width="1*" align="right">
Highlight</td>
<td style="background-color:HighlightText; color:Highlight;" width="1*">
HighlightText</td>
<td style="background-color:-moz-Field; color:-moz-FieldText;" width="1*" align="right">
-moz-Field</td>
<td style="background-color:-moz-FieldText; color:-moz-Field;" width="1*">
-moz-FieldText</td>
<td style="background-color:GrayText; color:Window;" colSpan="2" align="center">
GrayText</td>
</tr>
<tr>
<td style="background-color:-moz-MenuHover; color:-moz-MenuHoverText; font: menu;" width="1*" align="right">
-moz-MenuHover</td>
<td style="background-color:-moz-MenuHoverText; color:-moz-MenuHover; font: menu;" width="1*">
-moz-MenuHoverText</td>
<td style="background-color:Menu; color:MenuText; font: menu;" width="1*" align="right">
Menu</td>
<td style="background-color:MenuText; color:Menu; font: menu;" width="1*">
MenuText</td>
<td style="background-color:-moz-MenuBarText; color:-moz-Dialog; font: menu;" width="1*" align="center">
-moz-MenuBarText</td>
<td style="background-color:-moz-MenuBarHoverText; color:-moz-Dialog; font: menu;" width="1*" align="center">
-moz-MenuBarHoverText</td>
</tr>
<tr>
<td style="background-color:-moz-CellHighlight; color:-moz-CellHighlightText;" width="1*" align="right">
-moz-CellHighlight</td>
<td style="background-color:-moz-CellHighlightText; color:-moz-CellHighlight;" width="1*">
-moz-CellHighlightText</td>
<td style="background-color:-moz-Combobox; color:-moz-ComboboxText;" width="1*" align="right">
-moz-Combobox</td>
<td style="background-color:-moz-ComboboxText; color:-moz-Combobox;" width="1*">
-moz-ComboboxText</td>
<td style="background-color:-moz-EvenTreeRow; color:-moz-FieldText;" width="1*" align="center">
-moz-EvenTreeRow</td>
<td style="background-color:-moz-OddTreeRow; color:-moz-FieldText;" width="1*" align="center">
-moz-OddTreeRow</td>
</tr>
<tr>
<td style="background-color:-moz-html-CellHighlight; color:-moz-html-CellHighlightText;" width="1*" align="right">
-moz-html-CellHighlight</td>
<td style="background-color:-moz-html-CellHighlightText; color:-moz-html-CellHighlight;" width="1*">
-moz-html-CellHighlightText</td>
<td style="background-color:InfoBackground; color:InfoText;" width="1*" align="right">
InfoBackground</td>
<td style="background-color:InfoText; color:InfoBackground;" width="1*">
InfoText</td>
<td style="background-color:-moz-nativehyperlinktext; color:-moz-Dialog;" colSpan="2" align="center">
-moz-nativehyperlinktext</td>
</tr>
<tr>
<td style="background-color:-moz-ButtonHoverFace; color:-moz-ButtonHoverText;" width="1*" align="right">
-moz-ButtonHoverFace</td>
<td style="background-color:-moz-ButtonHoverText; color:-moz-ButtonHoverFace;" width="1*" >
-moz-ButtonHoverText</td>
<td style="background-color:-moz-Dialog; color:-moz-DialogText;" width="1*" align="right">
-moz-Dialog</td>
<td style="background-color:-moz-DialogText; color:-moz-Dialog;" width="1*">
-moz-DialogText</td>
<td style="background-color:-moz-ButtonDefault; color:ButtonHighlight;" colSpan="2" align="center">
-moz-ButtonDefault</td>
</tr>
<tr>
<td style="background-color:ThreeDHighlight; color:ThreeDDarkShadow;" width="1*" align="center">
ThreeDHighlight</td>
<td style="background-color:ThreeDLightShadow; color:ThreeDDarkShadow;" width="1*" align="center">
ThreeDLightShadow</td>
<td style="background-color:ThreeDFace; color:ButtonText;" colSpan="2" align="center">
ThreeDFace</td>
<td style="background-color:ThreeDShadow; color:ThreeDHighlight;" width="1*" align="center">
ThreeDShadow</td>
<td style="background-color:ThreeDDarkShadow; color:ThreeDHighlight;" width="1*" align="center">
ThreeDDarkShadow</td>
</tr>
<tr>
<td style="background-color:ButtonHighlight; color:ButtonShadow;" colSpan="2" align="center">
ButtonHighlight</td>
<td style="background-color:ButtonFace; color:ButtonText;" width="1*" align="right">
ButtonFace</td>
<td style="background-color:ButtonText; color:ButtonFace;" width="1*">
ButtonText</td>
<td style="background-color:ButtonShadow; color:ButtonHighlight;" colSpan="2" align="center">
ButtonShadow</td>
</tr>
</tbody></table>
</center></body>
</html>