@openeuropa/bcl-theme-default 0.21.0 → 0.24.0

package/templates/bcl-inpage-navigation/inpage-navigation.html.twig

@@ -2,17 +2,22 @@
 
 {#
 Parameters:
-  - "title": (string) (default: '')
-  - "full_layout": (boolean) (default: false)
-  - "links": (array of link objects) (default: [])
-  - "content": (string) (default: '')
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h3')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - links: (array of link objects) (default: [])
+  - id (string) (default: 'bcl-inpage-navigation-' random(10))
+  - attributes (drupal attrs)
 #}
 
-{# Internal properties #}
 {% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
 {% set _links = links|default([]) %}
 {% set _content = content|default('') %}
-{% set _id = id|default('bcl-inpage-navigation-' ~ random(5)) %}
+{% set _id = id|default('bcl-inpage-navigation-' ~ random(10)) %}
 {% set _full_layout = full_layout|default(false) %}
 
 {% if attributes is empty %}
@@ -20,28 +25,20 @@ Parameters:
 {% endif %}
 
 {% set attributes = attributes.addClass(['bcl-inpage-navigation', 'position-sticky']).setAttribute('id', _id) %}
+{% set title_attributes = _title_attributes.addClass('mb-0') %}
 
-{# Print the result #}
-{% if _full_layout %}
-<div class="row">
-  <div class="col-md-3 d-none d-md-block">
-{% endif %}
-    <nav {{ attributes }}>
-      {% if _title is defined and _title is not empty %}
-        <h5>{{ _title }}</h5>
-      {% endif %}
-      {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
-        'pills': true,
-        'vertical': true,
-        'items': _links,
-      } only %}
-    </nav>
-{% if _full_layout %}
-  </div>
-  <div class="col-md-9">
-    {{ _content }}
-  </div>
-</div>
-{% endif %}
+<nav {{ attributes }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    attributes: _title_attributes.addClass('mb-0'),
+  } only %}
+  {% include '@oe-bcl/bcl-navigation/navigation.html.twig' with {
+    'pills': true,
+    'vertical': true,
+    'items': _links,
+  } only %}
+</nav>
 
 {% endspaceless %}

package/templates/bcl-landing-page/landing-page.html.twig

@@ -11,7 +11,7 @@
 <div class="container">
   {% if featured_section is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ featured_section.title }}</h2>
+      <h2 class="mb-4">{{ featured_section.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ featured_section.content }}
@@ -37,7 +37,7 @@
 
   {% if activity_featured is defined %}
     <div class="my-4">
-      <h2 class="mb-4 fw-bold">{{ activity_featured.title }}</h2>
+      <h2 class="mb-4">{{ activity_featured.title }}</h2>
       <div class="row">
         <div class="col-12 col-md-6">
           {{ activity_featured.content }}

package/templates/bcl-language-list/language-list-grid.html.twig

@@ -15,8 +15,8 @@
 #}
 
 {% set _items = items|default([]) %}
-{% set _icon_path = icon_path|default('') %}
 {% set _category = category|default('') %}
+{% set _icon_path = icon_path|default('') %}
 
 {% set _columns = [] %}
 {% set _columns = _columns|merge([_items|slice(0, (items|length / 2)|round(0, 'ceil'))]) %}

package/templates/bcl-link/link.html.twig

@@ -4,14 +4,15 @@
   - label (string) (default: '')
   - path (string) (default: '#')
   - variant (string) (default: '')
-    - options ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    - options ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
   - id (string) (default: '')
   - disabled (boolean) (default: false)
-  - remove_icon_spacers (boolean) (default: false)
   - standalone (boolean) (default: false)
-  - icon (icon object) (default: {}): predefined structure for Icon component
+  - icon (icon object) (default: {})
   - icon_position (string) (default: after)
-    - options ["after", "before"]
+    - options ['after', 'before']
+  - remove_icon_spacers (boolean) (default: false)
+  - attributes (drupal attrs)
 #}
 
 {% set _label = label|default('') %}
@@ -23,6 +24,7 @@
 {% set _icon = icon|default({}) %}
 {% set _icon_position = icon_position|default('after') %}
 {% set _remove_icon_spacers = remove_icon_spacers|default(false) %}
+
 {% set _classes = [] %}
 
 {% if _icon is not empty %}

package/templates/bcl-links-block/links-block.html.twig

@@ -1,35 +1,46 @@
 {% spaceless %}
 
 {# Parameters:
-  - background: (string) (default: "gray")
-    - options ["gray", "transparent"]
-  - variant: (string) (default: "vertical")
-    - options ["vertical", "horizontal"]
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "h2")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - background: (string) (default: 'gray')
+    - options ['gray', 'transparent']
+  - variant: (string) (default: 'vertical')
+    - options ['vertical', 'horizontal']
   - links (array of link objects) (default: [])
+  - attributes (drupal attrs)
 #}
 
-{% set _background = background|default("gray") %}
-{% set _variant = variant|default("vertical") %}
-{% set _title = title|default("") %}
-{% set _title_tag = title_tag|default("h2") %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _background = background|default('gray') %}
+{% set _variant = variant|default('vertical') %}
 {% set _links = links|default([])%}
 
+{% set _title_classes = ['pb-3', 'mb-3', 'border-bottom'] %}
+
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}
 {% endif %}
 
