fix css (#2351)

Co-authored-by: Alexis Gaillard <a@bypopcorn.com>
ec-europa · Mar 7, 2022 · d213273 · d213273 · github-actions · Mar 7, 2022
1 parent 4c2c477
commit d213273
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 6 deletions.
diff --git a/src/implementations/vanilla/components/featured-item/_featured-item.scss b/src/implementations/vanilla/components/featured-item/_featured-item.scss
@@ -7,6 +7,8 @@
 @use '@ecl/theme-dev/theme';
 @use '@ecl/vanilla-layout-grid/mixins/breakpoints';
 
+$_heading-color: null !default;
+$_title-color: null !default;
 $_text-color: null !default;
 $_heading-mobile-font: null !default;
 $_heading-font: null !default;
@@ -24,7 +26,7 @@ $_extended-padding-top: null !default;
 $_extended-padding-bottom: null !default;
 
 .ecl-featured-item__heading {
-  color: $_text-color;
+  color: $_heading-color;
   font: $_heading-mobile-font;
   font-weight: map.get(theme.$font-weight, 'bold');
   margin-bottom: $_heading-mobile-margin-bottom;
@@ -45,7 +47,7 @@ $_extended-padding-bottom: null !default;
 }
 
 .ecl-featured-item__title {
-  color: $_text-color;
+  color: $_title-color;
   font: map.get(theme.$font-prolonged, 'l');
   font-weight: map.get(theme.$font-weight, 'bold');
   margin-bottom: $_title-margin-bottom;
@@ -55,7 +57,6 @@ $_extended-padding-bottom: null !default;
 .ecl-featured-item__description {
   color: $_text-color;
   font: map.get(theme.$font-prolonged, 'm');
-  font-weight: map.get(theme.$font-weight, 'bold');
   margin-bottom: $_title-margin-bottom;
   margin-top: 0;
 }

diff --git a/src/implementations/vanilla/components/featured-item/featured-item-ec.scss b/src/implementations/vanilla/components/featured-item/featured-item-ec.scss
@@ -1,7 +1,9 @@
 @use 'sass:map';
 @use '@ecl/theme-dev/theme';
 @use 'featured-item' with (
-  $_text-color: map.get(theme.$color, 'black'),
+  $_heading-color: map.get(theme.$color, 'black'),
+  $_title-color: map.get(theme.$color, 'grey-100'),
+  $_text-color: map.get(theme.$color, 'grey-100'),
   $_heading-mobile-font: map.get(theme.$font, '3xl'),
   $_heading-font: map.get(theme.$font, '4xl'),
   $_heading-mobile-margin-bottom: map.get(theme.$spacing, 's'),

diff --git a/src/implementations/vanilla/components/featured-item/featured-item-eu.scss b/src/implementations/vanilla/components/featured-item/featured-item-eu.scss
@@ -1,7 +1,9 @@
 @use 'sass:map';
 @use '@ecl/theme-dev/theme';
 @use 'featured-item' with (
-  $_text-color: map.get(theme.$color, 'grey-140'),
+  $_heading-color: map.get(theme.$color, 'grey-140'),
+  $_title-color: map.get(theme.$color, 'grey-140'),
+  $_text-color: map.get(theme.$color, 'grey-80'),
   $_heading-mobile-font: map.get(theme.$font, '3xl'),
   $_heading-font: map.get(theme.$font, '2xl'),
   $_heading-mobile-margin-bottom: map.get(theme.$spacing, 'm'),

diff --git a/src/implementations/vanilla/components/media-container/_media-container.scss b/src/implementations/vanilla/components/media-container/_media-container.scss
@@ -10,6 +10,7 @@
 $_border-radius: null !default;
 $_shadow: null !default;
 $_caption-background-color: null !default;
+$_caption-color: null !default;
 $_caption-border: null !default;
 $_caption-padding: null !default;
 $_scrollbar-width: 16px; // average scrollbar width; used in full screen calculus
@@ -35,7 +36,7 @@ $_scrollbar-width: 16px; // average scrollbar width; used in full screen calculu
 .ecl-media-container__caption {
   background-color: $_caption-background-color;
   border: $_caption-border;
-  color: map.get(theme.$color, 'grey');
+  color: $_caption-color;
   font: map.get(theme.$font-prolonged, 'm');
   padding: $_caption-padding;
   position: relative;

diff --git a/src/implementations/vanilla/components/media-container/media-container-ec.scss b/src/implementations/vanilla/components/media-container/media-container-ec.scss
@@ -4,6 +4,7 @@
   $_border-radius: 0,
   $_shadow: none,
   $_caption-background-color: map.get(theme.$color, 'grey-5'),
+  $_caption-color: map.get(theme.$color, 'grey-100'),
   $_caption-border: 1px solid map.get(theme.$color, 'grey-25'),
   $_caption-padding: map.get(theme.$spacing, 's')
 );
diff --git a/src/implementations/vanilla/components/media-container/media-container-eu.scss b/src/implementations/vanilla/components/media-container/media-container-eu.scss
@@ -4,6 +4,7 @@
   $_border-radius: 8px,
   $_shadow: 0 0 6px rgba(map.get(theme.$color, 'blue'), 0.2),
   $_caption-background-color: map.get(theme.$color, 'white'),
+  $_caption-color: map.get(theme.$color, 'grey-80'),
   $_caption-border: none,
   $_caption-padding: map.get(theme.$spacing, 'l')
 );