Swatches

<h1>{{title}}</h1>
<div class="m-fr-swatches">
{% for key, color in colors %}
    <div class="m-fr-swatches__item u-bg-color__{{key}}">
        <span class="m-fr-swatches__item-title">{{key}} - {{ color.name }} = setcolor({{key}})</span>
       <div class="m-fr-swatches__item-details">
       <div>Utility Classes</div>
        <strong>Background</strong> - .u-bg-color__{{key}}<br>
        <strong>Text</strong> - .u-txt-color__{{key}}<br>
        <strong>Border</strong> - .u-brd-color__{{key}}

       </div>
        <div class="m-fr-swatches-shades">
            <div class="m-fr-swatches-shades__item u-bg-color__{{key}}--75">
            75%
            <div class="m-fr-swatches-shades__item-details">
            setcolor({{key}}, 75)<br>
            .u-bg-color__{{key}}--75<br>
            .u-txt-color__{{key}}--75<br>
            .u-brd-color__{{key}}--75
            </div>

            </div>
            <div class="m-fr-swatches-shades__item u-bg-color__{{key}}--50">
            50%
            <div class="m-fr-swatches-shades__item-details">
            setcolor({{key}}, 50)<br>
            .u-bg-color__{{key}}--50<br>
            .u-txt-color__{{key}}--50<br>
            .u-brd-color__{{key}}--50
            </div>
            </div>
            <div class="m-fr-swatches-shades__item u-bg-color__{{key}}--25">
            25%
            <div class="m-fr-swatches-shades__item-details">
            setcolor({{key}}, 25)<br>
            .u-bg-color__{{key}}--25<br>
            .u-txt-color__{{key}}--25<br>
            .u-brd-color__{{key}}--25
            </div>
            </div>
        </div>
    </div>

{% endfor %}

</div>