From e31e4607423e3a879d4380353a5ee2b70b1cc599 Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Wed, 27 Sep 2023 14:24:51 -0300
Subject: [PATCH] fix(cxl-ui): adjust styles, fix course card issues with new
 styles

---
 packages/cxl-lumo-styles/scss/themes/vaadin-button.scss | 2 +-
 packages/cxl-lumo-styles/scss/typography.scss           | 6 ++++--
 packages/cxl-ui/scss/cxl-course-card.scss               | 6 ++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
index a85834970..073ee583c 100644
--- a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
+++ b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss
@@ -2,7 +2,7 @@
   --lumo-button-size: calc(var(--lumo-size-xl) * 1.25);
   cursor: pointer;
   padding: 1.25em 3.5em 1.25em 3em;
-  font-size: 20px !important;
+  font-size: calc(var(--lumo-font-size-xxxl) / 2) !important;
 }
 
 :host(.wide) {
diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss
index 1838cf1f4..1c04faed4 100644
--- a/packages/cxl-lumo-styles/scss/typography.scss
+++ b/packages/cxl-lumo-styles/scss/typography.scss
@@ -29,6 +29,7 @@ html {
   --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: 3.5rem;
@@ -55,6 +56,7 @@ 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;
   b,
   strong {
@@ -64,6 +66,7 @@ h1 {
 
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
+  line-height: var(--cxl-lumo-line-height-xxs);
 
   &.wp-block-heading {
     &.no-separator {
@@ -125,8 +128,7 @@ h2 {
 
 h3 {
   font-size: var(--lumo-font-size-xl);
-  line-height: var(--lumo-line-height-m);
-  font-weight: 500;
+  font-weight: 700;
 }
 
 h4 {
diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
index 668ff393b..d47287483 100644
--- a/packages/cxl-ui/scss/cxl-course-card.scss
+++ b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -1,4 +1,6 @@
 /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix -- some of these are necessary for line-clamp implementation */
+/* stylelint-disable declaration-no-important */
+
 @use "~@conversionxl/cxl-ui/scss/mixins";
 
 :host {
@@ -14,9 +16,9 @@ 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);
-  height: 100%;
 
   .content {
     @include mixins.ellipsis-for-lines(5);
@@ -40,8 +42,8 @@ header .name {
 }
 
 footer {
-  display: flex;
   position: relative;
+  display: flex;
   justify-content: end;
 
   vaadin-details[theme="reverse"] {