{% include "VictoireUIBundle:Styleguide:ui/section-header.html.twig" with {
    "name": "color"
} %}

{% set colors = [{
    'name': 'green-light',
    'value': {
        'rgb': 'rgb(77, 203, 170)',
        'hexa': '#4dcbaa',
    }
}, {
    'name': 'green',
    'value': {
        'rgb': 'rgb(52, 177, 144)',
        'hexa': '#34b190',
    }
}, {
    'name': 'green-dark',
    'value': {
        'rgb': 'rgb(40, 138, 112)',
        'hexa': '#288a70',
    }
}, {
    'name': 'pink-light',
    'value': {
        'rgb': 'rgb(236, 93, 154)',
        'hexa': '#ec5d9a',
    }
}, {
    'name': 'pink',
    'value': {
        'rgb': 'rgb(231, 47, 126)',
        'hexa': '#e72f7e',
    }
}, {
    'name': 'pink-dark',
    'value': {
        'rgb': 'rgb(204, 23, 101)',
        'hexa': '#cc1765',
    }
}, {
    'name': 'orange-light',
    'value': {
        'rgb': 'rgb(247, 190, 144)',
        'hexa': '#f7be90',
    }
}, {
    'name': 'orange',
    'value': {
        'rgb': 'rgb(244, 162, 96)',
        'hexa': '#f4a260',
    }
}, {
    'name': 'orange-dark',
    'value': {
        'rgb': 'rgb(241, 134, 48)',
        'hexa': '#f18630',
    }
}, {
    'name': 'blue-light',
    'value': {
        'rgb': 'rgb(137, 200, 243)',
        'hexa': '#89c8f3',
    }
}, {
    'name': 'blue',
    'value': {
        'rgb': 'rgb(91, 179, 238)',
        'hexa': '#5bb3ee',
    }
}, {
    'name': 'blue-dark',
    'value': {
        'rgb': 'rgb(45, 158, 233)',
        'hexa': '#2d9ee9',
    }
}, {
    'name': 'white',
    'value': {
        'rgb': 'rgb(255, 255, 255)',
        'hexa': '#ffffff',
    }
}, {
    'name': 'white-dark',
    'value': {
        'rgb': 'rgb(245, 246, 247)',
        'hexa': '#ffffff',
    }
}, {
    'name': 'grey-lighter',
    'value': {
        'rgb': 'rgb(223, 228, 234)',
        'hexa': '#dfe4ea',
    }
}, {
    'name': 'grey-light',
    'value': {
        'rgb': 'rgb(187, 199, 211)',
        'hexa': '#bbc7d3',
    }
}, {
    'name': 'grey',
    'value': {
        'rgb': 'rgb(140, 160, 179)',
        'hexa': '#8ca0b3',
    }
}, {
    'name': 'grey-dark',
    'value': {
        'rgb': 'rgb(108, 125, 142)',
        'hexa': '#6c7d8e',
    }
}, {
    'name': 'grey-darker',
    'value': {
        'rgb': 'rgb(47, 60, 89)',
        'hexa': '#2f3c59',
    }
}, {
    'name': 'black',
    'value': {
        'rgb': 'rgb(23, 33, 56)',
        'hexa': '#172138',
    }
}] %}

<ul class="ts-colors">
    {% for color in colors %}
        <li class="ts-colors__item">
            <div class="ts-colors__swatch v-bg--{{ color.name }}"></div>
            <div class="ts-colors__legend">
                <div class="ts-colors__label">{{ color.name }}</div>
                <div class="ts-colors__values">
                    <div>{{ color.value.rgb }}</div>
                    <div>{{ color.value.hexa }}</div>
                </div>
            </div>
        </li>
    {% endfor %}
</ul>
