Dashboard 2.0

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

@@ -7,6 +7,11 @@
   color: var(--lumo-primary-text-color);
 }
 
+[theme~="badge"][theme~="secondary"] {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--cxl-color-brand-blue);
+}
+
 .course-skills {
   [theme~="badge"] {
     margin-right: var(--lumo-space-s);

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

@@ -6,6 +6,12 @@ html {
   --cxl-content-max-width: 48em;
   --cxl-content-max-width-wide: calc(var(--cxl-content-max-width) * 2);
   --cxl-wrap-padding: var(--lumo-space-m);
+  --cxl-space-sm: 12px;
+  --cxl-color-light-gray: hsla(0, 0%, 96%, 1);
+  --cxl-color-dark-gray: hsla(240, 1%, 24%, 1);
+  --cxl-color-black-50pct: hsla(0, 0%, 0%, 0.5);
+  --cxl-color-brand-blue: hsla(214, 61%, 25%, 1);
+  --cxl-color-light-pink: hsl(353, 73%, 96%, 1);
 
   /**
    * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons.

packages/cxl-lumo-styles/scss/themes/cxl-tabs-slider.scss

@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 ::slotted(vaadin-tab) {
   align-items: stretch; // Equal height elements.
@@ -31,3 +32,93 @@
     display: initial;
   }
 }
+
+/**
+  * Theme "cxl-course-slider"
+*/
+
+:host([theme~="cxl-course-slider"][theme~="minimal"]) {
+  ::slotted(vaadin-tab) {
+    padding: 0 calc(var(--lumo-space-s) / 2) calc(var(--lumo-space-s) / 2);
+  }
+
+  ::slotted(vaadin-tab:first-of-type) {
+    margin-inline-start: calc(var(--lumo-space-m) - var(--lumo-space-xs));
+
+    @media #{mq.$small} {
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-xs));
+    }
+  }
+
+  &::before,
+  &::after {
+    position: absolute;
+    top: calc(var(--lumo-space-m) * -1);
+    bottom: calc(var(--lumo-space-m) * -1);
+    width: 68px;
+    content: "";
+    background: linear-gradient(270deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    opacity: 0%;
+  }
+
+  [part="tabs"] {
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-space-xl);
+    height: var(--lumo-space-xl);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xxl);
+    }
+  }
+
+  [part="back-button"] {
+    margin-left: var(--lumo-space-s);
+  }
+
+  [part="forward-button"] {
+    margin-right: var(--lumo-space-s);
+  }
+}
+
+:host([theme~="cxl-course-slider"][overflow="start end"]),
+:host([theme~="cxl-course-slider"][overflow="start"]) {
+  &::before {
+    left: 0;
+    z-index: 1;
+    rotate: 180deg;
+    opacity: 100%;
+  }
+}
+
+:host([theme~="cxl-course-slider"][overflow="end"]),
+:host([theme~="cxl-course-slider"][overflow="start end"]) {
+  &::after {
+    right: 0;
+    opacity: 100%;
+  }
+}
+
+/**
+  * Theme "cxl-course-slider" and "cxl-category-accordion"
+*/
+
+:host([theme~="cxl-course-slider"][theme~="cxl-category-accordion"][theme~="minimal"]) {
+  margin-left: calc(-1 * var(--lumo-space-m));
+
+  @media #{mq.$small} {
+    margin-left: calc(-1 * var(--lumo-space-l));
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-accordion-panel.scss

@@ -149,3 +149,43 @@
     padding-bottom: var(--lumo-space-m);
   }
 }
+
+/**
+ * Theme "cxl-dashboard-category".
+ */
+:host([theme~="cxl-dashboard-category"]) {
+  border-top: solid 1px var(--cxl-color-light-gray);
+  border-bottom: none;
+
+  [part="summary"] {
+    padding: var(--lumo-space-l) 0;
+  }
+
+  [part="content"] {
+    padding: 0;
+    margin-bottom: var(--lumo-space-l);
+  }
+
+  [part="toggle"] {
+    margin-right: var(--lumo-space-l);
+  }
+}
+
+:host([theme~="cxl-dashboard-category"][opened]) {
+  [part="summary"] {
+    padding-bottom: 0;
+  }
+}
+
+@media (hover: hover) {
+  :host([theme~="cxl-dashboard-category"]:not([opened])) {
+    [part="summary"]:hover {
+      cursor: pointer;
+      background-color: var(--cxl-color-light-gray);
+
+      [part="toggle"] {
+        color: var(--lumo-shade);
+      }
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-details.scss

@@ -1,3 +1,5 @@
+@use "../mq";
+
 /**
  * Modify toggle visibility.
  */
@@ -34,3 +36,60 @@
     }
   }
 }