-{% if _background == "gray" %}
-  {% set attributes = attributes.addClass(["bg-light", "px-4", "py-3", "rounded-2"]) %}
+{% if _background == 'gray' %}
+  {% set attributes = attributes.addClass(['bg-light', 'px-4', 'py-3', 'rounded-2']) %}
 {% endif %}
 
 <div
   {{ attributes }}
 >
   {% if _title is not empty %}
-    {% set _title_classes = 'fw-bold pb-3 mb-3 border-bottom' %}
-    <{{ _title_tag }} class="{{ _title_classes }}">{{ _title }}</{{ _title_tag }}>
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes.addClass(_title_classes),
+    } only %}
   {% endif %}
   {% if _links is not empty and _links is iterable %}
     <ul class="ps-0 mb-0">
@@ -41,17 +52,17 @@
         {% endif %}
         {% set _link = _link|merge({
           clean_class: true,
-          attributes: _link.attributes.addClass(["pb-3", "d-inline-block", "standalone"])
+          attributes: _link.attributes.addClass(['pb-3', 'd-inline-block', 'standalone'])
         }) %}
-        {% set _list_item_classes = "list-unstyled" %}
-        {% if _variant == "horizontal" %}
+        {% set _list_item_classes = 'list-unstyled' %}
+        {% if _variant == 'horizontal' %}
           {% set _list_item_classes = _list_item_classes ~ ' d-inline' %}
         {% endif %}
         {% if loop.last == false %}
           {% set _list_item_classes = _list_item_classes ~ ' me-4-5' %}
         {% endif %}
         <li class="{{ _list_item_classes }}">
-          {% include "@oe-bcl/bcl-link/link.html.twig" with _link only %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _link only %}
         </li>
       {% endfor %}
     </ul>

package/templates/bcl-list-group/list-group.html.twig

@@ -4,11 +4,11 @@
   - flush (boolean) (default: false)
   - horizontal (string) (default: '')
     - options ['none', 'horizontal', 'horizontal-sm', 'horizontal-md', 'horizontal-lg', 'horizontal-xl', 'horizontal-xxl']
+  - id (string) (default: '')
   - type (string) (default: 'unordered')
     - options ['unordered', 'ordered', 'actionable']
   - items (array of objects: list item object or Button and Link component object if type actionable)
       format: [
-      ('list item')
       {
         - html (string)
         - variant (string)
@@ -24,6 +24,7 @@
       },
       ...
     ]
