Merge pull request #386 from conversionxl/pawel/feat/typography-monts…

…errat
conversionxl · Jan 12, 2024 · d9d2309 · d9d2309
2 parents d84380f + d8f616b
commit d9d2309
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 11 deletions.
diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss
@@ -113,7 +113,7 @@ strong {
   h2 &,
   h3 & {
     color: var(--lumo-primary-color);
-    font-weight: 900;
+    font-weight: inherit;
   }
 }
 

diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
@@ -9,9 +9,9 @@ html {
    *
    * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#font-family
    */
-  --lumo-font-family: "lato", sans-serif;
-  --cxl-lumo-font-secondary: "lato", sans-serif;
-  --cxl-lumo-font-ternary: raleway, sans-serif;
+  --lumo-font-family: 'lato', sans-serif;
+  --cxl-lumo-font-secondary: 'lato', sans-serif;
+  --cxl-lumo-font-ternary: 'Montserrat', sans-serif;
 
   /**
    * Font size.
@@ -70,24 +70,24 @@ h1 {
 
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
-  font-weight: 900;
+  font-weight: 700;
   line-height: var(--cxl-lumo-line-height-xxs);
 }
 
 h3 {
   font-size: var(--lumo-font-size-xl);
-  font-weight: 900;
+  font-weight: 700;
 }
 
 h4 {
   @media #{mq.$small} {
     font-size: var(--lumo-font-size-xl);
   }
 
-  font-weight: 700;
+  font-weight: 500;
 
   b, strong {
-    font-weight: 900;
+    font-weight: 700;
   }
 }
 

diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -157,6 +157,7 @@ header {
 
     .name {
       @include mixins.ellipsis-for-lines(2);
+      font-family: var(--lumo-font-family);
       margin-block: 0;
 
       a {

diff --git a/packages/cxl-ui/scss/cxl-featured-course-card.scss b/packages/cxl-ui/scss/cxl-featured-course-card.scss
@@ -40,8 +40,12 @@
       padding: 0;
     }
 
-    .name strong {
-      color: var(--lumo-primary-color);
+    .name {
+      font-family: var(--cxl-lumo-font-ternary);
+
+      strong {
+        color: var(--lumo-primary-color);
+      }
     }
 
     .info {

diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss
@@ -44,6 +44,7 @@ cxl-vaadin-accordion {
     .entry-title {
       flex: 1;
       height: calc(var(--cxl-lumo-line-height-xs) * 4em);
+      font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       word-break: break-word;
     }

diff --git a/packages/storybook/.storybook/preview-head.html b/packages/storybook/.storybook/preview-head.html
@@ -3,4 +3,4 @@
   // @see https://bugs.chromium.org/p/chromium/issues/detail?id=946975
   delete Document.prototype.adoptedStyleSheets;
 </script>
-<link rel="stylesheet" id="cxl-font-css"  href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i,900&family=Libre+Baskerville:400,400i,700&family=Lato&family=Raleway:wght@400;500;700;900" type="text/css" media="all">
+<link rel="stylesheet" id="cxl-font-css"  href="https://fonts.googleapis.com/css?family=Lato|Montserrat:400,400i,500,500i,700,700i,900,900i&display=swap" type="text/css" media="all">
diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -17,9 +17,13 @@ export const Base = () => html`
   <h2>Heading 2</h2>
   <h2>Heading 2 with <strong>highlight</strong></h2>
   <h3>Heading 3</h3>
+  <h3>Heading 3 with <strong>highlight</strong></h3>
   <h4>Heading 4</h4>
+  <h4>Heading 4 with <strong>highlight</strong></h4>
   <h5>Heading 5</h5>
+  <h5>Heading 5 with <strong>highlight</strong></h5>
   <h6>Heading 6</h6>
+  <h6>Heading 6 with <strong>highlight</strong></h6>
   <p>Paragraph text.</p>
   <p><a href="https://cxl.com">Paragraph link</a></p>
   <p><a href="https://cxl.com" target="_blank">Paragraph link external.</a></p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -113,7 +113,7 @@ strong { @@
       h2 &,
       h3 & {
         color: var(--lumo-primary-color);
-        font-weight: 900;
+        font-weight: inherit;
       }
     }
@@ Expand Down @@