From ee150f3d1df0e274ed819bcd5f9b832ae2d20f8f Mon Sep 17 00:00:00 2001 From: Raphael Mattos Date: Wed, 9 Aug 2023 18:55:12 -0300 Subject: [PATCH] refactor(cxl-lumo-styles): update storybook with current home page styles --- packages/cxl-lumo-styles/scss/global.scss | 10 +- .../scss/themes/vaadin-button.scss | 10 ++ packages/cxl-lumo-styles/scss/typography.scss | 72 ++++++++++- packages/cxl-lumo-styles/src/themes.js | 4 + packages/cxl-ui/scss/cxl-section.scss | 14 ++ .../cxl-lumo-styles/typography.stories.js | 122 ++++++++++++++++++ 6 files changed, 221 insertions(+), 11 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 720323a9f..913e8c721 100644 --- a/packages/cxl-lumo-styles/scss/global.scss +++ b/packages/cxl-lumo-styles/scss/global.scss @@ -6,6 +6,7 @@ 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-color-light-gray: hsla(0, 0%, 96%, 1); /** * Lumo Icons have a documented 4px "safe area" around them. Vaadin Icons don't, for unknown reasons. @@ -118,6 +119,7 @@ img { ol, ul { padding-left: var(--lumo-space-l); + font-family: var(--cxl-lumo-font-secondary); } /** @@ -259,18 +261,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..3f51324a5 --- /dev/null +++ b/packages/cxl-lumo-styles/scss/themes/vaadin-button.scss @@ -0,0 +1,10 @@ +:host([theme~="large"].cxl-cta) { + --lumo-button-size: 3em; + cursor: pointer; + padding: 1.25em 3.5em 1.25em 3em; + font-size: var(var-lumo-font-size-l) !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..635f945ef 100644 --- a/packages/cxl-lumo-styles/scss/typography.scss +++ b/packages/cxl-lumo-styles/scss/typography.scss @@ -16,9 +16,10 @@ 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)); @media #{mq.$small} { - --cxl-lumo-font-size-hero: 4rem; + --cxl-lumo-font-size-hero: 3.5rem; } } @@ -39,9 +40,11 @@ h6 { h1 { margin-top: 0; + margin-bottom: 0.75em; font-size: var(--cxl-lumo-font-size-hero); font-weight: 900; - + line-height: 1; + text-transform: uppercase; b, strong { font-weight: inherit; @@ -49,15 +52,69 @@ h1 { } h2 { - @media #{mq.$small} { - font-size: var(--lumo-font-size-xxxl); + font-size: var(--cxl-lumo-font-size-xxl); + + &.wp-block-heading { + &.no-separator { + &::after { + 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-xxl); + line-height: var(--lumo-line-height-xs); } h4 { @@ -75,6 +132,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-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/storybook/cxl-lumo-styles/typography.stories.js b/packages/storybook/cxl-lumo-styles/typography.stories.js index e342b0ed4..a27ca38de 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,123 @@ 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.

+ + + Start 7-day trial for $1 + +
+ + + +

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
    • +
+ + + Start 7-day trial for $1 + + + +
+

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. +

+
+ +`