refactor(cxl-lumo-styles): typography Raleway -> Montserrat

conversionxl · Jan 12, 2024 · 7a41cc5 · 7a41cc5
1 parent d84380f
commit 7a41cc5
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 9 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/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>