@openeuropa/bcl-theme-default 1.2.2 → 1.4.0

package/package.json

@@ -2,18 +2,19 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.2.2",
+  "version": "1.4.0",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
     "build": "npm-run-all build:*",
     "build:styles": "cross-env bcl-builder styles",
+    "build:color-scheme": "cross-env bcl-builder color-scheme",
     "build:scripts": "cross-env bcl-builder scripts",
     "build:copy": "cross-env bcl-builder copy",
     "build:sprite": "cross-env bcl-builder sprite",
     "clean": "rimraf css js templates logos icons",
     "prepublish": "npm run build",
-    "update:styles": "npm run build:styles && copyfiles -f css/*.min.css ../../../assets",
+    "update:styles": "npm run build:styles && npm run build:color-scheme && copyfiles -f css/*.min.css ../../../assets",
     "update:scripts": "npm run build:scripts && copyfiles -f js/*.bundle.min.js ../../../assets",
     "update:templates": "run-s align-templates build:copy"
   },
@@ -21,9 +22,9 @@
     "@ecl/resources-ec-logo": "3.7.1",
     "@ecl/resources-eu-logo": "3.7.1",
     "@ecl/resources-flag-icons": "3.7.1",
-    "@openeuropa/bcl-bootstrap": "^1.2.2",
-    "@openeuropa/bcl-builder": "^1.2.2",
-    "@openeuropa/bcl-twig-templates": "^1.2.2",
+    "@openeuropa/bcl-bootstrap": "^1.4.0",
+    "@openeuropa/bcl-builder": "^1.4.0",
+    "@openeuropa/bcl-twig-templates": "^1.4.0",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
     "flag-icons": "6.9.2",
@@ -48,5 +49,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "03e3f25dcc61e449566c32a78213363e7d18afd0"
+  "gitHead": "0271b344c41999ea181851f229385df1d539047b"
 }

package/src/scss/_banners.scss

@@ -61,7 +61,7 @@
 
 .bcl-banner__content {
   padding: map-get($spacers, "4-75") map-get($spacers, "4-5");
-  border-color: $banner-content-border-color;
+  border-color: var(--bs-primary);
 }
 
 .bcl-banner__image {
@@ -100,7 +100,7 @@
     &.overlay {
       .bcl-banner__content {
         background: $white;
-        border-bottom: 4px solid $banner-content-border-color;
+        border-bottom: 4px solid var(--bs-primary);
       }
     }
 

package/src/scss/_timeline.scss

@@ -18,7 +18,7 @@
       display: inline-block;
       position: absolute;
       border-radius: 50%;
-      border: 2px solid $primary;
+      border: 2px solid var(--bs-primary);
       left: 0;
       width: 22px;
       height: 22px;

package/src/scss/base/_variables.scss

@@ -80,9 +80,6 @@ $badge-font-size-desktop: 1rem; // 16px
 $badge-active-box-shadow: $btn-active-box-shadow;
 $badge-focus-width: $btn-focus-width;
 
-// banners
-$banner-content-border-color: $primary;
-
 // Forms
 $form-check-input-size-lg: $form-check-input-width + 0.3em !default;
 $form-font-size: $font-size-base !default;

package/src/scss/color-scheme-variables.scss

@@ -0,0 +1,11 @@
+$colors-schemes: (
+  "ocean": (
+    "primary": #4eac00,
+    "secondary": #fbff00,
+    "danger": #ff8800,
+    "success": #4dff00,
+    "text": #294d26,
+    "background": #ffdfb0,
+    "link": #7b00ff,
+  ),
+);

package/src/scss/color-scheme.scss

@@ -0,0 +1,15 @@
+// Configuration
+@import "@openeuropa/bcl-bootstrap/scss/functions";
+@import "@openeuropa/bcl-bootstrap/scss/variables";
+@import "@openeuropa/bcl-bootstrap/scss/maps";
+@import "@openeuropa/bcl-bootstrap/scss/mixins";
+
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/background";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/text";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/link";
+
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/alert";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/buttons";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/list_group";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/utilities";
+@import "@openeuropa/bcl-theme-default/src/scss/color_scheme/badges";

package/src/scss/color_scheme/_alert.scss

@@ -0,0 +1,18 @@
+// Color scheme - Alert
+
+@mixin generate-alerts($color, $value) {
+  $alert-background: shift-color($value, $alert-bg-scale);
+  $alert-border: shift-color($value, $alert-border-scale);
+  $alert-color: shift-color($value, $alert-color-scale);
+
+  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
+    $alert-color: mix(
+      $value,
+      color-contrast($alert-background),
+      abs($alert-color-scale)
+    );
+  }
+  .alert-#{$color} {
+    @include alert-variant($alert-background, $alert-border, $alert-color);
+  }
+}

