@openeuropa/bcl-theme-default 1.9.1 → 1.9.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "@openeuropa/bcl-theme-default",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "1.9.1",
+  "version": "1.9.2",
   "description": "OE - BCL theme default",
   "scripts": {
     "align-templates": "lerna --scope \"@openeuropa/bcl-twig-templates\" run prepublish",
@@ -22,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.9.1",
-    "@openeuropa/bcl-builder": "^1.9.1",
-    "@openeuropa/bcl-twig-templates": "^1.9.1",
+    "@openeuropa/bcl-bootstrap": "^1.9.2",
+    "@openeuropa/bcl-builder": "^1.9.2",
+    "@openeuropa/bcl-twig-templates": "^1.9.2",
     "@rollup/plugin-replace": "6.0.2",
     "copyfiles": "2.4.1",
     "cross-env": "7.0.3",
@@ -50,5 +50,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "70554ede8523da73edc3c786661e687a30fb2315"
+  "gitHead": "4ffc129d7f11f3e1b7f283c36379ea458af986b7"
 }

package/src/js/accordion-toggle/accordion-toggle.js

@@ -1,4 +1,3 @@
-/* eslint-disable prefer-destructuring */
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import EventHandler from "@openeuropa/bcl-bootstrap/js/src/dom/event-handler";
 import SelectorEngine from "@openeuropa/bcl-bootstrap/js/src/dom/selector-engine";

package/src/js/index.esm.js

