fix(cxl-lumo-styles): matching current live home page

conversionxl · Sep 7, 2023 · 05eea70 · 05eea70
1 parent 227aed6
commit 05eea70
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
@@ -1,8 +1,8 @@
-:host([theme~="large"].cxl-cta) {
-  --lumo-button-size: 3em;
+: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: var(var-lumo-font-size-l) !important;
+  font-size: 20px !important;
 }
 
 :host(.wide) {

diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
@@ -48,15 +48,14 @@ h5,
 h6 {
   font-weight: 700;
   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);
   font-weight: 900;
-  line-height: 1;
-  text-transform: uppercase;
   b,
   strong {
     font-weight: inherit;
@@ -125,8 +124,9 @@ h2 {
 }
 
 h3 {
-  font-size: var(--lumo-font-size-xxl);
-  line-height: var(--lumo-line-height-xs);
+  font-size: var(--lumo-font-size-xl);
+  line-height: var(--lumo-line-height-m);
+  font-weight: 500;
 }
 
 h4 {

diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js
@@ -105,7 +105,7 @@ export const CXLComExamples = () => html`
     <div>
       <h1><strong>Top 1% marketers</strong> teach you what they know.</h1>
       <h3>Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.</h3>
-      <vaadin-button id="cxl-onboarding" class="cxl-cta" role="button" theme="primary large">
+      <vaadin-button id="cxl-onboarding" class="cxl-homepage-button" role="button" theme="primary x-large">
         Sign up now
         <!-- <vaadin-icon slot="suffix" icon="lumo:arrow-right"></vaadin-icon> -->
       </vaadin-button>
@@ -171,7 +171,7 @@ export const CXLComExamples = () => html`
       <li>2500+ playbooks</li>
       <li>Exclusive community access</li>
     </div>
-    <vaadin-button id="cxl-onboarding" class="cxl-cta wide" role="button" theme="primary large">
+    <vaadin-button id="cxl-onboarding" class="cxl-homepage-button wide" role="button" theme="primary x-large">
       Sign up now
       <!-- <vaadin-icon slot="suffix" icon="lumo:arrow-right"></vaadin-icon> -->
     </vaadin-button>