package/src/scss/color_scheme/_background.scss

@@ -0,0 +1,22 @@
+// Color scheme - Background
+
+@mixin generate-background($color, $value) {
+  &.bg-default {
+    // Accordion
+    $accordion-button-active-bg: tint-color($value, 90%);
+    --#{$prefix}accordion-bg: #{$value};
+    --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+
+    // Card
+    .card {
+      --#{$prefix}card-bg: transparent;
+    }
+
+    &:not(header, .accordion) {
+      background: $value !important;
+    }
+    .bcl-header__navbar {
+      background: $value !important;
+    }
+  }
+}

package/src/scss/color_scheme/_badges.scss

@@ -0,0 +1,69 @@
+// Color scheme - List Group
+
+@mixin generate-badges($color, $value) {
+  .badge.bg-#{$color} a,
+  .badge.bg-#{$color} {
+    @if $color == light or $color == warning {
+      color: $black;
+    } @else {
+      color: $white;
+    }
+  }
+  .badge-outline-#{$color} a {
+    color: $value !important;
+  }
+  .badge-outline-#{$color} {
+    background: transparent !important;
+    @if $color == light {
+      border: $border-width solid $light;
+      color: $light !important;
+    } @else {
+      border: $border-width solid $value;
+      color: $value !important;
+    }
+  }
+  a.badge {
+    &:focus-within,
+    &:active,
+    &:hover {
+      &.badge-outline-#{$color} {
+        @if $color == dark {
+          background-color: $light !important;
+          border-color: $black;
+        } @else if $color == light {
+          border-color: $white;
+          color: $white;
+          background: rgba($white, 0.3) !important;
+        } @else {
+          background-color: tint-color($value, 90%) !important;
+          border-color: shade-color($value, 15%) !important;
+        }
+      }
+      &.text-bg-#{$color} {
+        background-color: shade-color($value, 15%) !important;
+      }
+    }
+    &.text-bg-#{$color} {
+      &:focus {
+        @if $enable-shadows {
+          @include box-shadow(
+            $btn-box-shadow,
+            0 0 0 $btn-focus-width
+              rgba(mix(color-contrast($value), $value, 15%), 0.5)
+          );
+        } @else {
+          box-shadow: 0
+            0
+            0
+            $btn-focus-width
+            rgba(mix(color-contrast($value), $value, 15%), 0.5);
+        }
+      }
+    }
+    &.badge-outline-#{$color} {
+      &:focus {
+        box-shadow: 0 0 0 $btn-focus-width rgba($value, 0.5);
+      }
+    }
+  }
+}

package/src/scss/color_scheme/_buttons.scss

@@ -0,0 +1,31 @@
+// Color scheme - buttons
+
+@mixin generate-buttons($color, $value) {
+  // Buttons
+  .btn-#{$color} {
+    @if $color == "light" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+        $active-background: shade-color($value, $btn-active-bg-shade-amount),
+        $active-border: shade-color($value, $btn-active-border-shade-amount)
+      );
+    } @else if $color == "dark" {
+      @include button-variant(
+        $value,
+        $value,
+        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
+        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
+        $active-background: tint-color($value, $btn-active-bg-tint-amount),
+        $active-border: tint-color($value, $btn-active-border-tint-amount)
+      );
+    } @else {
+      @include button-variant($value, $value);
+    }
+  }
+  .btn-outline-#{$color} {
+    @include button-outline-variant($value);
+  }
+}

