Update styles

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

@@ -3,7 +3,7 @@ html,
   --cxl-brand-color-black: #1a1a1a;
   --cxl-brand-color-green: #007951;
   --cxl-brand-color-light-blue: #cce7ff;
-  --cxl-brand-color-light-blue-30pct: #CCE7FF4D;
+  --cxl-brand-color-light-blue-30pct: #cce7ff4d;
   --cxl-brand-color-blue: #65abc3;
 
   /**
@@ -32,8 +32,16 @@ html,
    * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/colors.html#grayscale
    */
   --lumo-shade: hsl(0, 0%, 10%);
-  --lumo-contrast: hsl(0, 0%, 10%);
-  --lumo-contrast-20pct: hsl(0, 0%, 20%);
+  --lumo-shade-5pct: hsla(0, 0%, 10%, 0.05);
+  --lumo-shade-10pct: hsla(0, 0%, 10%, 0.1);
+  --lumo-shade-20pct: hsla(0, 0%, 10%, 0.16);
+  --lumo-shade-30pct: hsla(0, 0%, 10%, 0.26);
+  --lumo-shade-40pct: hsla(0, 0%, 10%, 0.38);
+  --lumo-shade-50pct: hsla(0, 0%, 10%, 0.52);
+  --lumo-shade-60pct: hsla(0, 0%, 10%, 0.6);
+  --lumo-shade-70pct: hsla(0, 0%, 10%, 0.69);
+  --lumo-shade-80pct: hsla(0, 0%, 10%, 0.83);
+  --lumo-shade-90pct: hsla(0, 0%, 10%, 0.94);
 
   /**
    * Text

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: 'Montserrat', 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,8 +70,13 @@ h1 {
 
 h2 {
   font-size: var(--cxl-lumo-font-size-xxl);
-  font-weight: 700;
+  font-weight: 900;
   line-height: var(--cxl-lumo-line-height-xxs);
+
+  b,
+  strong {
+    font-weight: inherit;
+  }
 }
 
 h3 {
@@ -86,7 +91,8 @@ h4 {
 
   font-weight: 500;
 
-  b, strong {
+  b,
+  strong {
     font-weight: 700;
   }
 }

packages/cxl-ui/scss/global/cxl-dashboard-section.scss

@@ -125,6 +125,7 @@ cxl-dashboard-section {
   }
 
   .title-3 {
+    opacity: 0.5;
     padding: var(--lumo-space-s) 0;
   }
 

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

@@ -8,7 +8,7 @@ cxl-stats {
   .stat-title {
     margin: 0 0 var(--lumo-space-s) 0;
     font-size: var(--lumo-font-size-xs);
-    font-weight: 400;
+    font-weight: 500;
     line-height: 1;
     color: var(--cxl-color-black-50pct);
     text-transform: uppercase;

packages/cxl-ui/src/components/cxl-dashboard-header.js

@@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import {LitElement, html, nothing} from 'lit';
+import { LitElement, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import '@conversionxl/cxl-lumo-styles';
 import './cxl-dashboard-notification';
@@ -14,7 +14,8 @@ export class CXLDashboardHeaderElement extends LitElement {
 
   @property({ type: Number, attribute: 'notification-count' }) notificationCount = 0;
 
-  @property({ type: String, attribute: 'notification-title' }) notificationTitle = "What's new in CXL";
+  @property({ type: String, attribute: 'notification-title' }) notificationTitle =
+    "What's new in CXL";
 
   @property({ type: Object }) notificationData = null;
 
@@ -63,16 +64,18 @@ export class CXLDashboardHeaderElement extends LitElement {
             <h1 class="title">${this.title}, <span class="username">${this.name}.</span></h1>
             ${this._renderNotifications()}
           </div>
-          ${this.showCompletedStats ? html`
-            <slot name="completed-stats" class="completed-stats"></slot>
-          ` : nothing}
+          ${this.showCompletedStats
+            ? html` <slot name="completed-stats" class="completed-stats"></slot> `
+            : nothing}
         </header>
-        ${this.showContinueSlider ? html`
-          <div class="slider">
-            <span class="slider-title">Continue where you left off</span>
-            <slot name="continue-slider" class="slider-slider"></slot>
-          </div>
-        ` : nothing}
+        ${this.showContinueSlider
+          ? html`
+              <div class="slider">
+                <span class="slider-title">Continue where you left off</span>
+                <slot name="continue-slider" class="slider-slider"></slot>
+              </div>
+            `
+          : nothing}
       </section>
     `;
   }
@@ -84,30 +87,41 @@ export class CXLDashboardHeaderElement extends LitElement {
           <header>
             <div class="header-flex">
               <h2 class="title">Training Roadmap</h2>
-              ${this.showRoadmapStats ? html`
-                <vaadin-button class="edit-roadmap" onclick="window.location.href='${this.editRoadmapLinkUrl}'">
-                  <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
-                  Edit <span class="edit-roadmap-text-affix">roadmap</span>
-                </vaadin-button>
-              ` : nothing}
+              ${this.showRoadmapStats
+                ? html`
+                    <vaadin-button
+                      class="edit-roadmap"
+                      onclick="window.location.href='${this.editRoadmapLinkUrl}'"
+                    >
+                      <vaadin-icon slot="prefix" icon="lumo:edit"></vaadin-icon>
+                      Edit <span class="edit-roadmap-text-affix">roadmap</span>
+                    </vaadin-button>
+                  `
+                : nothing}
             </div>
-            ${this.showRoadmapStats ? html`<slot name="roadmap-stats" class="roadmap-stats"></slot>` : nothing}
+            ${this.showRoadmapStats
+              ? html`<slot name="roadmap-stats" class="roadmap-stats"></slot>`
+              : nothing}
           </header>
-          ${!this.showRoadmapStats && !this.showRoadmapSlider ? html`
-            <vaadin-button
-              class="roadmap"
-              onclick="window.location.href='${this.createRoadmapLinkUrl}'"
-            >
-              Create your personal learning roadmap
-              <vaadin-icon icon="lumo:arrow-right"></vaadin-icon>
-            </vaadin-button>
-          ` : nothing}
-          ${this.showRoadmapSlider ? html`
-            <div class="slider">
-                <span class="slider-title">Next up</span>
-                <slot name="next-slider" class="slider-slider"></slot>
-            </div>
-          ` : nothing}
+          ${!this.showRoadmapStats && !this.showRoadmapSlider
+            ? html`
+                <vaadin-button
+                  class="roadmap"
+                  onclick="window.location.href='${this.createRoadmapLinkUrl}'"
+                >
+                  Create your personal learning roadmap
+                  <vaadin-icon icon="lumo:arrow-right"></vaadin-icon>
+                </vaadin-button>
+              `
+            : nothing}
+          ${this.showRoadmapSlider
+            ? html`
+                <div class="slider">
+                  <span class="slider-title">Next up</span>
+                  <slot name="next-slider" class="slider-slider"></slot>
+                </div>
+              `
+            : nothing}
         </section>
       `;
     }
@@ -122,7 +136,9 @@ export class CXLDashboardHeaderElement extends LitElement {
           <header>
             <h2 class="title">Minidegrees</h2>
           </header>
-          <slot name="minidegree-slider"></slot>
+          <div class="slider">
+            <slot name="minidegree-slider"></slot>
+          </div>
         </section>
       `;
     }
@@ -133,8 +149,7 @@ export class CXLDashboardHeaderElement extends LitElement {
   render() {
     return html`
       <div class="container">
-        ${this._renderUserSection()}
-        ${this._renderRoadmapSection()}
+        ${this._renderUserSection()} ${this._renderRoadmapSection()}
         ${this._renderMinidegreesSection()}
       </div>
     `;