From bbbe51c4c9e9fd5b9a63f6bbbd8c32090320ec93 Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Tue, 16 Jan 2024 16:08:46 +0000 Subject: [PATCH 1/5] feat(cxl-lumo-styles): change blue font to black --- packages/cxl-lumo-styles/scss/color.scss | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/color.scss b/packages/cxl-lumo-styles/scss/color.scss index c915fdc49..2a0b055bf 100644 --- a/packages/cxl-lumo-styles/scss/color.scss +++ b/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 From 9afb27fd7507f3bf5e71b61f8c96debf05da729a Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Tue, 16 Jan 2024 16:13:37 +0000 Subject: [PATCH 2/5] feat(cxl-ui): wrap minidegree slider --- .../src/components/cxl-dashboard-header.js | 87 +++++++++++-------- 1 file changed, 51 insertions(+), 36 deletions(-) diff --git a/packages/cxl-ui/src/components/cxl-dashboard-header.js b/packages/cxl-ui/src/components/cxl-dashboard-header.js index 1d8b77d85..220626a7d 100644 --- a/packages/cxl-ui/src/components/cxl-dashboard-header.js +++ b/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 {

${this.title}, ${this.name}.

${this._renderNotifications()} - ${this.showCompletedStats ? html` - - ` : nothing} + ${this.showCompletedStats + ? html` ` + : nothing} - ${this.showContinueSlider ? html` -
- Continue where you left off - -
- ` : nothing} + ${this.showContinueSlider + ? html` +
+ Continue where you left off + +
+ ` + : nothing} `; } @@ -84,30 +87,41 @@ export class CXLDashboardHeaderElement extends LitElement {

Training Roadmap

- ${this.showRoadmapStats ? html` - - - Edit roadmap - - ` : nothing} + ${this.showRoadmapStats + ? html` + + + Edit roadmap + + ` + : nothing}
- ${this.showRoadmapStats ? html`` : nothing} + ${this.showRoadmapStats + ? html`` + : nothing}
- ${!this.showRoadmapStats && !this.showRoadmapSlider ? html` - - Create your personal learning roadmap - - - ` : nothing} - ${this.showRoadmapSlider ? html` -
- Next up - -
- ` : nothing} + ${!this.showRoadmapStats && !this.showRoadmapSlider + ? html` + + Create your personal learning roadmap + + + ` + : nothing} + ${this.showRoadmapSlider + ? html` +
+ Next up + +
+ ` + : nothing} `; } @@ -122,7 +136,9 @@ export class CXLDashboardHeaderElement extends LitElement {

Minidegrees

- +
+ +
`; } @@ -133,8 +149,7 @@ export class CXLDashboardHeaderElement extends LitElement { render() { return html`
- ${this._renderUserSection()} - ${this._renderRoadmapSection()} + ${this._renderUserSection()} ${this._renderRoadmapSection()} ${this._renderMinidegreesSection()}
`; From a03bdc44c8759bf299c72bb9890e8acb9c613729 Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Tue, 16 Jan 2024 16:15:53 +0000 Subject: [PATCH 3/5] feat(cxl-ui): increase stat title font weight --- packages/cxl-ui/scss/global/cxl-stats.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cxl-ui/scss/global/cxl-stats.scss b/packages/cxl-ui/scss/global/cxl-stats.scss index 224cab4cd..4c472db7b 100644 --- a/packages/cxl-ui/scss/global/cxl-stats.scss +++ b/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; From 35d8873e22445c204bfe757af28bf012c5fead74 Mon Sep 17 00:00:00 2001 From: Andrew Noblet Date: Tue, 16 Jan 2024 16:27:37 +0000 Subject: [PATCH 4/5] feat(cxl-lumo-styles): increase h2 font weight --- packages/cxl-lumo-styles/scss/typography.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss index 45a14d4bf..5d9df4403 100644 --- 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: '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; } } From 35cf738f8cff095dc9046f6dbe26bc7d502856f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= Date: Tue, 23 Jan 2024 11:30:27 +0100 Subject: [PATCH 5/5] feat(cxl-ui): cxl-dashboard-section .title-3 opacity --- packages/cxl-ui/scss/global/cxl-dashboard-section.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/cxl-ui/scss/global/cxl-dashboard-section.scss b/packages/cxl-ui/scss/global/cxl-dashboard-section.scss index 736967987..89f060393 100644 --- a/packages/cxl-ui/scss/global/cxl-dashboard-section.scss +++ b/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; }