package/src/scss/color_scheme/_link.scss

@@ -0,0 +1,6 @@
+@mixin generate-link($color, $value) {
+  // Links
+  $link-hover-color: shift-color($value, $link-shade-percentage);
+  --bs-link-color: #{$value};
+  --bs-link-hover-color: #{$link-hover-color};
+}

package/src/scss/color_scheme/_list_group.scss

@@ -0,0 +1,15 @@
+// Color scheme - List Group
+
+@mixin generate-list-group($color, $value) {
+  // List group
+  $lg-v-bg: shift-color($value, $list-group-item-bg-scale);
+  $lg-v-color: shift-color($value, $list-group-item-color-scale);
+  @if (contrast-ratio($lg-v-bg, $lg-v-color) < $min-contrast-ratio) {
+    $lg-v-color: mix(
+      $value,
+      color-contrast($lg-v-bg),
+      abs($list-group-item-color-scale)
+    );
+  }
+  @include list-group-item-variant($color, $lg-v-bg, $lg-v-color);
+}

package/src/scss/color_scheme/_text.scss

@@ -0,0 +1,29 @@
+// Color scheme - Text
+
+@mixin generate-text($color, $value) {
+  &.text-color-default {
+    // Accordion
+    --#{$prefix}accordion-btn-color: #{$value};
+    --#{$prefix}accordion-active-color: #{$value};
+    --#{$prefix}accordion-color: #{$value};
+
+    color: $value !important;
+
+    .icon--file {
+      color: $value;
+    }
+    .bcl-header__navbar {
+      .navbar-nav {
+        .nav-link {
+          color: $value;
+        }
+      }
+    }
+    &.bcl-footer--neutral {
+      p,
+      a {
+        color: $value;
+      }
+    }
+  }
+}

package/src/scss/color_scheme/_utilities.scss

@@ -0,0 +1,41 @@
+// Color scheme - utilities
+
+@mixin generate-utilities($color, $value) {
+  $color-rgb: to-rgb($value);
+  &.text-bg-#{$color},
+  .text-bg-#{$color} {
+    color: color-contrast($value)
+      if($enable-important-utilities, !important, null);
+    background-color: RGBA($color-rgb, var(--#{$prefix}bg-opacity, 1))
+      if($enable-important-utilities, !important, null);
+  }
+
+  &.bg-#{$color},
+  .bg-#{$color} {
+    --bs-bg-opacity: 1;
+    background-color: rgba(
+      var(--bs-#{$color}-rgb),
+      var(--bs-bg-opacity)
+    ) !important;
+  }
+
+  .link-#{$color} {
+    color: $value !important; // stylelint-disable-line declaration-no-important
+
+    @if $link-shade-percentage != 0 {
+      &:hover,
+      &:focus {
+        color: if(
+          color-contrast($value) == $color-contrast-light,
+          shade-color($value, $link-shade-percentage),
+          tint-color($value, $link-shade-percentage)
+        ) !important; // stylelint-disable-line declaration-no-important
+      }
+    }
+  }
+  @if $color == "primary" {
+    .icon--primary {
+      color: $value;
+    }
+  }
+}

package/src/scss/color_scheme/generator.scss