+
+// Dashboard notification component
+:host([theme~="cxl-dashboard-notification"]) {
+  margin: 0;
+
+  [part="toggle"] {
+    display: none;
+  }
+
+  [part="content"] {
+    padding: 0;
+  }
+
+  [part="summary"] {
+    display: block;
+    padding: 0;
+  }
+}
+
+// Dashboard header
+:host([theme~="cxl-dashboard-header"]) {
+  margin: var(--lumo-space-s) 0 0;
+  border: 1px solid var(--cxl-color-dark-gray);
+  border-radius: var(--lumo-border-radius-s);
+
+  [part="summary"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--lumo-space-m);
+    line-height: 1.3;
+    color: var(--lumo-primary-contrast-color);
+
+    &:hover {
+      color: var(--lumo-primary-contrast-color);
+    }
+  }
+
+  [part="toggle"] {
+    flex-shrink: 0;
+    margin-left: var(--lumo-space-s);
+    font-size: var(--lumo-font-size-m);
+    color: var(--lumo-primary-contrast-color);
+    background-color: var(--lumo-tint-5pct);
+    border-radius: 100%;
+  }
+
+  [part="content"] {
+    padding: 0;
+  }
+}
+
+:host([theme~="cxl-dashboard-header"][opened]) {
+  [part="toggle"] {
+    background-color: var(--lumo-tint-5pct);
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-overlay.scss

@@ -1,3 +1,5 @@
+@use "../mq";
+
 // Perfectly align modal in the center of the screen.
 :host([theme~="cxl-marketing-nav"][phone]) [part="overlay"] {
   top: 0;
@@ -12,3 +14,33 @@
 
   background-color: var(--lumo-shade-#{$vaadin-overlay-shade-pct * 3.5}#{"pct"});
 }
+
+// Theme: cxl-course-dialog
+:host([theme="cxl-course-dialog"]) {
+  [part='backdrop'] {
+    background-color: var(--cxl-color-black-50pct);
+  }
+
+  [part='overlay'] {
+    width: 100%;
+    max-width: var(--cxl-content-max-width);
+  }
+
+  [part='content'] {
+    padding: var(--lumo-space-m) var(--lumo-space-m) 0 var(--lumo-space-m);
+
+    @media #{mq.$small} {
+      padding: var(--lumo-space-l) var(--lumo-space-l) 0 var(--lumo-space-l);
+    }
+  }
+
+  [part='footer'] {
+    background-color: unset;
+    box-shadow: var(--lumo-box-shadow-m);
+
+    @media #{mq.$small} {
+      gap: var(--lumo-space-m);
+      padding-right: var(--lumo-space-l);
+    }
+  }
+}

packages/cxl-lumo-styles/scss/themes/vaadin-tab.scss

@@ -5,3 +5,26 @@
 :host([theme~="cxl-marketing-nav"][hidden]) {
   visibility: hidden;
 }
+
+:host([theme~="cxl-featured-course-slider"]) {
+  padding: 0;
+}
+
+// Dashboard notifications
+:host([theme~="cxl-dashboard-notification"]) {
+  padding: 6px 16px;
+  font-weight: 500;
+  color: var(--lumo-body-text-color);
+  border-top-left-radius: var(--lumo-border-radius-s);
+  border-top-right-radius: var(--lumo-border-radius-s);
+
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+:host([theme~="cxl-dashboard-notification"][selected]) {
+  color: var(--lumo-primary-contrast-color);
+  background-color: var(--lumo-primary-color);
+}

packages/cxl-lumo-styles/scss/themes/vaadin-tabs.scss

@@ -1,4 +1,5 @@
 @use "../mixins";
+@use "../mq";
 
 // Collapse margins.
 :host([orientation="vertical"][theme~="cxl-marketing-nav"]) {
@@ -65,3 +66,70 @@ $vaadin-tab-horizontal-padding: 0.75rem;
   margin-right: auto;
   margin-left: auto;
 }
+
+// Featured course slider
+:host([theme~="cxl-featured-course-slider"][orientation="horizontal"]) {
+  background-color: var(--cxl-color-light-gray);
+
+  [part="tabs"] {
+    padding: 0;
+    margin: 0;
+    overflow-x: auto;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  [part="back-button"],
+  [part="forward-button"] {
+    width: var(--lumo-size-s);
+    height: var(--lumo-size-s);
+    color: var(--lumo-primary-color);
+    border-radius: 100%;
+
+    &::after {
+      font-size: var(--lumo-font-size-xl);
+    }
+
+    @media #{mq.$medium} {
+      width: var(--lumo-space-xl);
+      height: var(--lumo-space-xl);
+
+      &::after {
+        font-size: var(--lumo-font-size-xxl);
+      }
+    }
+  }
+
+  @media #{mq.$medium} {
+    [part="back-button"] {
+      margin-left: var(--lumo-space-s);
+    }
+
+    [part="forward-button"] {
+      margin-right: var(--lumo-space-s);
+    }
+  }
+
+  ::slotted(vaadin-tab) {
+    padding: 0 var(--lumo-space-m);
+
+    @media #{mq.$medium} {
+      padding: 0;
+    }
+  }
+
+  ::slotted(vaadin-tab:not(:first-child)) {
+    @media #{mq.$medium} {
+      padding-left: var(--lumo-size-xl);
+    }
+  }
+}
+
+// Dashboard notifications
+:host([theme~="cxl-dashboard-notification"]) [part="tabs"] {
+  margin: 0;
+}