{#
/**
 * @file
 * Implements the Color tab content for the UI Kit.
 *
 * Displays usage of color within the theme.
 */
#}
{% import '@bootstrap_ui_kit/ui-kit/' ~ section.id ~ '/' ~ section.id ~ '.macros.twig' as macros %}
{% extends '@bootstrap_ui_kit/section.html.twig' %}

{% block section_intro %}
  {% set min_passable = min_passable|default('AA') %}
  {% trans %}
    <p><strong>Purposeful:</strong> Colors should serve purposes, making the digital experience predictable, fluent and
      pleasing. e.g. what color indicates which element is clickable.</p>
    <p><strong>Accessible:</strong> All colors must pass {{ min_passable }} standard for normal and large text.</p>
  {% endtrans %}
{% endblock %}

{% block section_content %}
  {{ attach_library('bootstrap_ui_kit/bootstrap-ui-kit.color') }}

  {% block primary_colors %}
  <div class="pb-5 mb-5 border-bottom d-block">
    <p><strong>{{ 'Primary colors'|t }}</strong></p>
    <div class="row justify-content-between gy-5 row-cols-2 row-cols-lg-6">
      {% block primary_colors_content %}
        {{ macros.swatch('primary') }}
        {{ macros.swatch('secondary') }}
        {{ macros.swatch('light') }}
        {{ macros.swatch('dark') }}
      {% endblock %}
    </div>
  </div>
  {% endblock %}

  {% block secondary_colors %}
  <div class="pb-5 mb-5 border-bottom d-block">
    <p><strong>{{ 'Secondary colors'|t }}</strong></p>
    <div class="row justify-content-between gy-5 row-cols-2 row-cols-lg-6">
      {% block secondary_colors_content %}
        {{ macros.swatch() }}
        {{ macros.swatch() }}
        {{ macros.swatch() }}
        {{ macros.swatch() }}
      {% endblock %}
    </div>
  </div>
  {% endblock %}

  {% block accessibility_checker %}
  <div class="mb-5">
    <p><strong>{{ 'Accessibility'|t }}</strong></p>
    {% block accessibility_checker_content %}
      {{ macros.accessibility_info('primary', 'white') }}
      {{ macros.accessibility_info('secondary', 'white') }}
    {% endblock %}
  </div>
  {% endblock %}
{% endblock %}