@@ -0,0 +1,25 @@
+@each $scheme-name, $scheme-array in $colors-schemes {
+  .#{$scheme-name} {
+    $theme-colors-rgb: map-loop($scheme-array, to-rgb, "$value");
+    @each $color, $value in $theme-colors-rgb {
+      --#{$prefix}#{$color}-rgb: #{$value};
+    }
+    @each $color, $value in $scheme-array {
+      --#{$prefix}#{$color}: #{$value};
+
+      @if $color == "text" {
+        @include generate-text($color, $value);
+      } @else if $color == "link" {
+        @include generate-link($color, $value);
+      } @else if $color == "background" {
+        @include generate-background($color, $value);
+      } @else {
+        @include generate-alerts($color, $value);
+        @include generate-buttons($color, $value);
+        @include generate-list-group($color, $value);
+        @include generate-badges($color, $value);
+        @include generate-utilities($color, $value);
+      }
+    }
+  }
+}

package/templates/bcl-fact-figures/fact-figures.html.twig

@@ -93,7 +93,7 @@
           icon: _item.icon|merge({
             path: _icon_path,
             size: 'l',
-            attributes: _icon_attributes.addClass('mb-2'),
+            attributes: _icon_attributes.addClass(['mb-2', 'icon--primary']),
           })
         }) %}
         {% include '@oe-bcl/bcl-icon/icon.html.twig' with _item.icon only %}

package/templates/bcl-file/file-translations.html.twig

@@ -69,18 +69,21 @@
             {% endif %}
           </div>
           <div class="col-12 col-md-3 align-self-end text-md-end">
-          {% include '@oe-bcl/bcl-link/link.html.twig' with _item.download|merge({
+          {% set download_attributes = create_attribute()
+                                      .setAttribute('download', true)
+                                      .setAttribute('target', '_blank')
+                                      .addClass(['d-block', 'standalone', 'mt-1'])
+          %}
+          {% set _download_item = _item.download|merge({
             icon_position: "after",
             icon: {
               name: "download",
               size: "fluid",
               path: _icon_path,
-            },
-            attributes: create_attribute()
-                        .setAttribute('download', true)
-                        .setAttribute('target', '_blank')
-                        .addClass(['d-block', 'standalone', 'mt-1'])
-          }) only %}
+            }|merge(_item.download.icon|default({})),
+            attributes: download_attributes.merge(_item.download.attributes|default(create_attribute()))
+          }) %}
+          {% include '@oe-bcl/bcl-link/link.html.twig' with _download_item only %}
           </div>
         </div>
       {% endif %}

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

@@ -138,17 +138,18 @@
           </small>
           {% endif %}
         </div>
+        {% set download_attributes = create_attribute()
+                                      .setAttribute('download', 'true')
+                                      .setAttribute('target', '_blank')
+                                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0', 'flex-shrink-0']) %}
         {% set _download = _download|merge({
           icon_position: "after",
           icon: {
             name: "download",
             size: "fluid",
             path: _icon_path,
-          },
-          attributes: create_attribute()
-                      .setAttribute('download', true)
-                      .setAttribute('target', '_blank')
-                      .addClass(['standalone', 'align-self-center', 'd-inline-block', 'mt-1', 'mt-md-0', 'flex-shrink-0'])
+          }|merge(_download.icon|default({})),
+          attributes: download_attributes.merge(_download.attributes|default(create_attribute()))
         }) %}
         {% include '@oe-bcl/bcl-link/link.html.twig' with _download only %}
       </div>

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

@@ -35,18 +35,18 @@
 
 {% set attributes = attributes.addClass(_classes) %}
 
-<div
-  {{ attributes }}
->
-  {% 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(_title_classes),
-    } only %}
-  {% endif %}
-  {% if _links is not empty and _links is iterable %}
+{% if _links is not empty and _links is iterable %}
+  <div
+    {{ attributes }}
+  >
+    {% 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(_title_classes),
+      } only %}
+    {% endif %}
     <ul class="ps-0 mb-0">
       {% for _link in _links %}
         {% if _link.attributes is empty %}
@@ -70,7 +70,7 @@
         </li>
       {% endfor %}
     </ul>
-  {% endif %}
-</div>
+  </div>
+{% endif %}
 
 {% endapply %}