refactor(cxl-lumo-styles): update storybook with current home page st…

…yles
conversionxl · Sep 7, 2023 · c67d6d6 · c67d6d6
1 parent 68b81d4
commit c67d6d6
Show file tree

Hide file tree

Showing 7 changed files with 294 additions and 11 deletions.
diff --git a/packages/cxl-lumo-styles/scss/_mixins.scss b/packages/cxl-lumo-styles/scss/_mixins.scss
@@ -43,3 +43,65 @@
     max-width: $max-width;
   }
 }
+
+/*
+* Typography Styles mixins
+*/
+
+@mixin light {
+  font-weight: 300;
+}
+
+@mixin regular {
+  font-weight: 400;
+}
+
+@mixin bold {
+  font-weight: 900;
+}
+
+@mixin italic {
+  font-style: italic;
+}
+
+@mixin label {
+  font-size: var(--lumo-font-size-s);
+  line-height: var(--cxl-lumo-line-height-m); // closest
+}
+
+@mixin title {
+  @extend bold;
+  font-size: var(--lumo-font-size-xxxl);
+  line-height: var(--cxl-lumo-line-height-xs);
+}
+
+@mixin subtitle {
+  @extend light;
+  font-size: var(--lumo-font-size-xxl);
+  line-height: var(--cxl-lumo-line-height-xs); // same as 35px, closest value to target (36px)
+}
+
+@mixin heading-2 {
+  @extend bold;
+  font-size: calc(2 * var(--lumo-font-size-xxs));
+  line-height: var(--cxl-lumo-line-height-s); // closest
+}
+
+@mixin heading-4 {
+  @extend bold;
+  font-size: var(--lumo-font-size-l);
+  line-height: var(--cxl-lumo-line-height-s); // closest
+}
+
+@mixin component-text {
+  @extend regular;
+  font-size: var(--lumo-font-size-m);
+  line-height: var(--cxl-lumo-line-height-m);
+}
+
+@mixin body-text {
+  @extend regular;
+  font-family: var(cxl-lumo-font-secondary);
+  font-size: var(--lumo-font-size-m);
+  line-height: var(--cxl-lumo-line-height-l);
+}
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -124,6 +124,7 @@ img {
 ol,
 ul {
   padding-left: var(--lumo-space-l);
+  font-family: var(--cxl-lumo-font-secondary);
 }
 
 /**
@@ -265,18 +266,18 @@ ol.ordered-list-heavy {
 /* stylelint-enable order/properties-order */
 
 ul.courses-list {
+  padding-left: 0;
   font-family: inherit;
   list-style: none;
-  padding-left: 0;
 
   cxl-card {
+    display: flex;
     align-items: center;
+    padding: var(--lumo-space-m) var(--lumo-space-s);
+    margin: 0;
     border: none;
     border-radius: 0;
     box-shadow: none;
-    display: flex;
-    margin: 0;
-    padding: var(--lumo-space-m) var(--lumo-space-s);
 
     .entry-byline {
       margin-bottom: 0;

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
@@ -0,0 +1,10 @@
+:host([theme~="large"].cxl-cta) {
+  --lumo-button-size: 3em;
+  cursor: pointer;
+  padding: 1.25em 3.5em 1.25em 3em;
+  font-size: var(var-lumo-font-size-l) !important;
+}
+
+:host(.wide) {
+  width: 100%;
+}
diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
@@ -1,5 +1,6 @@
 @use "./icons";
 @use "./mq";
+@use "./mixins";
 
 html {
   /**
@@ -16,9 +17,21 @@ html {
    * @ see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#font-size
    */
   --cxl-lumo-font-size-hero: var(--lumo-font-size-xxxl);
+  --cxl-lumo-font-size-xxl: calc(var(--lumo-font-size-xl) + var(--lumo-font-size-m));
+
+  /**
+   * Line height.
+   *
+   * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#line-height
+   */
+  --cxl-lumo-line-height-xl: 2;
+  --cxl-lumo-line-height-l: var(--lumo-line-height-m); // 1.625
+  --cxl-lumo-line-height-m: 1.5;
+  --cxl-lumo-line-height-s: var(--lumo-line-height-s); // 1.375
+  --cxl-lumo-line-height-xs: var(--lumo-line-height-xs); // 1.25
 
   @media #{mq.$small} {
-    --cxl-lumo-font-size-hero: 4rem;
+    --cxl-lumo-font-size-hero: 3.5rem;
   }
 }
 
@@ -39,25 +52,81 @@ h6 {
 
 h1 {
   margin-top: 0;
+  margin-bottom: 0.75em;
   font-size: var(--cxl-lumo-font-size-hero);
   font-weight: 900;
-
+  line-height: 1;
+  text-transform: uppercase;
   b,
   strong {
     font-weight: inherit;
   }
 }
 
 h2 {
-  @media #{mq.$small} {
-    font-size: var(--lumo-font-size-xxxl);
+  font-size: var(--cxl-lumo-font-size-xxl);
+
+  &.wp-block-heading {
+    &.no-separator {
+      &::after {
+        display: none !important;
+      }
+    }
+
+    &::after {
+      display: block;
+      width: 33%;
+      height: 3px;
+      margin: 1.5em auto 1.5em 0;
+      font-size: 16px;
+      content: "";
+      background: var(--lumo-primary-color);
+    }
+
+    &.separator-wide {
+      &::after {
+        width: 100%;
+      }
+    }
+
+    &.center {
+      text-align: center;
+      &::after {
+        margin: 1.5em auto;
+      }
+    }
+
+    &.right {
+      text-align: right;
+      &::after {
+        margin: 1.5em 0 1.5em auto;
+      }
+    }
+
+    &.separator-white {
+      &::after {
+        background: #fff;
+      }
+    }
+
+    &.separator-black {
+      &::after {
+        background: #000;
+      }
+    }
+
+    &.separator-gray {
+      &::after {
+        background: var(--lumo-contrast-20pct);
+      }
+    }
+
   }
 }
 
 h3 {
-  @media #{mq.$small} {
-    font-size: var(--lumo-font-size-xxl);
-  }
+  font-size: var(--lumo-font-size-xxl);
+  line-height: var(--lumo-line-height-xs);
 }
 
 h4 {
@@ -75,6 +144,7 @@ h6 {
 }
 
 p {
+  font-family: var(--cxl-lumo-font-secondary);
   .entry-content & {
     font-family: var(--cxl-lumo-font-secondary);
   }

diff --git a/packages/cxl-lumo-styles/src/themes.js b/packages/cxl-lumo-styles/src/themes.js
@@ -14,6 +14,7 @@ import cxlVaadinNotificationContainerStyles from './styles/themes/vaadin-notific
 import cxlVaadinOverlayStyles from './styles/themes/vaadin-overlay-css.js';
 import cxlVaadinTabStyles from './styles/themes/vaadin-tab-css.js';
 import cxlVaadinTabsStyles from './styles/themes/vaadin-tabs-css.js';
+import cxlVaadinButtonStyles from './styles/themes/vaadin-button-css.js';
 
 /* Mixins, alphabetic order. */
 registerStyles('cxl-accordion-card', cxlAccordionCardStyles, {
@@ -61,3 +62,6 @@ registerStyles('vaadin-tab', cxlVaadinTabStyles, {
 registerStyles('vaadin-tabs', cxlVaadinTabsStyles, {
   moduleId: 'cxl-vaadin-tabs-styles',
 });
+registerStyles('vaadin-button', cxlVaadinButtonStyles, {
+  moduleId: 'cxl-vaadin-button-styles',
+})
diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
@@ -54,3 +54,17 @@
     max-width: var(--cxl-content-max-width-wide);
   }
 }
+
+:host(.has-gray-background-color) {
+  background-color: var(--cxl-color-light-gray);
+}
+
+:host(.has-black-background-color) {
+  color: var(--lumo-tint);
+  background-color: #000;
+
+  > * {
+    --lumo-header-text-color: var(--lumo-tint);
+  }
+}
+
diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -1,5 +1,7 @@
 import '@conversionxl/cxl-lumo-styles';
+import '@conversionxl/cxl-ui';
 import '@vaadin/button';
+import cxlColorStyles from '@conversionxl/cxl-lumo-styles/src/styles/color-css';
 import { withKnobs } from '@storybook/addon-knobs';
 import { html } from 'lit';
 
@@ -64,3 +66,123 @@ export const Examples = () => {
     <p>${loremIpsum}</p>
   `;
 };
+
+
+export const CXLComExamples = () => html`
+  <style>
+    ${cxlColorStyles}
+
+    cxl-section {
+      padding: 2em 0;
+      --cxl-content-max-width: 34em;
+    }
+
+    cxl-section.wide {
+      --cxl-content-max-width: 60em;
+    }
+
+    .flex {
+      display: flex;
+    }
+
+    .w50-pct > * {
+      flex-basis: 50%;
+    }
+
+    .hero > div {
+      display: flex;
+      flex-direction: column;
+      gap: 3.75em;
+      align-items: start;
+    }
+
+    .hero > div h1,
+    .hero > div h3 {
+      margin: 0 auto;
+    }
+  </style>
+
+  <cxl-section class="hero has-black-background-color">
+    <div>
+      <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-cta" role="button" theme="primary large">
+        Sign up now
+        <vaadin-icon slot="suffix" icon="lumo:arrow-right"></vaadin-icon>
+      </vaadin-button>
+    </div>
+  </cxl-section>
+
+  <cxl-section class="has-gray-background-color wide">
+    <h2 class="wp-block-heading center no-separator">On-demand courses taught by <strong>elite marketers</strong> from companies like Drift, ClickUp and Hubspot.</h2>
+  </cxl-section>
+
+  <cxl-section class="wide">
+    <div class="flex w50-pct">
+      <div class="wrap">
+        <h2 class="wp-block-heading">Learn from the <strong>legitimate experts</strong> with a proven track record</h2>
+        <p>
+          Betting your career and your company's growth on some guru's playbook is dangerous.
+        </p>
+        <p>
+          We identify the top 1% masters of the marketing craft through a rock-solid vetting process that we've been perfecting for over a decade. Then we get them to teach you what they're best at.
+        </p>
+        <p>
+          <a href="https://cxl.com/institute/">Browse all courses and instructors here.</a>
+        </p>
+      </div>
+      <div></div>
+    </div>
+  </cxl-section>
+
+  <cxl-section class="has-black-background-color wide">
+    <div class="flex w50-pct">
+      <div class="wrap">
+        <h2 class="wp-block-heading separator-white">How we identify and vet <strong>top 1% marketers</strong></h2>
+        <p>
+          This is how we find and vet the top 1% marketers:
+        </p>
+        <ol>
+          <li>We regularly survey the marketing community for experts they want to learn from</li>
+          <li>We narrow down the list through a reference check, talking to their peers and executives</li>
+          <li>We make sure they have a proven track record, meaning they’ve significantly contributed to growth of more than 2 companies</li>
+        </ol>
+      </div>
+    </div>
+  </cxl-section>
+
+  <cxl-section class="has-gray-background-color wide">
+    <div class="flex w50-pct">
+      <div class="wrap">
+        <h2 class="wp-block-heading"><strong>Help your company grow</strong> with frameworks that bring results</h2>
+        <p>
+          In 2016, Drift’s CEO, David Cancel, famously said that the era of product-based differentiation is going away. By now, we can conclude that it has already gone away.
+        </p>
+      </div>
+      <div></div>
+    </div>
+  </cxl-section>
+
+  <cxl-section class="has-black-background-color">
+    <div class="wrap">
+      <h2 class="wp-block-heading center separator-white"><strong>All access</strong> Subscription</h2>
+    <ul>
+      <li>Access to 90+ courses and 11 minidegrees</li>
+      <li>Earn certificates and add them to your LinkedIn profile</li>
+      <li>2500+ playbooks</li>
+      <li>Exclusive community access</li>
+    </div>
+    <vaadin-button id="cxl-onboarding" class="cxl-cta wide" role="button" theme="primary large">
+      Sign up now
+      <vaadin-icon slot="suffix" icon="lumo:arrow-right"></vaadin-icon>
+    </vaadin-button>
+  </cxl-section>
+  <cxl-section>
+    <div class="wrap">
+      <h2 class="wp-block-heading center separator-gray">Become certified in 10 minidegrees</h2>
+      <p>
+        Each course is a puzzle piece teaching discrete skills. Each Minidegree is a completed puzzle teaching a marketing discipline from A to Z and takes you on a path towards becoming the top 1% marketer. After going through the entire curriculum, you’ll be given an exam that earns you a CXL certificate. Add your certificates to your LinkedIn profile, share your accomplishments with the world, and join our alumni network.
+      </p>
+    </div>
+  </cxl-section>
+`