+  - attributes (drupal attrs)
 #}
 
 {% set _flush = flush|default(false) %}
@@ -31,6 +32,7 @@
 {% set _id = id|default('') %}
 {% set _type = type|default('unordered') %}
 {% set _items = items|default([]) %}
+
 {% set _classes = ['list-group'] %}
 
 {% if _flush %}

package/templates/bcl-listing/listing.html.twig

@@ -1,22 +1,28 @@
 {% spaceless %}
 
 {# Parameters:
-  - variant: (string) (default: "horizontal") options:
-  [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
-  - title: (string) (default: "")
-  - title_tag: (string) (default: "h2")
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h2')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
+  - variant: (string) (default: 'horizontal')
+    options [ default-1-col, highlight-1-col, default-2-col, default-3-col, highlight-2-col, highlight-3-col ]
   - items: (array of objects of type card)
   - link: (object of type link)
-  - alignment: (string) (default: '') options:
-  ['start', 'end', 'center', 'baseline', 'stretch']
+  - alignment: (string) (default: '')
+    options ['start', 'end', 'center', 'baseline', 'stretch']
+  - attributes (drupal attrs)
 #}
 
-{% set _items = items|default([]) %}
-{% set _variant = variant|default('default-1-col') %}
 {% set _title = title|default('') %}
 {% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _items = items|default([]) %}
+{% set _variant = variant|default('default-1-col') %}
 {% set _alignment = alignment|default('') %}
 {% set _link = link|default({}) %}
+
 {% set _classes = ['bcl-listing', 'bcl-listing--' ~ _variant] %}
 {% set _cards = [] %}
 {% set _card_layout = {
@@ -35,10 +41,12 @@
 <div {{ attributes }}>
 
 {% if _title is not empty %}
-  {% set _title_classes = 'fw-bold mb-4' %}
-  <{{ _title_tag }} class="{{ _title_classes }}">
-    {{- _title -}}
-  </{{ _title_tag }}>
+  {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+    title: _title,
+    title_tag: _title_tag,
+    title_link: _title_link,
+    title_attributes: _title_attributes,
+  } only %}
 {% endif %}
 
 {% if _items is not empty %}
@@ -63,6 +71,10 @@
     {% endif %}
     {% set _card_classes = [] %}
     {% set _card_attributes = card.attributes ? card.attributes : create_attribute() %}
+    {% set _card_title_attributes = card.title_attributes ? card.title_attributes : create_attribute() %}
+    {% set _card = _card|merge({
+      title_attributes: _card_title_attributes.addClass(['fs-5'])
+    }) %}
 
     {% if _variant == 'default-1-col' %}
       {% set _card_classes = [

package/templates/bcl-modal/modal.html.twig

@@ -12,17 +12,26 @@
   - messages (block) (default: '')
   - body (block) (default: '')
   - footer (block) (default: '')
+  - attributes (drupal attrs)
+  
+  Blocks
+    - header
+    - messages
+    - body
+    - footer
 #}
+
 {% set _size =  size|default('') %}
 {% set _id = id|default('modal-' ~ random(1000)) %}
 {% set _fullscreen_responsive =  fullscreen_responsive|default('') %}
-{% set _header = header|default('') %}
-{% set _body = body|default('') %}
-{% set _messages = messages|default('') %}
 {% set _static_backdrop = static_backdrop|default(false) %}
 {% set _verticaly_centered = verticaly_centered|default(false) %}
 {% set _scrollable = scrollable|default(false) %}
+{% set _header = header|default('') %}
+{% set _messages = messages|default('') %}
+{% set _body = body|default('') %}
 {% set _footer = footer|default('') %}
+
 {% set _classes = ['modal fade'] %}
 
 {% if attributes is empty %}
@@ -37,6 +46,10 @@
                     .addClass(_classes)
 %}
 
+{% if _static_backdrop %}
+  {% set attributes = attributes.setAttribute('data-bs-backdrop', 'static') %}
+{% endif %}
+
 <div
   {{ attributes }}
 >
@@ -45,7 +58,6 @@
   {{- _fullscreen_responsive ? ' modal-fullscreen-' ~ _fullscreen_responsive ~ '-down' -}}
   {{- _verticaly_centered ? ' modal-dialog-centered' -}}
   {{- _scrollable ? ' modal-dialog-scrollable' -}}"
-  {{- _static_backdrop ? ' data-bs-backdrop="static"' -}}
   >
     <div class="modal-content">
       {% if header is not empty %}

package/templates/bcl-navbar/navbar.html.twig

@@ -18,20 +18,23 @@
   - color_set (string) (default: 'light')
     options ['light', 'dark']
   - disable_collapse (boolean) (default: false)
+  - attributes (drupal attrs)
 
   Blocks
     - branding
     - navigation
     - right
 #}
+
 {% set _collapse_id = collapse_id|default('') %}
 {% set _background = background|default('') %}
+{% set _brand = brand|default({}) %}
 {% set _navigation = navigation|default({}) %}
 {% set _form = form|default({}) %}
 {% set _expand = expand|default('lg') %}
-{% set _brand = brand|default({}) %}
 {% set _color_set = color_set|default('light') %}
 {% set _disable_collapse = disable_collapse|default(false) %}
+
 {% set _classes = ['navbar', 'navbar-expand-' ~ _expand] %}
 {% if _background is not empty %}
   {% set _classes = _classes|merge(['bg-' ~ _background]) %}

package/templates/bcl-navigation/navigation.html.twig

@@ -2,6 +2,7 @@
 {% spaceless %}
 
 {# Parameters:
+  - id (string) (default: '')
   - pills (boolean) (default: false)
   - tabs (boolean) (default: false) - If tabs is set to true, the nav should also be set to true for accessibility reasons
   - vertical (boolean) (default: false)
@@ -21,6 +22,7 @@
         - navigation (navigation Object) - set for multiple level or navigation, items inside is required
       }
     ]
+  - attributes (drupal attrs)
 #}
 
 {# Define main macro #}
@@ -28,12 +30,12 @@
 {% spaceless %}
   {% import _self as navigation %}
 
+  {% set _id = id|default('') %}
   {% set _pills = pills|default(false) %}
   {% set _tabs = tabs|default(false) %}
   {% set _vertical = vertical|default(false) %}
   {% set _full_width = full_width|default(false) %}
   {% set _alignment = alignment|default('') %}
-  {% set _id = id|default('') %}
   {% set _tabs_content = tabs_content|default(false) %}
   {% set _nav = nav|default(false) %}
   {% set _navbar = navbar|default(false) %}

package/templates/bcl-offcanvas/offcanvas.html.twig

@@ -1,12 +1,10 @@
 {% spaceless %}
 
 {# Parameters:
-  - title (object) (default: {}) format: {
-      label (string)
-      id (string) (default: '')
-      heading (string) (1, 2, 3, 4, 5, 6)
-      extra_classes(string) (default: '')
-    }
+  - title: (string) (default: '')
+  - title_tag: (string) (default: 'h3')
+  - title_link: (link object) (default: {})
+  - title_attributes (drupal attrs)
   - placement (string) (default: '') (start, end, top, bottom)
   - id (string) (default: '')
   - body (string) (default: '')
@@ -16,15 +14,19 @@
   - extra_classes_body (string) (default: '')
   - extra_classes_header (string) (default: '')
   - extra_classes_close (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
-{% set _title = title|default({}) %}
+{% set _title = title|default('') %}
+{% set _title_tag = title_tag|default('h2') %}
+{% set _title_link = title_link|default({}) %}
+{% set _title_attributes = title_attributes ?: create_attribute() %}
+{% set _placement = placement|default('') %}
+{% set _id = id|default('') %}
 {% set _body = body|default('') %}
-{% set _with_close = with_close ?? true %}
-{% set _with_backdrop = with_backdrop ?? true %}
 {% set _with_body_scroll = with_body_scroll|default(false) %}
-{% set _id = id|default('') %}
-{% set _placement = placement|default('') %}
+{% set _with_backdrop = with_backdrop|default(true) %}
+{% set _with_close = with_close|default(true) %}
 {% set _extra_classes_body = extra_classes_body|default('') %}
 {% set _extra_classes_header = extra_classes_header|default('') %}
 {% set _extra_classes_close = extra_classes_close|default('') %}
@@ -66,19 +68,15 @@
 <div
   {{ attributes }}
 >
-{% if _with_close or
-  (_title.label is defined and _title.label is not empty)
-%}
+{% if _with_close or _title is not empty %}
   <div class="{{ _class_header }}">
-  {% if _title.label is defined and _title.label is not empty %}
-    <h{{ _title.heading|default(5) }}
-      class="{{ 'offcanvas-title' ~ (_title.extra_classes ? ' ' ~ _title.extra_classes : '') }}"
-    {% if _title.id is defined and _title.id is not empty %}
-      id="{{ _title.id }}"
-    {% endif %}
-    >
-      {{- _title.label -}}
-    </h{{ _title.heading|default(5) }}>
+  {% if _title is not empty %}
+    {% include '@oe-bcl/bcl-heading/heading.html.twig' with {
+      title: _title,
+      title_tag: _title_tag,
+      title_link: _title_link,
+      attributes: _title_attributes.addClass(['offcanvas-title']),
+    } only %}
   {% endif %}
   {% if _with_close %}
     {% set button_attributes = create_attribute()

package/templates/bcl-page/page.html.twig

@@ -11,7 +11,7 @@
   Sed posuere at leo sit amet placerat. Sed dapibus viverra urna ac pretium. Praesent et laoreet erat, eget volutpat metus. Duis ac augue
   sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
   </p>
-  <h3 id="item-1" class="fw-bold my-4">Section 1</h3>
+  <h2 id="item-1" class="my-4">Section 1</h2>
   {% if featured_item %}
     {% include '@oe-bcl/bcl-featured-media/featured-media.html.twig' with featured_item only %}
   {% endif %}
@@ -24,7 +24,7 @@
     {% include '@oe-bcl/bcl-listing/listing.html.twig' with listing only %}
   {% endif %}
 
-  <h3 id="item-2" class="fw-bold my-4">Section 2</h3>
+  <h2 id="item-2" class="my-4">Section 2</h2>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,
@@ -50,7 +50,7 @@
   sed tortor elementum dignissim in sit amet velit. Nullam nec viverra mi.
   </p>
 
-  <h3 id="item-3" class="fw-bold my-4">Section 3</h3>
+  <h2 id="item-3" class="my-4">Section 3</h2>
 
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet eleifend tortor. In facilisis eros vitae turpis ullamcorper,
   a euismod dolor lacinia. Nam facilisis ipsum et sollicitudin imperdiet. Curabitur a efficitur ante. Phasellus non felis laoreet,

package/templates/bcl-pagination/pagination.html.twig

@@ -2,10 +2,11 @@
 
 {# Parameters:
   - size (string) (default: '')
-    - options ["sm", "lg"]
+    - options ['sm', 'lg']
   - alignment (string) (default: '')
-    - options ["end", "center"]
+    - options ['end', 'center']
   - aria_label (string) (default: '')
+  - variant: (string) (default: '')
   - enable_prev_next_icon (boolean) (default: false)
   - enable_first_last_icon (boolean) (default: true)
   - first (object)
@@ -49,24 +50,29 @@
       - active (boolean)
     }
   - icon_path (string) (default: '')
-  - extra_classes (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _size = size|default('') %}
 {% set _alignment = alignment|default('') %}
 {% set _aria_label = aria_label|default('') %}
 {% set _enable_prev_next_icon = enable_prev_next_icon|default(false) %}
-{% set _enable_first_last_icon = enable_first_last_icon ?? true %}
+{% set _enable_first_last_icon = enable_first_last_icon|default(true) %}
 {% set _items = items|default([]) %}
 {% set _first = first|default({}) %}
 {% set _next = next|default({}) %}
 {% set _prev = prev|default({}) %}
 {% set _last = last|default({}) %}
+{% set _variant = variant|default('') %}
 {% set _icon_path = icon_path|default({}) %}
+
 {% set _classes = 'pagination' %}
 {% if _size is not empty %}
   {% set _classes = _classes ~ ' pagination-' ~ _size %}
 {% endif %}
+{% if _variant is not empty %}
+  {% set _classes = _classes ~ ' pagination--' ~ _variant %}
+{% endif %}
 {% if _alignment is not empty %}
   {% set _classes = _classes ~ ' justify-content-' ~ _alignment %}
 {% endif %}

package/templates/bcl-person/person.html.twig

@@ -5,23 +5,10 @@
 {% endblock %}
 
 {% block content %}
-  {% if social_media.main_title is not empty %}
-    <h3
-      class="fw-bold mb-4"
-    >{{- social_media.main_title -}}</h3>
-  {% endif %}
-  {% if social_media.links is defined and social_media.links is not empty %}
-    <div class="mb-4-5">
-    {% for link in social_media.links %}
-      {% include '@oe-bcl/bcl-link/link.html.twig' with link only %}
-    {% endfor %}
-    </div>
-  {% endif %}
-
   {% if information.main_title is not empty %}
-    <h3
-      class="fw-bold mb-4"
-    >{{- information.main_title -}}</h3>
+    <h2
+      class="mb-4"
+    >{{- information.main_title -}}</h2>
   {% endif %}
   {% if information.content is not empty %}
     <div class="mb-4-5">
@@ -30,9 +17,9 @@
   {% endif %} 
 
   {% if files.main_title is not empty %}
-    <h3
-      class="fw-bold mb-4"
-    >{{- files.main_title -}}</h3>
+    <h2
+      class="mb-4"
+    >{{- files.main_title -}}</h2>
   {% endif %}
   {% if files.listing is defined and files.listing is not empty %}
     <div class="mb-4-5">

package/templates/bcl-placeholder/placeholder.html.twig

@@ -3,11 +3,12 @@
 {# Parameters:
   - width (int) (default: 0) - between 0-100
   - variant (string) (default: '')
-    - options : ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    - options ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
   - size (string) (default: '')
-    - options : ["xs", "lg"]
+    - options ['xs', 'lg']
   - animation (string) (default: '')
-    - options : ["glow", "wave"]
+    - options ['glow', 'wave']
+  - attributes (drupal attrs)
 #}
 
 {% set _width = width|default(0) %}

package/templates/bcl-progress/progress.html.twig

@@ -11,6 +11,7 @@
   - bar_label (string) (default: '')
   - variant (string) (default: '')
   - message (string) (default: '')
+  - attributes (drupal attrs)
 #}
 
 {% set _progress = progress|default(0) %}
@@ -23,6 +24,7 @@
 {% set _bar_label = bar_label|default('') %}
 {% set _variant = variant|default('') %}
 {% set _message = message|default('') %}
+
 {% set _classes = 'progress-bar' %}
 {% if _striped is not empty %}
   {% set _classes = _classes ~ ' progress-bar-striped' %}
@@ -33,6 +35,9 @@
 {% if _variant is not empty %}
   {% set _classes = _classes ~ ' bg-' ~ _variant %}
 {% endif %}
+{% if _variant == 'light' %}
+  {% set _classes = _classes ~ ' text-dark' %}
+{% endif %}
 
 {% if attributes is empty %}
   {% set attributes = create_attribute() %}