{% extends '@DediSyliusTheme/DesignSystem/layout.html.twig' %}

{% block content %}
    <div class="ds-container">
        <h2 class="ds-title">{{ 'app.design_system.colors.title'|trans }}</h2>
        <p class="ds-text">{{ 'app.design_system.colors.desc'|trans }}</p>

        <h3 class="ds-subtitle">{{ 'app.design_system.colors.colors_interface'|trans }}</h3>
        <div class="row">
            <div class="col-md"><div class="ds-color bg-primary"><span class="name">Primary</span></div></div>
            <div class="col-md"><div class="ds-color bg-primary-hover"><span class="name">Primary hover</span></div></div>
            <div class="col-md"><div class="ds-color bg-secondary"><span class="name">Secondary</span></div></div>
            <div class="col-md"><div class="ds-color bg-secondary-hover"><span class="name">Secondary hover</span></div></div>
        </div>
        <div class="row">
            <div class="col-md"><div class="ds-color bg-black"><span class="name">Black</span></div></div>
            <div class="col-md"><div class="ds-color bg-dark"><span class="name">Dark</span></div></div>
            <div class="col-md"><div class="ds-color bg-white"><span class="name">White</span></div></div>
            <div class="col-md"><div class="ds-color bg-light"><span class="name">Light</span></div></div>
        </div>
        <div class="row">
            {% for i in 1..9 %}
                <div class="col-md-4 col-xl">
                    <div class="ds-color bg-gray-{{ i }}00"><span class="name">Gray {{ i }}00</span></div>
                </div>
            {% endfor %}
        </div>
        <div class="row">
            <div class="col-md"><div class="ds-color bg-danger"><span class="name">Danger</span></div></div>
            <div class="col-md"><div class="ds-color bg-warning"><span class="name">Warning</span></div></div>
            <div class="col-md"><div class="ds-color bg-info"><span class="name">Info</span></div></div>
            <div class="col-md"><div class="ds-color bg-success"><span class="name">Success</span></div></div>
        </div>

        {% include "@DediSyliusTheme/DesignSystem/parts/_colors.html.twig" %}
    </div>
{% endblock %}
