feat(cxl-ui): cxl-section - implement hero section design facelift

packages/cxl-lumo-styles/scss/_mixins.scss

@@ -43,3 +43,76 @@
     max-width: $max-width;
   }
 }
+
+@mixin wide-background {
+  position: relative;
+  overflow-x: hidden;
+  background-repeat: no-repeat !important;
+  background-size: auto clamp(65%, 40vw, 90%) !important;
+
+  &::before {
+    position: absolute;
+    bottom: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    content: "";
+    border-radius: calc(6 * var(--lumo-border-radius-l))
+
+  }
+}
+
+@mixin extend-background-left {
+  background-position: bottom right calc(50vw + clamp(48px,5%,100px)) !important;
+
+  &::before {
+    right: 50%;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+@mixin extend-background-right {
+  background-position: bottom left calc(50vw + clamp(48px,5%,100px)) !important;
+
+  &::before {
+    left: 50%;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+@mixin wide-background-hero {
+  &::before {
+    height: clamp(164px, calc(2 * var(--figure-height-factor)), calc(100 * var(--figure-height-factor))/2);
+    bottom: 50%;
+    transform: translateY(50%);
+  }
+}
+
+// Use ::after pseudo element to add hero background image. url must be set to CSS custom property --hero-image
+@mixin wide-background-hero-image {
+  &::after {
+    content: "";
+    position: absolute;
+    left: 55%;
+    width: 100%;
+    height: clamp(calc(50% + 82px), calc(50% + var(--figure-height-factor)), calc(50% + var(--figure-height-factor)));
+    max-height: calc(50% + var(--figure-height-factor));
+    background-image: var(--hero-image);
+    background-repeat: no-repeat !important;
+    background-size: auto clamp(65%, 40vw, 100%) !important;
+    background-position-x: left !important;
+    background-position-y: bottom;
+    overflow: visible;
+    z-index: -1;
+    bottom: 50%;
+    transform: translateY(var(--figure-height-factor));
+  }
+}
+
+@mixin wide-background-color($background-color: var(--lumo-base-color)) {
+  &::before {
+    background-color: $background-color;
+  }
+}

packages/cxl-lumo-styles/scss/color.scss

@@ -1,12 +1,17 @@
 html,
 :host {
+  --cxl-brand-color-black: #1a1a1a;
+  --cxl-brand-color-green: #007951;
+  --cxl-brand-color-light-blue: #cce7ff;
+  --cxl-brand-color-blue: #65abc3;
+
   /**
    * Primary
    *
    * @see https://github.com/vaadin/vaadin-lumo-styles/blob/v1.5.0/color.html#L57
    */
   --lumo-primary-color: hsl(355.8, 74.7%, 48%);
-  --lumo-primary-color-2pct: hsla(355.8, 74.7%, 48%, 0.02);
+  --lumo-primary-color-2pct: hsla(0, 0%, 4%, 0.02);
   --lumo-primary-color-10pct: hsla(355.8, 74.7%, 48%, 0.1);
   --lumo-primary-color-20pct: hsla(355.8, 74.7%, 48%, 0.2);
   --lumo-primary-color-50pct: hsla(355.8, 74.7%, 48%, 0.5);

packages/cxl-lumo-styles/scss/typography.scss

@@ -82,7 +82,6 @@ h2 {
       }
     }
 
-
     &.separator-wide {
       &::after {
         width: 100%;

packages/cxl-ui/scss/cxl-section.scss

@@ -3,6 +3,8 @@
 
 :host {
   display: block;
+  --figure-height-multiplier: 0.10;
+  --figure-height-factor: calc(var(--figure-height-multiplier) * var(--cxl-content-max-width-wide));
 }
 
 :host([theme~="cxl-section-dashboard-team-content"]) {
@@ -56,3 +58,65 @@
     --lumo-header-text-color: var(--lumo-tint);
   }
 }
+
+:host(#view-hero),
+:host([theme~="cxl-hero"]) {
+  margin-top: var(--lumo-space-xl);
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+
+@media #{mq.$large} {
+  :host(#view-hero) {
+    @include mixins.wide-background();
+    @include mixins.extend-background-right();
+    @include mixins.wide-background-hero();
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host([theme~="cxl-hero"]) {
+    @include mixins.wide-background();
+    @include mixins.extend-background-right();
+    @include mixins.wide-background-hero();
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host(.wide-background) {
+    @include mixins.wide-background();
+  }
+
+  :host(.wide-background-hero) {
+    @include mixins.wide-background-hero();
+  }
+
+  :host(.wide-background-hero-image) {
+    @include mixins.wide-background-hero-image();
+  }
+
+  :host(.wide-background-left) {
+    @include mixins.extend-background-left();
+  }
+
+  :host(.wide-background-right) {
+    @include mixins.extend-background-right();
+  }
+
+  :host(.wide-background-black) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-black));
+  }
+
+  :host(.wide-background-red) {
+    @include mixins.wide-background-color(var(--lumo-primary-color));
+  }
+
+  :host(.wide-background-blue) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-blue));
+  }
+
+  :host(.wide-background-light-blue) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-light-blue));
+  }
+
+  :host(.wide-background-green) {
+    @include mixins.wide-background-color(var(--cxl-brand-color-green));
+  }
+}