@@ -10,10 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
-import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
-import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
-import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -21,6 +18,9 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 
 export {
   Alert,
@@ -28,10 +28,7 @@ export {
   Carousel,
   Collapse,
   Dropdown,
-  Gallery,
   Modal,
-  AccessibleToggle,
-  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
@@ -39,4 +36,7 @@ export {
   Tab,
   Toast,
   Tooltip,
+  Gallery,
+  AccessibleToggle,
+  AccordionToggle,
 };

package/src/js/index.umd.js

@@ -10,10 +10,7 @@ import Button from "@openeuropa/bcl-bootstrap/js/src/button";
 import Carousel from "@openeuropa/bcl-bootstrap/js/src/carousel";
 import Collapse from "@openeuropa/bcl-bootstrap/js/src/collapse";
 import Dropdown from "@openeuropa/bcl-bootstrap/js/src/dropdown";
-import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
 import Modal from "@openeuropa/bcl-bootstrap/js/src/modal";
-import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
-import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
 import Offcanvas from "@openeuropa/bcl-bootstrap/js/src/offcanvas";
 import Popover from "@openeuropa/bcl-bootstrap/js/src/popover";
 import ScrollSpyV2 from "@openeuropa/bcl-bootstrap/js/src/scrollspy";
@@ -21,6 +18,9 @@ import ScrollSpy from "@openeuropa/bcl-bootstrap/js/src/scrollspy-legacy";
 import Tab from "@openeuropa/bcl-bootstrap/js/src/tab";
 import Toast from "@openeuropa/bcl-bootstrap/js/src/toast";
 import Tooltip from "@openeuropa/bcl-bootstrap/js/src/tooltip";
+import AccordionToggle from "@openeuropa/bcl-theme-default/src/js/accordion-toggle/accordion-toggle";
+import Gallery from "@openeuropa/bcl-theme-default/src/js/gallery/gallery";
+import AccessibleToggle from "@openeuropa/bcl-theme-default/src/js/accessible-toggle/accessible-toggle";
 
 export default {
   Alert,
@@ -28,10 +28,7 @@ export default {
   Carousel,
   Collapse,
   Dropdown,
-  Gallery,
   Modal,
-  AccessibleToggle,
-  AccordionToggle,
   Offcanvas,
   Popover,
   ScrollSpyV2,
@@ -39,4 +36,7 @@ export default {
   Tab,
   Toast,
   Tooltip,
+  Gallery,
+  AccessibleToggle,
+  AccordionToggle,
 };

package/src/scss/base/_colors.scss

@@ -9,6 +9,11 @@ $success: #09854c;
 $light: #f8f9fa;
 $dark: #212529;
 
+$gray-200: #e9ecef;
+$gray-400: #ced4da;
+$gray-600: #6c757d;
+$gray-700: #495057;
+
 $text-muted: #495057;
 
 // Color variants scales
@@ -16,6 +21,29 @@ $text-muted: #495057;
 // Tables
 $table-hover-bg-factor: 0.1;
 
-// Alerts
-$alert-bg-scale: -90%;
-$alert-border-scale: -80%;
+// Background colors as before for Alerts and list-group
+$primary-bg-subtle: tint-color($primary, 90%);
+$secondary-bg-subtle: tint-color($secondary, 90%);
+$success-bg-subtle: tint-color($success, 90%);
+$info-bg-subtle: tint-color($info, 90%);
+$warning-bg-subtle: tint-color($warning, 90%);
+$danger-bg-subtle: tint-color($danger, 90%);
+
+$primary-border-subtle: tint-color($primary, 80%);
+$secondary-border-subtle: tint-color($secondary, 80%);
+$success-border-subtle: tint-color($success, 80%);
+$info-border-subtle: tint-color($info, 80%);
+$warning-border-subtle: tint-color($warning, 80%);
+$danger-border-subtle: tint-color($danger, 80%);
+
+// Colors as in Bootstrap 5.2.3
+
+$breadcrumb-active-color: $gray-600;
+$form-check-input-border: 1px solid #00000040;
+$input-border-color: $gray-400;
+$body-secondary-color: $gray-700;
+$input-placeholder-color: $gray-600;
+$form-file-button-bg: $gray-200;
+$nav-link-disabled-color: $gray-600;
+$table-border-factor: 0.1;
+$nav-tabs-link-active-color: $gray-700;

package/src/scss/color_scheme/_alert.scss

@@ -1,18 +1,22 @@
 // Color scheme - Alert
 
+// No longer using $alert-bg-scale, $alert-border-scale, $alert-color-scale variables because they are deprecated in bootstrap 5.3.x
+
+@use "sass:math";
+
 @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);
+  $bg: shift-color($value, -80%);
+  $border: shift-color($value, -70%);
+  $text: shift-color($value, 40%);
 
-  @if (contrast-ratio($alert-background, $alert-color) < $min-contrast-ratio) {
-    $alert-color: mix(
-      $value,
-      color-contrast($alert-background),
-      abs($alert-color-scale)
-    );
+  @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
+    $text: mix($value, color-contrast($bg), math.abs(40%));
   }
+
   .alert-#{$color} {
-    @include alert-variant($alert-background, $alert-border, $alert-color);
+    --#{$prefix}alert-bg: #{$bg};
+    --#{$prefix}alert-border-color: #{$border};
+    --#{$prefix}alert-color: #{$text};
+    --#{$prefix}alert-link-color: #{$text}; // or some other logic
   }
 }

package/src/scss/color_scheme/_background.scss

@@ -6,6 +6,7 @@
     $accordion-button-active-bg: tint-color($value, 90%);
     --#{$prefix}accordion-bg: #{$value};
     --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+    --#{$prefix}table-bg: #{$value};
 
     // Card
     .card {

package/src/scss/color_scheme/_list_group.scss

@@ -1,15 +1,20 @@
 // Color scheme - List Group
 
+@use "sass:math";
+
 @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)
-    );
+  $bg: shift-color($value, -80%);
+  $text: $value;
+  $border: shift-color($value, 40%);
+
+  @if (contrast-ratio($bg, $text) < $min-contrast-ratio) {
+    $text: mix($value, color-contrast($bg), math.abs(40%));
+  }
+
+  .list-group-item-#{$color} {
+    // Required base CSS variables
+    --#{$prefix}list-group-color: #{$text};
+    --#{$prefix}list-group-bg: #{$bg};
+    --#{$prefix}list-group-border-color: #{$border};
   }
-  @include list-group-item-variant($color, $lg-v-bg, $lg-v-color);
 }

package/src/scss/oe-bcl-default.scss

@@ -1,8 +1,10 @@
+// Configuration Variables
+@import "@openeuropa/bcl-bootstrap/scss/functions";
+
 // Base theme colors
 @import "@openeuropa/bcl-theme-default/src/scss/base/colors";
 
-// Configuration
-@import "@openeuropa/bcl-bootstrap/scss/functions";
+// Configuration Methods Maps and Mixins
 @import "@openeuropa/bcl-bootstrap/scss/variables";
 @import "@openeuropa/bcl-bootstrap/scss/maps";
 @import "@openeuropa/bcl-bootstrap/scss/mixins";