refactor(cxl-ui): clear typography style overrides

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

@@ -43,65 +43,3 @@
     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);
-}

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

@@ -1,3 +1,4 @@
+/* stylelint-disable selector-no-qualifying-type */
 @use "./icons";
 @use "./mq";
 @use "./mixins";
@@ -48,16 +49,16 @@ h4,
 h5,
 h6 {
   font-weight: 700;
+  line-height: var(--cxl-lumo-line-height-xs);
   word-break: break-word;
-  line-height: var(--lumo-line-height-xs);
 }
 
 h1 {
   margin-top: 0;
   margin-bottom: 0.75em;
   font-size: var(--cxl-lumo-font-size-hero);
-  line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
   font-weight: 900;
+  line-height: calc(var(--cxl-lumo-line-height-xl) / 2);
   b,
   strong {
     font-weight: inherit;
@@ -71,6 +72,7 @@ h2 {
   &.wp-block-heading {
     &.no-separator {
       &::after {
+        /* stylelint-disable-next-line declaration-no-important */
         display: none !important;
       }
     }
@@ -122,7 +124,6 @@ h2 {
         background: var(--lumo-contrast-20pct);
       }
     }
-
   }
 }
 

packages/cxl-ui/scss/cxl-base-card.scss

@@ -145,7 +145,7 @@ header {
       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);
     }
 
     .attributes {

packages/cxl-ui/scss/cxl-course-card.scss

@@ -17,8 +17,8 @@ header .name {
 
 .content-wrapper {
   height: 100%;
-  min-height: calc(var(--lumo-line-height-s) * 6); // Six standard line-heights
-  line-height: var(--lumo-line-height-s);
+  min-height: calc(var(--cxl-lumo-line-height-s) * 6); // Six standard line-heights
+  line-height: var(--cxl-lumo-line-height-s);
 
   .content {
     @include mixins.ellipsis-for-lines(5);
@@ -73,7 +73,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);
     }
   }
 

packages/cxl-ui/scss/cxl-dashboard-header.scss

@@ -45,33 +45,10 @@
     }
   }
 
-  .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;
+    // font-size: var(--lumo-font-size-xxxl);
+    // line-height: 1.4;
   }
 
   .content {

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);

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);
     }
   }
 

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

@@ -1,8 +1,4 @@
 cxl-card {
-  p {
-    font-family: inherit;
-  }
-
   .entry-header {
     .thumbnail {
       margin: 0 auto;

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 {

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 {

packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss

@@ -11,10 +11,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") {
@@ -43,7 +39,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;
     }
@@ -96,10 +92,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);
@@ -156,10 +148,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%;
@@ -216,7 +204,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;

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