refactor(cxl-lumo-styles): update cxl-lumo-styles and storybook

conversionxl · Nov 7, 2023 · fd215c1 · fd215c1
1 parent 4483d0a
commit fd215c1
Show file tree

Hide file tree

Showing 18 changed files with 235 additions and 71 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -127,6 +127,7 @@ img {
 ol,
 ul {
   padding-left: var(--lumo-space-l);
+  font-family: var(--cxl-lumo-font-secondary);
 }
 
 /**
@@ -268,18 +269,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="x-large"]), :host(.cxl-homepage-button) {
+  --lumo-button-size: calc(var(--lumo-size-xl) * 1.25);
+  cursor: pointer;
+  padding: 1.25em 3.5em 1.25em 3em;
+  font-size: calc(var(--lumo-font-size-xxxl) / 2) !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,7 @@
+/* stylelint-disable selector-no-qualifying-type */
 @use "./icons";
 @use "./mq";
+@use "./mixins";
 
 html {
   /**
@@ -16,9 +18,22 @@ 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
+  --cxl-lumo-line-height-xxs: 1.15;
 
   @media #{mq.$small} {
-    --cxl-lumo-font-size-hero: 4rem;
+    --cxl-lumo-font-size-hero: 3.5rem;
   }
 }
 
@@ -34,11 +49,13 @@ h4,
 h5,
 h6 {
   font-weight: 700;
+  line-height: var(--cxl-lumo-line-height-xs);
   word-break: break-word;
 }
 
 h1 {
   margin-top: 0;
+  margin-bottom: 0.75em;
   font-size: var(--cxl-lumo-font-size-hero);
   font-weight: 900;
 
@@ -49,15 +66,66 @@ h1 {
 }
 
 h2 {
-  @media #{mq.$small} {
-    font-size: var(--lumo-font-size-xxxl);
+  font-size: var(--cxl-lumo-font-size-xxl);
+  line-height: var(--cxl-lumo-line-height-xxs);
+
+  &.wp-block-heading {
+    &.separator {
+      &::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-xl);
+  font-weight: 700;
 }
 
 h4 {
@@ -75,6 +143,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-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -156,12 +156,12 @@ header {
     }
 
     .name {
-      @include mixins.ellipsis-for-lines(3);
+      @include mixins.ellipsis-for-lines(2);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       font-style: normal;
       font-weight: 700;
-      line-height: var(--lumo-line-height-xs);
+      line-height: var(--cxl-lumo-line-height-xs);
 
       a {
         color: var(--lumo-body-text-color);

diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -85,7 +85,7 @@ footer {
     &::part(content) {
       padding-bottom: 0;
       font-size: var(--lumo-font-size-s);
-      line-height: var(--lumo-line-height-s);
+      line-height: var(--cxl-lumo-line-height-s);
     }
   }
 

diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss
@@ -38,7 +38,6 @@
       height: 12px;
       font-size: 8px;
       font-weight: 700;
-      line-height: normal;
       color: var(--lumo-tint);
       content: attr(count);
       background-color: var(--lumo-primary-color);

diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss
@@ -33,6 +33,7 @@
         padding-top: var(--lumo-space-xs);
         padding-bottom: 0;
         gap: var(--lumo-space-xs);
+        align-items: start;
       }
 
       cxl-time {

diff --git a/packages/cxl-ui/scss/cxl-like-or-dislike.scss b/packages/cxl-ui/scss/cxl-like-or-dislike.scss
@@ -24,7 +24,7 @@
 
     span {
       margin-left: var(--lumo-space-s);
-      line-height: var(--lumo-line-height-xs);
+      line-height: var(--cxl-lumo-line-height-xs);
     }
   }
 

diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss
@@ -11,24 +11,6 @@
   display: flow-root;
 }
 
-/**
- * Wave design bottom.
- */
-:host(.has-wave) {
-  position: relative;
-
-  .wrap {
-    z-index: 1;
-  }
-}
-
-#wave {
-  position: absolute;
-  bottom: 0;
-  display: block;
-  width: 100%;
-}
-
 /**
  * Content readability.
  */
@@ -54,3 +36,16 @@
     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/cxl-ui/scss/global/cxl-app-layout.scss b/packages/cxl-ui/scss/global/cxl-app-layout.scss
@@ -72,12 +72,6 @@ cxl-app-layout {
     }
   }
 
