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

…yles
conversionxl · Nov 1, 2023 · 79817e6 · 79817e6
1 parent 82b720e
commit 79817e6
Show file tree

Hide file tree

Showing 17 changed files with 240 additions and 65 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -126,6 +126,7 @@ img {
 ol,
 ul {
   padding-left: var(--lumo-space-l);
+  font-family: var(--cxl-lumo-font-secondary);
 }
 
 /**
@@ -267,18 +268,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,30 +49,87 @@ 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;
-
+  line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
   b,
   strong {
     font-weight: inherit;
   }
 }
 
 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 {
+    &.no-separator {
+      &::after {
+        /* stylelint-disable-next-line declaration-no-important */
+        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-xl);
+  font-weight: 700;
 }
 
 h4 {
@@ -75,6 +147,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
@@ -157,12 +157,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-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss
@@ -43,33 +43,8 @@
     }
   }
 
-  .icon-bell {
-    position: relative;
-    margin-right: 14px;
-
-    &::after {
-      position: absolute;
-      top: 4px;
-      right: -7px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 12px;
-      height: 12px;
-      font-size: 8px;
-      font-weight: 700;
-      color: var(--lumo-tint);
-      content: attr(count);
-      background-color: var(--lumo-primary-color);
-      border: 2px solid var(--cxl-color-dark-gray);
-      border-radius: 100%;
-    }
-  }
-
   .title {
     margin: 0;
-    font-size: var(--lumo-font-size-xxxl);
-    line-height: 1.4;
   }
 
   .content {

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
@@ -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/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;
 }