<section class="colors">
<h4 class="heading">UHasselt Red</h4>
<div class="colors">
<div class="item">
<div class="color color--red default"></div>
<span class="color-description">default<br />#E03131</span>
</div>
<div class="item">
<div class="color color--red mod-100"></div>
<span class="color-description">#F9D8D6</span>
</div>
<div class="item">
<div class="color color--red mod-200"></div>
<span class="color-description">#F3B1AD</span>
</div>
<div class="item">
<div class="color color--red mod-300"></div>
<span class="color-description">#EC8A83</span>
</div>
<div class="item">
<div class="color color--red mod-400"></div>
<span class="color-description">#E6635A</span>
</div>
<div class="item">
<div class="color color--red mod-500"></div>
<span class="color-description">#E03131</span>
</div>
<div class="item">
<div class="color color--red mod-600"></div>
<span class="color-description">#A62219</span>
</div>
<div class="item">
<div class="color color--red mod-700"></div>
<span class="color-description">#771812</span>
</div>
<div class="item">
<div class="color color--red mod-800"></div>
<span class="color-description">#470F0B</span>
</div>
<div class="item">
<div class="color color--red mod-900"></div>
<span class="color-description">#180504</span>
</div>
</div>
<h4 class="heading">UHasselt Black</h4>
<div class="colors">
<div class="item">
<div class="color color--black default"></div>
<span class="color-description">default<br />#000000</span>
</div>
<div class="item">
<div class="color color--black mod-100"></div>
<span class="color-description">#E3E3E3</span>
</div>
<div class="item">
<div class="color color--black mod-200"></div>
<span class="color-description">#D4D4D4</span>
</div>
<div class="item">
<div class="color color--black mod-300"></div>
<span class="color-description">#BDBDBD</span>
</div>
<div class="item">
<div class="color color--black mod-400"></div>
<span class="color-description">#A5A5A5</span>
</div>
<div class="item">
<div class="color color--black mod-500"></div>
<span class="color-description">#8E8E8E</span>
</div>
<div class="item">
<div class="color color--black mod-600"></div>
<span class="color-description">#5E5E5E</span>
</div>
<div class="item">
<div class="color color--black mod-700"></div>
<span class="color-description">#474747</span>
</div>
<div class="item">
<div class="color color--black mod-800"></div>
<span class="color-description">#2F2F2F</span>
</div>
<div class="item">
<div class="color color--black mod-900"></div>
<span class="color-description">#181818</span>
</div>
</div>
<h4 class="heading">UHasselt Gray</h4>
<div class="colors">
<div class="item">
<div class="color color--gray default"></div>
<span class="color-description">default<br />#E3E3E3</span>
</div>
<div class="item">
<div class="color color--gray mod-100"></div>
<span class="color-description">#FBFBFB</span>
</div>
<div class="item">
<div class="color color--gray mod-200"></div>
<span class="color-description">#F9F9F9</span>
</div>
<div class="item">
<div class="color color--gray mod-300"></div>
<span class="color-description">#F7F7F7</span>
</div>
<div class="item">
<div class="color color--gray mod-400"></div>
<span class="color-description">#F6F6F6</span>
</div>
<div class="item">
<div class="color color--gray mod-500"></div>
<span class="color-description">#E3E3E3</span>
</div>
<div class="item">
<div class="color color--gray mod-600"></div>
<span class="color-description">#F2F2F2</span>
</div>
<div class="item">
<div class="color color--gray mod-700"></div>
<span class="color-description">#F0F0F0</span>
</div>
<div class="item">
<div class="color color--gray mod-800"></div>
<span class="color-description">#EEEEEE</span>
</div>
<div class="item">
<div class="color color--gray mod-900"></div>
<span class="color-description">#E3E3E3</span>
</div>
</div>
<h4 class="heading">UHasselt Faculteit Architectuur</h4>
<div class="colors">
<div class="item">
<div class="color color--orange default"></div>
<span class="color-description">default<br />#EF7E29</span>
</div>
<div class="item">
<div class="color color--orange mod-100"></div>
<span class="color-description">#FAE4D3</span>
</div>
<div class="item">
<div class="color color--orange mod-200"></div>
<span class="color-description">#F6C9A7</span>
</div>
<div class="item">
<div class="color color--orange mod-300"></div>
<span class="color-description">#F1AD7A</span>
</div>
<div class="item">
<div class="color color--orange mod-400"></div>
<span class="color-description">#ED924E</span>
</div>
<div class="item">
<div class="color color--orange mod-500"></div>
<span class="color-description">#EF7E29</span>
</div>
<div class="item">
<div class="color color--orange mod-600"></div>
<span class="color-description">#D16616</span>
</div>
<div class="item">
<div class="color color--orange mod-700"></div>
<span class="color-description">#B15612</span>
</div>
<div class="item">
<div class="color color--orange mod-800"></div>
<span class="color-description">#91470F</span>
</div>
<div class="item">
<div class="color color--orange mod-900"></div>
<span class="color-description">#70370C</span>
</div>
</div>
<h4 class="heading">UHasselt Faculteit Bedrijfseconomische Wetenschappen</h4>
<div class="colors">
<div class="item">
<div class="color color--blue default"></div>
<span class="color-description">default<br />#009FE9</span>
</div>
<div class="item">
<div class="color color--blue mod-100"></div>
<span class="color-description">#C8EDFF</span>
</div>
<div class="item">
<div class="color color--blue mod-200"></div>
<span class="color-description">#90DCFF</span>
</div>
<div class="item">
<div class="color color--blue mod-300"></div>
<span class="color-description">#59CAFF</span>
</div>
<div class="item">
<div class="color color--blue mod-400"></div>
<span class="color-description">#21B9FF</span>
</div>
<div class="item">
<div class="color color--blue mod-500"></div>
<span class="color-description">#009FE9</span>
</div>
<div class="item">
<div class="color color--blue mod-600"></div>
<span class="color-description">#007FBA</span>
</div>
<div class="item">
<div class="color color--blue mod-700"></div>
<span class="color-description">#005F8C</span>
</div>
<div class="item">
<div class="color color--blue mod-800"></div>
<span class="color-description">#00405D</span>
</div>
<div class="item">
<div class="color color--blue mod-900"></div>
<span class="color-description">#00202F</span>
</div>
</div>
<h4 class="heading">UHasselt Faculteit Ingenieurswetenschappen</h4>
<div class="colors">
<div class="item">
<div class="color color--turquoise default"></div>
<span class="color-description">default<br />#67C1B9</span>
</div>
<div class="item">
<div class="color color--turquoise mod-100"></div>
<span class="color-description">#E1F3F1</span>
</div>
<div class="item">
<div class="color color--turquoise mod-200"></div>
<span class="color-description">#C2E6E3</span>
</div>
<div class="item">
<div class="color color--turquoise mod-300"></div>
<span class="color-description">#A4DAD5</span>
</div>
<div class="item">
<div class="color color--turquoise mod-400"></div>
<span class="color-description">#85CDC7</span>
</div>
<div class="item">
<div class="color color--turquoise mod-500"></div>
<span class="color-description">#67C1B9</span>
</div>
<div class="item">
<div class="color color--turquoise mod-600"></div>
<span class="color-description">#45A89F</span>
</div>
<div class="item">
<div class="color color--turquoise mod-700"></div>
<span class="color-description">#337E78</span>
</div>
<div class="item">
<div class="color color--turquoise mod-800"></div>
<span class="color-description">#225450</span>
</div>
<div class="item">
<div class="color color--turquoise mod-900"></div>
<span class="color-description">#112A28</span>
</div>
</div>
<h4 class="heading">UHasselt Faculteit Geneeskunde en levenswetenschappen</h4>
<div class="colors">
<div class="item">
<div class="color color--purple default"></div>
<span class="color-description">default<br />#AB2183</span>
</div>
<div class="item">
<div class="color color--purple mod-100"></div>
<span class="color-description">#F5CCE9</span>
</div>
<div class="item">
<div class="color color--purple mod-200"></div>
<span class="color-description">#EB98D3</span>
</div>
<div class="item">
<div class="color color--purple mod-300"></div>
<span class="color-description">#E165BD</span>
</div>
<div class="item">
<div class="color color--purple mod-400"></div>
<span class="color-description">#D732A7</span>
</div>
<div class="item">
<div class="color color--purple mod-500"></div>
<span class="color-description">#AB2183</span>
</div>
<div class="item">
<div class="color color--purple mod-600"></div>
<span class="color-description">#891A69</span>
</div>
<div class="item">
<div class="color color--purple mod-700"></div>
<span class="color-description">#67144F</span>
</div>
<div class="item">
<div class="color color--purple mod-800"></div>
<span class="color-description">#440D34</span>
</div>
<div class="item">
<div class="color color--purple mod-900"></div>
<span class="color-description">#11030D</span>
</div>
</div>
<h4 class="heading">UHasselt School voor Mobiliteitswetenschappen</h4>
<div class="colors">
<div class="item">
<div class="color color--lime default"></div>
<span class="color-description">default<br />#C4D600</span>
</div>
<div class="item">
<div class="color color--lime mod-100"></div>
<span class="color-description">#FAFFC4</span>
</div>
<div class="item">
<div class="color color--lime mod-200"></div>
<span class="color-description">#F5FF89</span>
</div>
<div class="item">
<div class="color color--lime mod-300"></div>
<span class="color-description">#F0FF4D</span>
</div>
<div class="item">
<div class="color color--lime mod-400"></div>
<span class="color-description">#EBFF12</span>
</div>
<div class="item">
<div class="color color--lime mod-500"></div>
<span class="color-description">#C4D600</span>
</div>
<div class="item">
<div class="color color--lime mod-600"></div>
<span class="color-description">#9DAB00</span>
</div>
<div class="item">
<div class="color color--lime mod-700"></div>
<span class="color-description">#768000</span>
</div>
<div class="item">
<div class="color color--lime mod-800"></div>
<span class="color-description">#4E5600</span>
</div>
<div class="item">
<div class="color color--lime mod-900"></div>
<span class="color-description">#272B00</span>
</div>
</div>
<h4 class="heading">UHasselt Faculteit Wetenschappen</h4>
<div class="colors">
<div class="item">
<div class="color color--deepblue default"></div>
<span class="color-description">default<br />#006EB8</span>
</div>
<div class="item">
<div class="color color--deepblue mod-100"></div>
<span class="color-description">#BEE5FF</span>
</div>
<div class="item">
<div class="color color--deepblue mod-200"></div>
<span class="color-description">#7DCBFF</span>
</div>
<div class="item">
<div class="color color--deepblue mod-300"></div>
<span class="color-description">#3BB0FF</span>
</div>
<div class="item">
<div class="color color--deepblue mod-400"></div>
<span class="color-description">#0095F9</span>
</div>
<div class="item">
<div class="color color--deepblue mod-500"></div>
<span class="color-description">#006EB8</span>
</div>
<div class="item">
<div class="color color--deepblue mod-600"></div>
<span class="color-description">#005893</span>
</div>
<div class="item">
<div class="color color--deepblue mod-700"></div>
<span class="color-description">#00426E</span>
</div>
<div class="item">
<div class="color color--deepblue mod-800"></div>
<span class="color-description">#002C4A</span>
</div>
<div class="item">
<div class="color color--deepblue mod-900"></div>
<span class="color-description">#001625</span>
</div>
</div>
</div>
<section class="colors">
<h4 class="heading">UHasselt Red</h4>
<div class="colors">
{{#each colors.red}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Black</h4>
<div class="colors">
{{#each colors.black}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Gray</h4>
<div class="colors">
{{#each colors.gray}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Faculteit Architectuur</h4>
<div class="colors">
{{#each colors.orange}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Faculteit Bedrijfseconomische Wetenschappen</h4>
<div class="colors">
{{#each colors.blue}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Faculteit Ingenieurswetenschappen</h4>
<div class="colors">
{{#each colors.turquoise}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Faculteit Geneeskunde en levenswetenschappen</h4>
<div class="colors">
{{#each colors.purple}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt School voor Mobiliteitswetenschappen</h4>
<div class="colors">
{{#each colors.lime}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
<h4 class="heading">UHasselt Faculteit Wetenschappen</h4>
<div class="colors">
{{#each colors.deepblue}}
<div class="item">
<div class="color color--{{ color }} {{#if modifier}}{{modifier}}{{/if}}"></div>
<span class="color-description">{{{ description }}}</span>
</div>
{{/each}}
</div>
</div>
{
"colors": {
"red": [
{
"color": "red",
"modifier": "default",
"description": "default<br/>#E03131"
},
{
"color": "red",
"modifier": "mod-100",
"description": "#F9D8D6"
},
{
"color": "red",
"modifier": "mod-200",
"description": "#F3B1AD"
},
{
"color": "red",
"modifier": "mod-300",
"description": "#EC8A83"
},
{
"color": "red",
"modifier": "mod-400",
"description": "#E6635A"
},
{
"color": "red",
"modifier": "mod-500",
"description": "#E03131"
},
{
"color": "red",
"modifier": "mod-600",
"description": "#A62219"
},
{
"color": "red",
"modifier": "mod-700",
"description": "#771812"
},
{
"color": "red",
"modifier": "mod-800",
"description": "#470F0B"
},
{
"color": "red",
"modifier": "mod-900",
"description": "#180504"
}
],
"black": [
{
"color": "black",
"modifier": "default",
"description": "default<br/>#000000"
},
{
"color": "black",
"modifier": "mod-100",
"description": "#E3E3E3"
},
{
"color": "black",
"modifier": "mod-200",
"description": "#D4D4D4"
},
{
"color": "black",
"modifier": "mod-300",
"description": "#BDBDBD"
},
{
"color": "black",
"modifier": "mod-400",
"description": "#A5A5A5"
},
{
"color": "black",
"modifier": "mod-500",
"description": "#8E8E8E"
},
{
"color": "black",
"modifier": "mod-600",
"description": "#5E5E5E"
},
{
"color": "black",
"modifier": "mod-700",
"description": "#474747"
},
{
"color": "black",
"modifier": "mod-800",
"description": "#2F2F2F"
},
{
"color": "black",
"modifier": "mod-900",
"description": "#181818"
}
],
"gray": [
{
"color": "gray",
"modifier": "default",
"description": "default<br/>#E3E3E3"
},
{
"color": "gray",
"modifier": "mod-100",
"description": "#FBFBFB"
},
{
"color": "gray",
"modifier": "mod-200",
"description": "#F9F9F9"
},
{
"color": "gray",
"modifier": "mod-300",
"description": "#F7F7F7"
},
{
"color": "gray",
"modifier": "mod-400",
"description": "#F6F6F6"
},
{
"color": "gray",
"modifier": "mod-500",
"description": "#E3E3E3"
},
{
"color": "gray",
"modifier": "mod-600",
"description": "#F2F2F2"
},
{
"color": "gray",
"modifier": "mod-700",
"description": "#F0F0F0"
},
{
"color": "gray",
"modifier": "mod-800",
"description": "#EEEEEE"
},
{
"color": "gray",
"modifier": "mod-900",
"description": "#E3E3E3"
}
],
"orange": [
{
"color": "orange",
"modifier": "default",
"description": "default<br/>#EF7E29"
},
{
"color": "orange",
"modifier": "mod-100",
"description": "#FAE4D3"
},
{
"color": "orange",
"modifier": "mod-200",
"description": "#F6C9A7"
},
{
"color": "orange",
"modifier": "mod-300",
"description": "#F1AD7A"
},
{
"color": "orange",
"modifier": "mod-400",
"description": "#ED924E"
},
{
"color": "orange",
"modifier": "mod-500",
"description": "#EF7E29"
},
{
"color": "orange",
"modifier": "mod-600",
"description": "#D16616"
},
{
"color": "orange",
"modifier": "mod-700",
"description": "#B15612"
},
{
"color": "orange",
"modifier": "mod-800",
"description": "#91470F"
},
{
"color": "orange",
"modifier": "mod-900",
"description": "#70370C"
}
],
"blue": [
{
"color": "blue",
"modifier": "default",
"description": "default<br/>#009FE9"
},
{
"color": "blue",
"modifier": "mod-100",
"description": "#C8EDFF"
},
{
"color": "blue",
"modifier": "mod-200",
"description": "#90DCFF"
},
{
"color": "blue",
"modifier": "mod-300",
"description": "#59CAFF"
},
{
"color": "blue",
"modifier": "mod-400",
"description": "#21B9FF"
},
{
"color": "blue",
"modifier": "mod-500",
"description": "#009FE9"
},
{
"color": "blue",
"modifier": "mod-600",
"description": "#007FBA"
},
{
"color": "blue",
"modifier": "mod-700",
"description": "#005F8C"
},
{
"color": "blue",
"modifier": "mod-800",
"description": "#00405D"
},
{
"color": "blue",
"modifier": "mod-900",
"description": "#00202F"
}
],
"turquoise": [
{
"color": "turquoise",
"modifier": "default",
"description": "default<br/>#67C1B9"
},
{
"color": "turquoise",
"modifier": "mod-100",
"description": "#E1F3F1"
},
{
"color": "turquoise",
"modifier": "mod-200",
"description": "#C2E6E3"
},
{
"color": "turquoise",
"modifier": "mod-300",
"description": "#A4DAD5"
},
{
"color": "turquoise",
"modifier": "mod-400",
"description": "#85CDC7"
},
{
"color": "turquoise",
"modifier": "mod-500",
"description": "#67C1B9"
},
{
"color": "turquoise",
"modifier": "mod-600",
"description": "#45A89F"
},
{
"color": "turquoise",
"modifier": "mod-700",
"description": "#337E78"
},
{
"color": "turquoise",
"modifier": "mod-800",
"description": "#225450"
},
{
"color": "turquoise",
"modifier": "mod-900",
"description": "#112A28"
}
],
"purple": [
{
"color": "purple",
"modifier": "default",
"description": "default<br/>#AB2183"
},
{
"color": "purple",
"modifier": "mod-100",
"description": "#F5CCE9"
},
{
"color": "purple",
"modifier": "mod-200",
"description": "#EB98D3"
},
{
"color": "purple",
"modifier": "mod-300",
"description": "#E165BD"
},
{
"color": "purple",
"modifier": "mod-400",
"description": "#D732A7"
},
{
"color": "purple",
"modifier": "mod-500",
"description": "#AB2183"
},
{
"color": "purple",
"modifier": "mod-600",
"description": "#891A69"
},
{
"color": "purple",
"modifier": "mod-700",
"description": "#67144F"
},
{
"color": "purple",
"modifier": "mod-800",
"description": "#440D34"
},
{
"color": "purple",
"modifier": "mod-900",
"description": "#11030D"
}
],
"lime": [
{
"color": "lime",
"modifier": "default",
"description": "default<br/>#C4D600"
},
{
"color": "lime",
"modifier": "mod-100",
"description": "#FAFFC4"
},
{
"color": "lime",
"modifier": "mod-200",
"description": "#F5FF89"
},
{
"color": "lime",
"modifier": "mod-300",
"description": "#F0FF4D"
},
{
"color": "lime",
"modifier": "mod-400",
"description": "#EBFF12"
},
{
"color": "lime",
"modifier": "mod-500",
"description": "#C4D600"
},
{
"color": "lime",
"modifier": "mod-600",
"description": "#9DAB00"
},
{
"color": "lime",
"modifier": "mod-700",
"description": "#768000"
},
{
"color": "lime",
"modifier": "mod-800",
"description": "#4E5600"
},
{
"color": "lime",
"modifier": "mod-900",
"description": "#272B00"
}
],
"monza": [
{
"color": "monza",
"modifier": "default",
"description": "default<br/>#E4002B"
},
{
"color": "monza",
"modifier": "mod-100",
"description": "#FFC7D1"
},
{
"color": "monza",
"modifier": "mod-200",
"description": "#FF8EA3"
},
{
"color": "monza",
"modifier": "mod-300",
"description": "#FF5676"
},
{
"color": "monza",
"modifier": "mod-400",
"description": "#FF1D48"
},
{
"color": "monza",
"modifier": "mod-500",
"description": "#E4002B"
},
{
"color": "monza",
"modifier": "mod-600",
"description": "#B60022"
},
{
"color": "monza",
"modifier": "mod-700",
"description": "#89001A"
},
{
"color": "monza",
"modifier": "mod-800",
"description": "#5B0011"
},
{
"color": "monza",
"modifier": "mod-900",
"description": "#2E0009"
}
],
"deepblue": [
{
"color": "deepblue",
"modifier": "default",
"description": "default<br/>#006EB8"
},
{
"color": "deepblue",
"modifier": "mod-100",
"description": "#BEE5FF"
},
{
"color": "deepblue",
"modifier": "mod-200",
"description": "#7DCBFF"
},
{
"color": "deepblue",
"modifier": "mod-300",
"description": "#3BB0FF"
},
{
"color": "deepblue",
"modifier": "mod-400",
"description": "#0095F9"
},
{
"color": "deepblue",
"modifier": "mod-500",
"description": "#006EB8"
},
{
"color": "deepblue",
"modifier": "mod-600",
"description": "#005893"
},
{
"color": "deepblue",
"modifier": "mod-700",
"description": "#00426E"
},
{
"color": "deepblue",
"modifier": "mod-800",
"description": "#002C4A"
},
{
"color": "deepblue",
"modifier": "mod-900",
"description": "#001625"
}
]
}
}
section.colors {
@apply m-4;
}
.colors {
@apply my-4;
> .item {
@apply mr-2 mb-2 inline-block text-center;
> .color {
@apply block w-14 h-14 rounded-full;
&.color--red.default {
@apply bg-red;
}
&.color--red.mod-100 {
@apply bg-red-100;
}
&.color--red.mod-200 {
@apply bg-red-200;
}
&.color--red.mod-300 {
@apply bg-red-300;
}
&.color--red.mod-400 {
@apply bg-red-400;
}
&.color--red.mod-500 {
@apply bg-red-500;
}
&.color--red.mod-600 {
@apply bg-red-600;
}
&.color--red.mod-700 {
@apply bg-red-700;
}
&.color--red.mod-800 {
@apply bg-red-800;
}
&.color--red.mod-900 {
@apply bg-red-900;
}
&.color--black.default {
@apply bg-black;
}
&.color--black.mod-100 {
@apply bg-black-100;
}
&.color--black.mod-200 {
@apply bg-black-200;
}
&.color--black.mod-300 {
@apply bg-black-300;
}
&.color--black.mod-400 {
@apply bg-black-400;
}
&.color--black.mod-500 {
@apply bg-black-500;
}
&.color--black.mod-600 {
@apply bg-black-600;
}
&.color--black.mod-700 {
@apply bg-black-700;
}
&.color--black.mod-800 {
@apply bg-black-800;
}
&.color--black.mod-900 {
@apply bg-black-900;
}
&.color--gray.default {
@apply bg-gray;
}
&.color--gray.mod-100 {
@apply bg-gray-100;
}
&.color--gray.mod-200 {
@apply bg-gray-200;
}
&.color--gray.mod-300 {
@apply bg-gray-300;
}
&.color--gray.mod-400 {
@apply bg-gray-400;
}
&.color--gray.mod-500 {
@apply bg-gray-500;
}
&.color--gray.mod-600 {
@apply bg-gray-600;
}
&.color--gray.mod-700 {
@apply bg-gray-700;
}
&.color--gray.mod-800 {
@apply bg-gray-800;
}
&.color--gray.mod-900 {
@apply bg-gray-900;
}
&.color--orange.default {
@apply bg-orange;
}
&.color--orange.mod-100 {
@apply bg-orange-100;
}
&.color--orange.mod-200 {
@apply bg-orange-200;
}
&.color--orange.mod-300 {
@apply bg-orange-300;
}
&.color--orange.mod-400 {
@apply bg-orange-400;
}
&.color--orange.mod-500 {
@apply bg-orange-500;
}
&.color--orange.mod-600 {
@apply bg-orange-600;
}
&.color--orange.mod-700 {
@apply bg-orange-700;
}
&.color--orange.mod-800 {
@apply bg-orange-800;
}
&.color--orange.mod-900 {
@apply bg-orange-900;
}
&.color--blue.default {
@apply bg-blue;
}
&.color--blue.mod-100 {
@apply bg-blue-100;
}
&.color--blue.mod-200 {
@apply bg-blue-200;
}
&.color--blue.mod-300 {
@apply bg-blue-300;
}
&.color--blue.mod-400 {
@apply bg-blue-400;
}
&.color--blue.mod-500 {
@apply bg-blue-500;
}
&.color--blue.mod-600 {
@apply bg-blue-600;
}
&.color--blue.mod-700 {
@apply bg-blue-700;
}
&.color--blue.mod-800 {
@apply bg-blue-800;
}
&.color--blue.mod-900 {
@apply bg-blue-900;
}
&.color--turquoise.default {
@apply bg-turquoise;
}
&.color--turquoise.mod-100 {
@apply bg-turquoise-100;
}
&.color--turquoise.mod-200 {
@apply bg-turquoise-200;
}
&.color--turquoise.mod-300 {
@apply bg-turquoise-300;
}
&.color--turquoise.mod-400 {
@apply bg-turquoise-400;
}
&.color--turquoise.mod-500 {
@apply bg-turquoise-500;
}
&.color--turquoise.mod-600 {
@apply bg-turquoise-600;
}
&.color--turquoise.mod-700 {
@apply bg-turquoise-700;
}
&.color--turquoise.mod-800 {
@apply bg-turquoise-800;
}
&.color--turquoise.mod-900 {
@apply bg-turquoise-900;
}
&.color--purple.default {
@apply bg-purple;
}
&.color--purple.mod-100 {
@apply bg-purple-100;
}
&.color--purple.mod-200 {
@apply bg-purple-200;
}
&.color--purple.mod-300 {
@apply bg-purple-300;
}
&.color--purple.mod-400 {
@apply bg-purple-400;
}
&.color--purple.mod-500 {
@apply bg-purple-500;
}
&.color--purple.mod-600 {
@apply bg-purple-600;
}
&.color--purple.mod-700 {
@apply bg-purple-700;
}
&.color--purple.mod-800 {
@apply bg-purple-800;
}
&.color--purple.mod-900 {
@apply bg-purple-900;
}
&.color--lime.default {
@apply bg-lime;
}
&.color--lime.mod-100 {
@apply bg-lime-100;
}
&.color--lime.mod-200 {
@apply bg-lime-200;
}
&.color--lime.mod-300 {
@apply bg-lime-300;
}
&.color--lime.mod-400 {
@apply bg-lime-400;
}
&.color--lime.mod-500 {
@apply bg-lime-500;
}
&.color--lime.mod-600 {
@apply bg-lime-600;
}
&.color--lime.mod-700 {
@apply bg-lime-700;
}
&.color--lime.mod-800 {
@apply bg-lime-800;
}
&.color--lime.mod-900 {
@apply bg-lime-900;
}
&.color--monza.default {
@apply bg-monza;
}
&.color--monza.mod-100 {
@apply bg-monza-100;
}
&.color--monza.mod-200 {
@apply bg-monza-200;
}
&.color--monza.mod-300 {
@apply bg-monza-300;
}
&.color--monza.mod-400 {
@apply bg-monza-400;
}
&.color--monza.mod-500 {
@apply bg-monza-500;
}
&.color--monza.mod-600 {
@apply bg-monza-600;
}
&.color--monza.mod-700 {
@apply bg-monza-700;
}
&.color--monza.mod-800 {
@apply bg-monza-800;
}
&.color--monza.mod-900 {
@apply bg-monza-900;
}
&.color--deepblue.default {
@apply bg-deepblue;
}
&.color--deepblue.mod-100 {
@apply bg-deepblue-100;
}
&.color--deepblue.mod-200 {
@apply bg-deepblue-200;
}
&.color--deepblue.mod-300 {
@apply bg-deepblue-300;
}
&.color--deepblue.mod-400 {
@apply bg-deepblue-400;
}
&.color--deepblue.mod-500 {
@apply bg-deepblue-500;
}
&.color--deepblue.mod-600 {
@apply bg-deepblue-600;
}
&.color--deepblue.mod-700 {
@apply bg-deepblue-700;
}
&.color--deepblue.mod-800 {
@apply bg-deepblue-800;
}
&.color--deepblue.mod-900 {
@apply bg-deepblue-900;
}
}
> .color-description {
@apply text-sm;
}
}
}
No notes defined.