Theme

<h2>Theme name: corporate</h2>
<ul class="theme-colours">
    <li class="theme-colours__item" style="background-color:#ededed" data-name="$grey--superlight" data-value="#ededed">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#e1e1e1" data-name="$grey--light" data-value="#e1e1e1">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#aeaeae" data-name="$grey" data-value="#aeaeae">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#808080" data-name="$grey--dark" data-value="#808080">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#404041" data-name="$grey--superdark" data-value="#404041">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#333333" data-name="$black--off" data-value="#333333">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#000" data-name="$black" data-value="#000">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#fff" data-name="$white" data-value="#fff">&nbsp;</li>
    <li class="theme-colours__item" style="background-color:#fd7300" data-name="$brand--prime" data-value="#fd7300">&nbsp;</li>
</ul>
<h2>Theme name: {{themeName}}</h2>
<ul class="theme-colours">
	{{#each colours}}
	<li class="theme-colours__item" style="background-color:{{value}}" data-name="{{variable}}" data-value="{{value}}">&nbsp;</li>
	{{/each}}
</ul>	
{
    "themeName": "corporate",
    "colours": [
        {
            "name": "very light grey",
            "value": "#ededed",
            "variable": "$grey--superlight"
        },
        {
            "name": "light grey",
            "value": "#e1e1e1",
            "variable": "$grey--light"
        },
        {
            "name": "grey",
            "value": "#aeaeae",
            "variable": "$grey"
        },
        {
            "name": "dark grey",
            "value": "#808080",
            "variable": "$grey--dark"
        },
        {
            "name": "very dark grey",
            "value": "#404041",
            "variable": "$grey--superdark"
        },
        {
            "name": "off-black",
            "value": "#333333",
            "variable": "$black--off"
        },
        {
            "name": "black",
            "value": "#000",
            "variable": "$black"
        },
        {
            "name": "white",
            "value": "#fff",
            "variable": "$white"
        },
        {
            "name": "orange",
            "value": "#fd7300",
            "variable": "$brand--prime"
        }
    ]
}
// $grey--superlight:#ededed;
// $grey--light: #e1e1e1;
// $grey: #aeaeae;
// $grey--dark: #808080;
// $grey--superdark: #404041;

// $black: #000;
// $black--off: #333333;
// $white: #fff;

// $brand--prime: #fd7300;

See sass partial in here for sass variables.