feat(banner): color modes - FRONT-4743 (#3800)

* feat(banner): color modes - FRONT-4743

* feat(banner): fixes - FRONT-4743

src/components/banner/README.md

@@ -8,6 +8,7 @@ npm install --save @ecl/banner
 
 ### Parameters
 
+- **"color_mode"** (string) (default: '') Name of the color mode
 - **"size"** (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
 - **"font_size"** (string) (default: 'm') Size of the title and description (can be 'm', 'l')
 - **"font_color"** (string) (default: 'dark') Color of the title and description (can be 'dark', 'light')

src/components/banner/banner.html.twig

@@ -2,6 +2,7 @@
 
 {#
   Parameters:
+  - "color_mode" (string) (default: '') Name of the color mode
   - "size" (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
   - "font_size" (string) (default: 'm') Size of the title and description (can be 'm', 'l')
   - "font_color" (string) (default: 'dark') Color of the title and description (can be 'dark', 'light')
@@ -51,6 +52,7 @@
 
 {% set _css_class = 'ecl-banner' %}
 {% set _extra_attributes = 'data-ecl-banner data-ecl-auto-init="Banner"' %}
+{% set _color_mode = color_mode|default('') %}
 {% set _picture = picture|default({}) %}
 {% set _video = video|default({}) %}
 {% set _size = size|default('m') %}
@@ -78,6 +80,10 @@
 
 {# Internal logic - Process properties #}
 
+{% if _color_mode is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ 'ecl-color-mode--' ~ _color_mode %}
+{% endif %}
+
 {% if _variant is not empty %}
   {% set _css_class = _css_class ~ ' ecl-banner--' ~ _variant %}
 {% endif %}

src/components/banner/banner.scss

@@ -40,7 +40,7 @@ $banner: null !default;
 
 .ecl-banner__credit {
   background-color: map.get($banner, 'background-color');
-  color: var(--c-d);
+  color: var(--cm-on-surface-dark, var(--c-d));
   font: var(--f-s);
   padding-bottom: var(--s-2xs);
   padding-top: var(--s-2xs);
@@ -128,15 +128,15 @@ $banner: null !default;
 .ecl-banner__play.ecl-button--icon-only,
 .ecl-banner__pause.ecl-button--icon-only {
   align-items: center;
-  background-color: var(--c-d);
+  background-color: var(--cm-on-surface-dark, var(--c-d));
   border: none;
   border-radius: 50%;
   bottom: calc(var(--s-m) + var(--banner-footer-height));
-  color: map.get($theme, 'color', 'white');
+  color: #fff;
   justify-content: center;
   min-height: 32px;
   min-width: 32px;
-  outline: 2px solid map.get($theme, 'color', 'white');
+  outline: #fff;
   outline-offset: -4px;
   position: absolute;
   right: var(--s-m);
@@ -145,10 +145,10 @@ $banner: null !default;
   &:hover,
   &:active,
   &:focus-visible {
-    background-color: map.get($theme, 'color', 'white');
+    background-color: #fff;
     border: none;
-    color: var(--c-d);
-    outline-color: var(--c-d);
+    color: var(--cm-on-surface-dark, var(--c-d));
+    outline-color: var(--cm-on-surface-dark, var(--c-d));
     padding: 0;
   }
 
@@ -280,7 +280,7 @@ $banner: null !default;
 
     .ecl-banner--box-bg-dark & {
       box-decoration-break: clone;
-      background: var(--c-ov-l);
+      background: var(--cm-surface-transparent-70, var(--c-ov-l));
       backdrop-filter: blur(2px);
     }
   }
@@ -457,7 +457,7 @@ $banner: null !default;
   .ecl-banner__title-link,
   .ecl-banner__description,
   .ecl-banner__description-link {
-    color: var(--c-d);
+    color: var(--cm-on-surface-dark, var(--c-d));
   }
 }
 
@@ -499,7 +499,7 @@ $banner: null !default;
   .ecl-banner__title-link,
   .ecl-banner__description,
   .ecl-banner__description-link {
-    color: var(--c-d);
+    color: var(--cm-on-surface-dark, var(--c-d));
   }
 }
 
@@ -535,7 +535,7 @@ $banner: null !default;
     .ecl-banner__title-link,
     .ecl-banner__description,
     .ecl-banner__description-link {
-      color: map.get($theme, 'color', 'white');
+      color: #fff;
     }
 
     .ecl-banner__description {

src/components/banner/banner.story.js

@@ -1,6 +1,7 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
-import { correctPaths } from '@ecl/story-utils';
+import { getColorModeControls, correctPaths } from '@ecl/story-utils';
+import getSystem from '@ecl/builder/utils/getSystem';
 
 // Import data for demos
 import bannerDataImage from './demo/data--image';
@@ -32,12 +33,16 @@ const getArgs = (data) => {
   if (data.picture) {
     args.image = data.picture.img.src || '';
   }
+  if (getSystem() === 'ec') {
+    args.color_mode = 'default';
+  }
 
   return args;
 };
 
 const getArgTypes = (data) => {
   const argTypes = {
+    ...getColorModeControls(),
     show_title: {
       name: 'title',
       type: { name: 'boolean' },

src/themes/ec/_custom-properties.scss

@@ -91,7 +91,7 @@
   --ecl-color-neutral-light-300: #{map.get($color-default, 'neutral-light-300')};
   --ecl-color-neutral-light-200: #{map.get($color-default, 'neutral-light-200')};
   --ecl-color-neutral-light-100: #{map.get($color-default, 'neutral-light-100')};
-  --ecl-color-neutral-light-50: #{map.get($color-default, 'neutral-dark-50')};
+  --ecl-color-neutral-light-50: #{map.get($color-default, 'neutral-light-50')};
   --ecl-color-info: #{map.get($color-default, 'info-500')};
   --ecl-color-info-900: #{map.get($color-default, 'info-900')};
   --ecl-color-info-800: #{map.get($color-default, 'info-800')};
@@ -365,7 +365,7 @@
   --cm-surface-secondary: var(--c-s);
   --cm-surface-secondary-high: var(--c-s-400);
   --cm-surface-secondary-highest: var(--c-s-500);
-  --cm-surface-neutral-lowest: var(--c-l-200);
+  --cm-surface-neutral-lowest: var(--c-l-50);
   --cm-surface-neutral-low: var(--c-l-300);
   --cm-on-surface-dark: var(--c-d);
   --cm-on-surface-dark-medium: var(--c-d-700);

src/themes/ec/variables/_banner.scss

@@ -2,9 +2,9 @@
 @use '../index' as *;
 
 $banner: (
-  background-color: var(--c-n-40),
+  background-color: var(--cm-surface-lowest),
   content-width: 42.5rem,
-  content-background: var(--c-bg),
+  content-background: var(--cm-surface-inverted),
   content-border-radius: 0,
   content-padding: var(--s-l) var(--s-xl) var(--s-xl),
   container-padding-bottom: (
@@ -31,9 +31,9 @@ $banner: (
     'bottom': 0,
   ),
   text-color: (
-    'dark': var(--c-d),
-    'light': map.get($color, 'white'),
-    'inverted': map.get($color, 'white'),
+    'dark': var(--cm-on-surface-dark),
+    'light': #fff,
+    'inverted': #fff,
   ),
   font: (
     'title': (
@@ -51,9 +51,9 @@ $banner: (
   // DEPRECATED
   background: (
       'plain-background': var(--c-p),
-      'text-box-mobile': var(--c-n-40),
-      'text-box-desktop': var(--c-bg),
-      'text-overlay': var(--c-p),
+      'text-box-mobile': var(--c-l-50),
+      'text-box-desktop': var(--cm-surface-inverted),
+      'text-overlay': var(--c-l-50),
     ),
 );
 $banner-print: (