From 79817e68895a680b9b5f3fb8c42c8f6b17917cb3 Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Mon, 14 Aug 2023 17:11:44 -0300 Subject: [PATCH] refactor(cxl-lumo-styles): update storybook with current home page styles --- packages/cxl-lumo-styles/scss/global.scss | 9 +- .../scss/themes/vaadin-button.scss | 10 ++ packages/cxl-lumo-styles/scss/typography.scss | 87 +++++++++++-- packages/cxl-lumo-styles/src/themes.js | 4 + packages/cxl-ui/scss/cxl-base-card.scss | 4 +- packages/cxl-ui/scss/cxl-course-card.scss | 2 +- .../cxl-ui/scss/cxl-dashboard-header.scss | 25 ---- .../scss/cxl-dashboard-notification.scss | 1 - packages/cxl-ui/scss/cxl-light-card.scss | 1 + packages/cxl-ui/scss/cxl-like-or-dislike.scss | 2 +- packages/cxl-ui/scss/cxl-section.scss | 14 +++ packages/cxl-ui/scss/global/cxl-card.scss | 4 - .../cxl-ui/scss/global/cxl-course-dialog.scss | 4 - .../scss/global/cxl-playbook-accordion.scss | 1 - .../scss/global/cxl-vaadin-accordion.scss | 16 +-- packages/cxl-ui/scss/jw-player/chapter.scss | 2 +- .../cxl-lumo-styles/typography.stories.js | 119 ++++++++++++++++++ 17 files changed, 240 insertions(+), 65 deletions(-) create mode 100644 packages/cxl-lumo-styles/scss/themes/vaadin-button.scss diff --git a/packages/cxl-lumo-styles/scss/global.scss b/packages/cxl-lumo-styles/scss/global.scss index a40c0b6ee..ddd46226d 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -126,6 +126,7 @@ img { ol, ul { padding-left: var(--lumo-space-l); + font-family: var(--cxl-lumo-font-secondary); } /** @@ -267,18 +268,18 @@ ol.ordered-list-heavy { /* stylelint-enable order/properties-order */ ul.courses-list { + padding-left: 0; font-family: inherit; list-style: none; - padding-left: 0; cxl-card { + display: flex; align-items: center; + padding: var(--lumo-space-m) var(--lumo-space-s); + margin: 0; border: none; border-radius: 0; box-shadow: none; - display: flex; - margin: 0; - padding: var(--lumo-space-m) var(--lumo-space-s); .entry-byline { margin-bottom: 0; diff --git a/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss new file mode 100644 index 000000000..073ee583c --- /dev/null +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss @@ -0,0 +1,10 @@ +: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: calc(var(--lumo-font-size-xxxl) / 2) !important; +} + +:host(.wide) { + width: 100%; +} diff --git a/packages/cxl-lumo-styles/scss/typography.scss b/packages/cxl-lumo-styles/scss/typography.scss index ab8e11d90..394aa1294 100644 --- a/packages/cxl-lumo-styles/scss/typography.scss +++ b/packages/cxl-lumo-styles/scss/typography.scss @@ -1,5 +1,7 @@ +/* stylelint-disable selector-no-qualifying-type */ @use "./icons"; @use "./mq"; +@use "./mixins"; html { /** @@ -16,9 +18,22 @@ html { * @ see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#font-size */ --cxl-lumo-font-size-hero: var(--lumo-font-size-xxxl); + --cxl-lumo-font-size-xxl: calc(var(--lumo-font-size-xl) + var(--lumo-font-size-m)); + + /** + * Line height. + * + * @see https://cdn.vaadin.com/vaadin-lumo-styles/1.5.0/demo/typography.html#line-height + */ + --cxl-lumo-line-height-xl: 2; + --cxl-lumo-line-height-l: var(--lumo-line-height-m); // 1.625 + --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: 4rem; + --cxl-lumo-font-size-hero: 3.5rem; } } @@ -34,14 +49,16 @@ h4, h5, h6 { font-weight: 700; + line-height: var(--cxl-lumo-line-height-xs); word-break: break-word; } h1 { margin-top: 0; + margin-bottom: 0.75em; font-size: var(--cxl-lumo-font-size-hero); font-weight: 900; - + line-height: calc(var(--cxl-lumo-line-height-xl) / 2); b, strong { font-weight: inherit; @@ -49,15 +66,70 @@ h1 { } h2 { - @media #{mq.$small} { - font-size: var(--lumo-font-size-xxxl); + font-size: var(--cxl-lumo-font-size-xxl); + line-height: var(--cxl-lumo-line-height-xxs); + + &.wp-block-heading { + &.no-separator { + &::after { + /* stylelint-disable-next-line declaration-no-important */ + display: none !important; + } + } + + &::after { + display: block; + width: 33%; + height: 3px; + margin: 1.5em auto 1.5em 0; + font-size: 16px; + content: ""; + background: var(--lumo-primary-color); + } + + &.separator-wide { + &::after { + width: 100%; + } + } + + &.center { + text-align: center; + &::after { + margin: 1.5em auto; + } + } + + &.right { + text-align: right; + &::after { + margin: 1.5em 0 1.5em auto; + } + } + + &.separator-white { + &::after { + background: #fff; + } + } + + &.separator-black { + &::after { + background: #000; + } + } + + &.separator-gray { + &::after { + background: var(--lumo-contrast-20pct); + } + } } } h3 { - @media #{mq.$small} { - font-size: var(--lumo-font-size-xxl); - } + font-size: var(--lumo-font-size-xl); + font-weight: 700; } h4 { @@ -75,6 +147,7 @@ h6 { } p { + font-family: var(--cxl-lumo-font-secondary); .entry-content & { font-family: var(--cxl-lumo-font-secondary); } diff --git a/packages/cxl-lumo-styles/src/themes.js b/packages/cxl-lumo-styles/src/themes.js index 461c3fb22..4750e1351 100644 --- a/packages/cxl-lumo-styles/src/themes.js +++ b/packages/cxl-lumo-styles/src/themes.js @@ -14,6 +14,7 @@ import cxlVaadinNotificationContainerStyles from './styles/themes/vaadin-notific import cxlVaadinOverlayStyles from './styles/themes/vaadin-overlay-css.js'; import cxlVaadinTabStyles from './styles/themes/vaadin-tab-css.js'; import cxlVaadinTabsStyles from './styles/themes/vaadin-tabs-css.js'; +import cxlVaadinButtonStyles from './styles/themes/vaadin-button-css.js'; /* Mixins, alphabetic order. */ registerStyles('cxl-accordion-card', cxlAccordionCardStyles, { @@ -61,3 +62,6 @@ registerStyles('vaadin-tab', cxlVaadinTabStyles, { registerStyles('vaadin-tabs', cxlVaadinTabsStyles, { moduleId: 'cxl-vaadin-tabs-styles', }); +registerStyles('vaadin-button', cxlVaadinButtonStyles, { + moduleId: 'cxl-vaadin-button-styles', +}) diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss index 245656110..4b132b956 100644 --- a/packages/cxl-ui/scss/cxl-base-card.scss +++ b/packages/cxl-ui/scss/cxl-base-card.scss @@ -157,12 +157,12 @@ header { } .name { - @include mixins.ellipsis-for-lines(3); + @include mixins.ellipsis-for-lines(2); font-family: var(--lumo-font-family); font-size: var(--lumo-font-size-xl); font-style: normal; font-weight: 700; - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); a { color: var(--lumo-body-text-color); diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss index 07d07436b..bc56fda9d 100644 --- a/packages/cxl-ui/scss/cxl-course-card.scss +++ b/packages/cxl-ui/scss/cxl-course-card.scss @@ -85,7 +85,7 @@ footer { &::part(content) { padding-bottom: 0; font-size: var(--lumo-font-size-s); - line-height: var(--lumo-line-height-s); + line-height: var(--cxl-lumo-line-height-s); } } diff --git a/packages/cxl-ui/scss/cxl-dashboard-header.scss b/packages/cxl-ui/scss/cxl-dashboard-header.scss index dbd8d8c94..725414e03 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-header.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-header.scss @@ -43,33 +43,8 @@ } } - .icon-bell { - position: relative; - margin-right: 14px; - - &::after { - position: absolute; - top: 4px; - right: -7px; - display: flex; - align-items: center; - justify-content: center; - width: 12px; - height: 12px; - font-size: 8px; - font-weight: 700; - color: var(--lumo-tint); - content: attr(count); - background-color: var(--lumo-primary-color); - border: 2px solid var(--cxl-color-dark-gray); - border-radius: 100%; - } - } - .title { margin: 0; - font-size: var(--lumo-font-size-xxxl); - line-height: 1.4; } .content { diff --git a/packages/cxl-ui/scss/cxl-dashboard-notification.scss b/packages/cxl-ui/scss/cxl-dashboard-notification.scss index f737d0a00..87608c896 100644 --- a/packages/cxl-ui/scss/cxl-dashboard-notification.scss +++ b/packages/cxl-ui/scss/cxl-dashboard-notification.scss @@ -38,7 +38,6 @@ height: 12px; font-size: 8px; font-weight: 700; - line-height: normal; color: var(--lumo-tint); content: attr(count); background-color: var(--lumo-primary-color); diff --git a/packages/cxl-ui/scss/cxl-light-card.scss b/packages/cxl-ui/scss/cxl-light-card.scss index 8d560e53a..7750b7030 100644 --- a/packages/cxl-ui/scss/cxl-light-card.scss +++ b/packages/cxl-ui/scss/cxl-light-card.scss @@ -33,6 +33,7 @@ padding-top: var(--lumo-space-xs); padding-bottom: 0; gap: var(--lumo-space-xs); + align-items: start; } cxl-time { diff --git a/packages/cxl-ui/scss/cxl-like-or-dislike.scss b/packages/cxl-ui/scss/cxl-like-or-dislike.scss index 01bc406d0..f18528aa1 100644 --- a/packages/cxl-ui/scss/cxl-like-or-dislike.scss +++ b/packages/cxl-ui/scss/cxl-like-or-dislike.scss @@ -24,7 +24,7 @@ span { margin-left: var(--lumo-space-s); - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); } } diff --git a/packages/cxl-ui/scss/cxl-section.scss b/packages/cxl-ui/scss/cxl-section.scss index f055254ab..1fd15bda3 100644 --- a/packages/cxl-ui/scss/cxl-section.scss +++ b/packages/cxl-ui/scss/cxl-section.scss @@ -54,3 +54,17 @@ max-width: var(--cxl-content-max-width-wide); } } + +:host(.has-gray-background-color) { + background-color: var(--cxl-color-light-gray); +} + +:host(.has-black-background-color) { + color: var(--lumo-tint); + background-color: #000; + + > * { + --lumo-header-text-color: var(--lumo-tint); + } +} + diff --git a/packages/cxl-ui/scss/global/cxl-card.scss b/packages/cxl-ui/scss/global/cxl-card.scss index 1ae5ad441..3b3a152cf 100644 --- a/packages/cxl-ui/scss/global/cxl-card.scss +++ b/packages/cxl-ui/scss/global/cxl-card.scss @@ -1,8 +1,4 @@ cxl-card { - p { - font-family: inherit; - } - .entry-header { .thumbnail { margin: 0 auto; diff --git a/packages/cxl-ui/scss/global/cxl-course-dialog.scss b/packages/cxl-ui/scss/global/cxl-course-dialog.scss index 5a561bacc..9273b8e09 100644 --- a/packages/cxl-ui/scss/global/cxl-course-dialog.scss +++ b/packages/cxl-ui/scss/global/cxl-course-dialog.scss @@ -102,10 +102,6 @@ vaadin-dialog-overlay[theme="cxl-course-dialog"] { max-width: 75%; padding-bottom: var(--lumo-space-l); margin: 0 auto; - - p { - font-family: var(--cxl-lumo-font-secondary); - } } .content-tags { diff --git a/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss b/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss index c6e9bb2f5..402ac3fac 100644 --- a/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss +++ b/packages/cxl-ui/scss/global/cxl-playbook-accordion.scss @@ -15,7 +15,6 @@ cxl-playbook-accordion { .entry-title { margin-top: 0.5em; /* match h3 */ margin-right: var(--lumo-space-m); - font-size: var(--lumo-font-size-m); } > vaadin-checkbox { diff --git a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss index 215d73655..781fd864e 100644 --- a/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss +++ b/packages/cxl-ui/scss/global/cxl-vaadin-accordion.scss @@ -15,10 +15,6 @@ cxl-vaadin-accordion { --vaadin-icon-width: var(--vaadin-icon-height); } - p { - font-family: inherit; - } - .entry { //mixin affects: .entry-header > label @include mixins.label-contrast("> .entry-header") { @@ -47,7 +43,7 @@ cxl-vaadin-accordion { .entry-title { flex: 1; - height: calc(var(--lumo-line-height-xs) * 4em); + height: calc(var(--cxl-lumo-line-height-xs) * 4em); font-size: var(--lumo-font-size-xl); word-break: break-word; } @@ -100,10 +96,6 @@ cxl-vaadin-accordion { * Theme "cxl-minidegree-course". */ &[theme~="cxl-minidegree-course"] { - p { - font-family: inherit; - } - .entry-header { display: grid; grid-column-gap: var(--lumo-space-m); @@ -160,10 +152,6 @@ cxl-vaadin-accordion { --vaadin-icon-width: var(--vaadin-icon-height); } - p { - font-family: inherit; - } - .entry { @include mixins.label-contrast("> .entry-header") { flex-basis: 100%; @@ -220,7 +208,7 @@ cxl-vaadin-accordion { flex: 1; flex-basis: auto; /* stylelint-disable-next-line declaration-no-important */ - height: calc(var(--lumo-line-height-xs) * 3em) !important; + height: calc(var(--cxl-lumo-line-height-xs) * 3em) !important; margin-top: 0; margin-bottom: 0; overflow: hidden; diff --git a/packages/cxl-ui/scss/jw-player/chapter.scss b/packages/cxl-ui/scss/jw-player/chapter.scss index 471389014..83f43539d 100644 --- a/packages/cxl-ui/scss/jw-player/chapter.scss +++ b/packages/cxl-ui/scss/jw-player/chapter.scss @@ -61,7 +61,7 @@ padding: var(--lumo-space-s) 0; margin-bottom: var(--lumo-space-s); font-size: var(--lumo-font-size-s); - line-height: var(--lumo-line-height-xs); + line-height: var(--cxl-lumo-line-height-xs); cursor: pointer; } diff --git a/packages/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js index e342b0ed4..94ce303b4 100644 --- a/packages/storybook/cxl-lumo-styles/typography.stories.js +++ b/packages/storybook/cxl-lumo-styles/typography.stories.js @@ -1,5 +1,7 @@ import '@conversionxl/cxl-lumo-styles'; +import '@conversionxl/cxl-ui'; import '@vaadin/button'; +import cxlColorStyles from '@conversionxl/cxl-lumo-styles/src/styles/color-css'; import { withKnobs } from '@storybook/addon-knobs'; import { html } from 'lit'; @@ -64,3 +66,120 @@ export const Examples = () => {

${loremIpsum}

`; }; + +export const CXLComExamples = () => html` + + + +
+

Top 1% marketers teach you what they know.

+

Master the most in-demand marketing skills with our online courses created by marketers with a proven record of driving real growth.

+ + Sign up now + +
+ + + +

On-demand courses taught by elite marketers from companies like Drift, ClickUp and Hubspot.

+ + + +
+
+

Learn from the legitimate experts with a proven track record

+

+ Betting your career and your company's growth on some guru's playbook is dangerous. +

+

+ We identify the top 1% masters of the marketing craft through a rock-solid vetting process that we've been perfecting for over a decade. Then we get them to teach you what they're best at. +

+

+ Browse all courses and instructors here. +

+
+
+
+ + + +
+
+

How we identify and vet top 1% marketers

+

+ This is how we find and vet the top 1% marketers: +

+
    +
  1. We regularly survey the marketing community for experts they want to learn from
    2. +
  2. We narrow down the list through a reference check, talking to their peers and executives
    3. +
  3. We make sure they have a proven track record, meaning they’ve significantly contributed to growth of more than 2 companies
    4. +
+
+
+ + + +
+
+

Help your company grow with frameworks that bring results

+

+ In 2016, Drift’s CEO, David Cancel, famously said that the era of product-based differentiation is going away. By now, we can conclude that it has already gone away. +

+
+
+
+ + + +
+

All access Subscription

+
    +
  • Access to 90+ courses and 11 minidegrees
    • +
  • Earn certificates and add them to your LinkedIn profile
    • +
  • 2500+ playbooks
    • +
  • Exclusive community access
    • +
+ + Sign up now + + + +
+

Become certified in 10 minidegrees

+

+ Each course is a puzzle piece teaching discrete skills. Each Minidegree is a completed puzzle teaching a marketing discipline from A to Z and takes you on a path towards becoming the top 1% marketer. After going through the entire curriculum, you’ll be given an exam that earns you a CXL certificate. Add your certificates to your LinkedIn profile, share your accomplishments with the world, and join our alumni network. +

+
+ +`;