-  &[layout^="2c"] {
-    > .entry > .entry-header > .entry-title {
-      font-size: var(--lumo-font-size-xxxl);
-    }
-  }
-
   &[layout^="2c"][wide] {
     iframe {
       height: $iframe-height * 2;

diff --git a/packages/cxl-ui/scss/global/cxl-card.scss b/packages/cxl-ui/scss/global/cxl-card.scss
@@ -1,8 +1,4 @@
 cxl-card {
-  p {
-    font-family: inherit;
-  }
-
   .entry-header {
     .thumbnail {
       margin: 0 auto;

diff --git a/packages/cxl-ui/scss/global/cxl-course-dialog.scss b/packages/cxl-ui/scss/global/cxl-course-dialog.scss
@@ -102,10 +102,6 @@ vaadin-dialog-overlay[theme="cxl-course-dialog"] {
     max-width: 75%;
     padding-bottom: var(--lumo-space-l);
     margin: 0 auto;
-
-    p {
-      font-family: var(--cxl-lumo-font-secondary);
-    }
   }
 
   .content-tags {

diff --git a/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss b/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss
@@ -15,7 +15,6 @@ cxl-playbook-accordion {
     .entry-title {
       margin-top: 0.5em; /* match h3 */
       margin-right: var(--lumo-space-m);
-      font-size: var(--lumo-font-size-m);
     }
 
     > vaadin-checkbox {

diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -15,10 +15,6 @@ cxl-vaadin-accordion {
       --vaadin-icon-width: var(--vaadin-icon-height);
     }
 
-    p {
-      font-family: inherit;
-    }
-
     .entry {
       //mixin affects: .entry-header > label
       @include mixins.label-contrast("> .entry-header") {
@@ -47,7 +43,7 @@ cxl-vaadin-accordion {
 
     .entry-title {
       flex: 1;
-      height: calc(var(--lumo-line-height-xs) * 4em);
+      height: calc(var(--cxl-lumo-line-height-xs) * 4em);
       font-size: var(--lumo-font-size-xl);
       word-break: break-word;
     }
@@ -100,10 +96,6 @@ cxl-vaadin-accordion {
    * Theme "cxl-minidegree-course".
    */
   &[theme~="cxl-minidegree-course"] {
-    p {
-      font-family: inherit;
-    }
-
     .entry-header {
       display: grid;
       grid-column-gap: var(--lumo-space-m);
@@ -160,10 +152,6 @@ cxl-vaadin-accordion {
       --vaadin-icon-width: var(--vaadin-icon-height);
     }
 
-    p {
-      font-family: inherit;
-    }
-
     .entry {
       @include mixins.label-contrast("> .entry-header") {
         flex-basis: 100%;
@@ -220,7 +208,7 @@ cxl-vaadin-accordion {
       flex: 1;
       flex-basis: auto;
       /* stylelint-disable-next-line declaration-no-important */
-      height: calc(var(--lumo-line-height-xs) * 3em) !important;
+      height: calc(var(--cxl-lumo-line-height-xs) * 3em) !important;
       margin-top: 0;
       margin-bottom: 0;
       overflow: hidden;

diff --git a/packages/cxl-ui/scss/jw-player/chapter.scss b/packages/cxl-ui/scss/jw-player/chapter.scss
@@ -61,7 +61,7 @@
   padding: var(--lumo-space-s) 0;
   margin-bottom: var(--lumo-space-s);
   font-size: var(--lumo-font-size-s);
-  line-height: var(--lumo-line-height-xs);
+  line-height: var(--cxl-lumo-line-height-xs);
   cursor: pointer;
 }
 

diff --git a/packages/cxl-ui/src/components/cxl-section.js b/packages/cxl-ui/src/components/cxl-section.js
@@ -1,4 +1,5 @@
-import { LitElement, html, svg } from 'lit';
+/* eslint-disable import/no-extraneous-dependencies */
+import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
 import cxlSectionStyles from '../styles/cxl-section-css';
@@ -14,13 +15,6 @@ export class CXLSectionElement extends LitElement {
       <section class="wrap">
         <slot></slot>
       </section>
-      ${this.classList.contains('has-wave')
-        ? svg`
-        <svg id="wave" xmlns="http://www.w3.org/2000/svg">
-          <path d="M2054 128.79c-106.66 2.043-211.23 3.9-317.46 12.811-138.06 11.581-273.38 4.22-407.8-23.61C1134.57 77.796 984.18 17.54 742.28 14.259 565.44 11.857 259.72 7.614 0 0v246.37h2560c-65.21-27.369-126.32-63.768-195.36-84.649-98.3-29.68-205.7-34.945-310.64-32.932z" fill="#fff"></path>
-        </svg>
-      `
-        : ''}
     `;
   }
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,7 +24,7 @@ @@
         span {
           margin-left: var(--lumo-space-s);
-          line-height: var(--lumo-line-height-xs);
+          line-height: var(--cxl-lumo-line-height-xs);
         }
       }
@@ Expand Down @@