@ecl/gallery 5.0.0-alpha.14 → 5.0.0-alpha.16

package/gallery-overlay.html.twig

@@ -24,7 +24,6 @@
 {% set _css_media_class = 'ecl-gallery__slider-media-container' %}
 {% set _extra_attributes = '' %}
 {% set _button_type = 'button' %}
-{% set _button_variant = 'ghost' %}
 {% set _overlay = overlay|default({}) %}
 {% set _item = item|default({}) %}
 
@@ -57,7 +56,8 @@
   <header class="ecl-gallery__close" data-ecl-gallery-overlay-header>
     {% include '@ecl/button/button.html.twig' with _overlay.close|merge({
       extra_classes: 'ecl-gallery__close-button',
-      variant: _button_variant,
+      variant: 'tertiary',
+      style: 'inverted',
       type: 'submit',
       extra_attributes: [
         { name: 'data-ecl-gallery-close' },

package/gallery.html.twig

@@ -168,7 +168,7 @@
         {% include '@ecl/button/button.html.twig' with {
           label: _view_all_label,
           type: 'submit',
-          variant: 'ghost',
+          variant: 'tertiary',
           extra_attributes: [
             { name: 'data-ecl-gallery-all' },
             { name: 'data-ecl-gallery-collapsed-label', value: _view_all_label },

package/gallery.scss

@@ -53,7 +53,11 @@ $_description-height-desktop: 108px;
 .ecl-gallery__item-icon-wrapper {
   background: var(--cm-on-surface-dark, var(--c-d));
   box-shadow: 0 0 15px 6px
-    color-mix(in srgb, var(--cm-surface-dark, var(--c-d-80)) 55%, transparent);
+    color-mix(
+      in srgb,
+      var(--cm-on-surface-neutral-highest, var(--c-d-80)) 55%,
+      transparent
+    );
   display: inline-block;
   position: absolute;
   left: 50%;
@@ -121,10 +125,6 @@ $_description-height-desktop: 108px;
   }
 }
 
-.ecl-gallery__image-icon {
-  display: none;
-}
-
 .ecl-gallery__description {
   align-items: center;
   bottom: 0;
@@ -178,7 +178,7 @@ $_description-height-desktop: 108px;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
-  max-width: 1140px;
+  max-width: map.get($theme, 'container', 'xxl');
   padding-top: var(--s-xs);
 }
 
@@ -219,16 +219,6 @@ $_description-height-desktop: 108px;
     margin: 0 auto;
   }
 
-  .ecl-gallery__image-icon {
-    background-color: map.get($gallery, 'description-background');
-    bottom: 0;
-    display: block;
-    fill: $_description-color;
-    padding: var(--s-s);
-    position: absolute;
-    right: 0;
-  }
-
   .ecl-gallery__footer {
     align-items: center;
     flex-direction: row;
@@ -320,13 +310,7 @@ $_description-height-desktop: 108px;
 }
 
 .ecl-gallery__close-button {
-  color: #fff;
   margin: var(--s-xs);
-
-  &:focus-visible {
-    border-color: #fff;
-    color: #fff;
-  }
 }
 
 .ecl-gallery__controls {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@ecl/gallery",
   "author": "European Commission",
   "license": "EUPL-1.2",
-  "version": "5.0.0-alpha.14",
+  "version": "5.0.0-alpha.16",
   "description": "ECL Gallery",
   "publishConfig": {
     "access": "public"
@@ -11,13 +11,13 @@
   "module": "gallery.js",
   "style": "gallery.scss",
   "dependencies": {
-    "@ecl/button": "5.0.0-alpha.14",
-    "@ecl/dom-utils": "5.0.0-alpha.14",
-    "@ecl/icon": "5.0.0-alpha.14",
-    "@ecl/link": "5.0.0-alpha.14",
-    "@ecl/picture": "5.0.0-alpha.14",
-    "@ecl/video": "5.0.0-alpha.14",
-    "focus-trap": "7.6.4"
+    "@ecl/button": "5.0.0-alpha.16",
+    "@ecl/dom-utils": "5.0.0-alpha.16",
+    "@ecl/icon": "5.0.0-alpha.16",
+    "@ecl/link": "5.0.0-alpha.16",
+    "@ecl/picture": "5.0.0-alpha.16",
+    "@ecl/video": "5.0.0-alpha.16",
+    "focus-trap": "7.6.5"
   },
   "repository": {
     "type": "git",
@@ -33,5 +33,5 @@
     "design-system",
     "twig"
   ],
-  "gitHead": "5f790fa1e567483d23464f81405996c9e1c4f4f5"
+  "gitHead": "0842ff3b72ce9099c13e5407ad2b5eda9d06ba69"
 }