gs theme color test

themesample.php

<div id="themecolors">
    <hr>
    <style>

    #themecolors{
        width:100%;
    }

    .tags {
        float:left;
        font-weight: bold;
    }

    .tags .label {
        height: 24px;
        line-height:22px;
        width:200px;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }


    .tags.titles .label{
        /*background:#A2A2A2;*/
        color: darkgray;
        width:auto;
    }

    .tags.titles .label-light{
        background:whitesmoke;
    }

    .tags.code .label {
    	text-align:left !important;
    	font-weight: normal !important;
    	width:100%;
    }

    .tags div{
    	height:20px;
    }

    </style>
    <h2>Theme Colors</h2>
    <div class="tags titles">    	
        <div class ="label label-light">shade names</div>
        <div class ="label">darkest</div>
        <div class ="label">darker</div>
        <div class ="label">dark</div>
        <div class ="label">middle</div>
        <div class ="label">light</div>
        <div class ="label">lighter</div>
        <div class ="label">lightest</div>
        <div class ="label">secondary-lightest</div>
        <div class ="label">secondary-darkest</div>
   </div>
    <div class="tags back">
    	<div class ="label label-light">*-back</div>
        <div class ="label darkest-back darkest-debug"></div>
        <div class ="label darker-back darker-debug"></div>
        <div class ="label dark-back dark-debug"></div>
        <div class ="label middle-back middle-debug"></div>
        <div class ="label light-back light-debug"></div>
        <div class ="label dark-color lighter-back lighter-debug"></div>
        <div class ="label dark-color lightest-back lightest-debug"></div>
        <div class ="label secondary-lightest-back lightest-debug"></div>
        <div class ="label secondary-darkest-back darkest-debug"> </div>
    </div>
    <div class="tags color">
        <div class ="label label-light">*-color , *-border</div>
        <div class ="label label-light darkest-color darkest-border darkest-debug"></div>
        <div class ="label label-light darker-color darker-border darker-debug"></div>
        <div class ="label label-light dark-color dark-border dark-debug"></div>
        <div class ="label label-light middle-color middle-border middle-debug"></div>
        <div class ="label label-light light-color light-border light-debug"></div>
        <div class ="label label-light lighter-color lighter-border lighter-debug"></div>
        <div class ="label label-light lightest-color lightest-border lightest-debug"></div>
        <div class ="label label-light secondary-lightest-color secondary-lightest-border lightest-debug"></div>
        <div class ="label label-light secondary-darkest-color secondary-darkest-border darkest-debug"></div>     
    </div>
    <div class="tags titles">
        <div class="label label-light">var names</div>
        <div class="label">primary_0</div>
        <div class="label">primary_1</div>
        <div class="label">primary_2</div>
        <div class="label">primary_3</div>
        <div class="label">primary_4</div>
        <div class="label">primary_5</div>
        <div class="label">primary_6</div>
        <div class="label">secondary_0</div>
        <div class="label">secondary_1</div>
    </div>
    <div class="clear"></div>
    <br/><br/>
    <h4>Classes / Modifiers</h4>
    <div class="tags code">
        <div class="label label-ghost darkest-color">"primary_n-back" ,   "primary_n-color" , "primary_n-border" / "* secondary_n-*"</div>
        <div class="label label-ghost darkest-color">"level-back" , "level-color" , "level-border" / "secondary-level-*"</div>
	</div>

    <div class="clear"></div>
	<br/></br>
    <h2>Labels</h2>
    <div class="tags titles">    	
        <div class ="label">label (default)</div>
        <div class ="label">label-ok</div>
        <div class ="label">label-warn</div>
        <div class ="label">label-error</div>
        <div class ="label">label-info</div>
        <div class ="label">label-light</div>
        <div class ="label">label-medium</div>
        <div class ="label">label-ghost</div>
    </div>
    <div class="tags back">
        <div class ="label darkest-color label-default-debug"></div>
        <div class ="label label-ok label-ok-debug"></div>
        <div class ="label label-warn label-warn-debug"></div>
        <div class ="label label-error label-error-debug"></div>
        <div class ="label label-info label-info-debug"></div>
        <div class ="label label-light label-light-debug"></div>
        <div class ="label label-medium label-medium-debug"></div>
        <div class ="label label-ghost label-ghost-debug darkest-color">inherit</div>
    </div>
    <div class="clear"></div>
</div>