packages/cxl-ui/scss/global/cxl-section.scss

@@ -0,0 +1,40 @@
+/* stylelint-disable selector-no-qualifying-type */
+@use "~@conversionxl/cxl-lumo-styles/scss/mq";
+
+
+// Use more specific selector to hide cxl-section background-image.
+cxl-section.wp-block-group.wp-block-cxl-section#view-hero {
+  background: none !important;
+}
+
+cxl-section#view-hero, cxl-section[theme~="cxl-header"] {
+  .column-1 {
+    @media #{mq.$large} {
+      max-width: 45%;
+    }
+  }
+
+  &.wide-background-black,
+  &.wide-background-red,
+  &.wide-background-blue,
+  &.wide-background-green {
+
+    .column-2 * {
+      color: var(--lumo-tint);
+    }
+  }
+
+  &.wide-background-light-blue {
+    #view-hero .cxl-hero-titles {
+      bottom: 0;
+      transform: translateY(50%);
+    }
+
+    .column-2 {
+      * {
+        color: var(--lumo-shade);
+      }
+    }
+  }
+
+}

packages/cxl-ui/src/components/cxl-section.js

@@ -1,8 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
+import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
+import cxlSectionGlobalStyles from '../styles/global/cxl-section-css';
 
 @customElement('cxl-section')
 export class CXLSectionElement extends LitElement {
@@ -17,4 +19,15 @@ export class CXLSectionElement extends LitElement {
       </section>
     `;
   }
+
+  firstUpdated(_changedProperties) {
+    super.firstUpdated(_changedProperties);
+
+    /**
+     * Global styles.
+     */
+    registerGlobalStyles(cxlSectionGlobalStyles, {
+      moduleId: 'cxl-section',
+    });
+  }
 }

packages/storybook/cxl-lumo-styles/typography.stories.js

@@ -79,6 +79,29 @@ export const CXLComExamples = () => html`
       --cxl-content-max-width: 60em;
     }
 
+    #view-hero {
+      margin-bottom: 4em;
+    }
+
+    .pure-u-lg-1-2 {
+      width: 40%;
+      display: inline-block;
+      letter-spacing: normal;
+      word-spacing: normal;
+      vertical-align: top;
+      text-rendering: auto;
+    }
+
+    .wp-block-cxl-section#view-hero {
+      --cxl-content-max-width: 85em;
+
+      background: url(http://localhost:8080/wp-content/uploads/2023/07/ben-labay_team_headshot-1x1-bw-min.png) no-repeat bottom right var(--lumo-shade-5pct);
+      background-size: auto 85%;
+      background-position: bottom right calc( 45% - 200px );
+
+      padding: unset;
+    }
+
     .flex {
       display: flex;
     }
@@ -100,8 +123,8 @@ export const CXLComExamples = () => html`
     }
   </style>
 
-  <cxl-section class="hero has-black-background-color">
-    <div>
+  <cxl-section id="view-hero" class="wide hero wp-block-cxl-section wide-background-black">
+    <div class="pure-u-lg-1-2">
       <h1><strong>Top 1% marketers</strong> teach you what they know.</h1>
       <h3>Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.</h3>
       <vaadin-button id="cxl-onboarding" class="cxl-homepage-button" role="button" theme="primary x-large">