feat(cxl-lumo-styles): extract styles from lumo-styles into wp-block-…

…editor.scss

Styles from Lumo JS files manually copy-pasted into respective SCSS
files.

package.json

@@ -13,7 +13,7 @@
     "build-styling": "node packages/sass-render/bin/sass-render.js -s \"packages/*/scss/**/*.scss\"",
     "deploy-storybook": "yarn --cwd packages/storybook storybook-to-ghpages",
     "dist": "yarn build && lerna run dist",
-    "dist:wp-block-editor": "yarn --cwd packages/cxl-lumo-styles sass scss/wp-block-editor.scss dist/wp-block-editor.css --style compressed",
+    "dist:wp-block-editor": "yarn --cwd packages/cxl-lumo-styles sass scss/wp-block-editor.scss dist/wp-block-editor.min.css --style compressed",
     "lint": "npm-run-all --parallel lint:*",
     "lint:js": "eslint *.js packages --ignore-path .gitignore",
     "lint:scss": "stylelint packages/**/*.scss",

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

@@ -0,0 +1,185 @@
+/* node_modules/@vaadin/vaadin-lumo-styles/color.js */
+
+// const colorBase
+html,
+:host {
+  /* Base (background) */
+  --lumo-base-color: #fff;
+
+  /* Tint */
+  --lumo-tint-5pct: hsla(0, 0%, 100%, 0.3);
+  --lumo-tint-10pct: hsla(0, 0%, 100%, 0.37);
+  --lumo-tint-20pct: hsla(0, 0%, 100%, 0.44);
+  --lumo-tint-30pct: hsla(0, 0%, 100%, 0.5);
+  --lumo-tint-40pct: hsla(0, 0%, 100%, 0.57);
+  --lumo-tint-50pct: hsla(0, 0%, 100%, 0.64);
+  --lumo-tint-60pct: hsla(0, 0%, 100%, 0.7);
+  --lumo-tint-70pct: hsla(0, 0%, 100%, 0.77);
+  --lumo-tint-80pct: hsla(0, 0%, 100%, 0.84);
+  --lumo-tint-90pct: hsla(0, 0%, 100%, 0.9);
+  --lumo-tint: #fff;
+
+  /* Shade */
+  --lumo-shade-5pct: hsla(214, 61%, 25%, 0.05);
+  --lumo-shade-10pct: hsla(214, 57%, 24%, 0.1);
+  --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
+  --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
+  --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
+  --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+  --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+  --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
+  --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+  --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+  --lumo-shade: hsl(214, 35%, 15%);
+
+  /* Contrast */
+  --lumo-contrast-5pct: var(--lumo-shade-5pct);
+  --lumo-contrast-10pct: var(--lumo-shade-10pct);
+  --lumo-contrast-20pct: var(--lumo-shade-20pct);
+  --lumo-contrast-30pct: var(--lumo-shade-30pct);
+  --lumo-contrast-40pct: var(--lumo-shade-40pct);
+  --lumo-contrast-50pct: var(--lumo-shade-50pct);
+  --lumo-contrast-60pct: var(--lumo-shade-60pct);
+  --lumo-contrast-70pct: var(--lumo-shade-70pct);
+  --lumo-contrast-80pct: var(--lumo-shade-80pct);
+  --lumo-contrast-90pct: var(--lumo-shade-90pct);
+  --lumo-contrast: var(--lumo-shade);
+
+  /* Text */
+  --lumo-header-text-color: var(--lumo-contrast);
+  --lumo-body-text-color: var(--lumo-contrast-90pct);
+  --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+  --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+  --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+  /* Primary */
+  --lumo-primary-color: hsl(214, 100%, 48%);
+  --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+  --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+  --lumo-primary-text-color: hsl(214, 100%, 43%);
+  --lumo-primary-contrast-color: #fff;
+
+  /* Error */
+  --lumo-error-color: hsl(3, 85%, 48%);
+  --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+  --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+  --lumo-error-text-color: hsl(3, 89%, 42%);
+  --lumo-error-contrast-color: #fff;
+
+  /* Success */
+  --lumo-success-color: hsl(145, 72%, 30%);
+  --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+  --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+  --lumo-success-text-color: hsl(145, 85%, 25%);
+  --lumo-success-contrast-color: #fff;
+}
+
+// const color
+[theme~='dark'] {
+  /* Base (background) */
+  --lumo-base-color: hsl(214, 35%, 21%);
+
+  /* Tint */
+  --lumo-tint-5pct: hsla(214, 65%, 85%, 0.06);
+  --lumo-tint-10pct: hsla(214, 60%, 80%, 0.14);
+  --lumo-tint-20pct: hsla(214, 64%, 82%, 0.23);
+  --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
+  --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
+  --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
+  --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+  --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
+  --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+  --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+  --lumo-tint: hsl(214, 100%, 98%);
+
+  /* Shade */
+  --lumo-shade-5pct: hsla(214, 0%, 0%, 0.07);
+  --lumo-shade-10pct: hsla(214, 4%, 2%, 0.15);
+  --lumo-shade-20pct: hsla(214, 8%, 4%, 0.23);
+  --lumo-shade-30pct: hsla(214, 12%, 6%, 0.32);
+  --lumo-shade-40pct: hsla(214, 16%, 8%, 0.41);
+  --lumo-shade-50pct: hsla(214, 20%, 10%, 0.5);
+  --lumo-shade-60pct: hsla(214, 24%, 12%, 0.6);
+  --lumo-shade-70pct: hsla(214, 28%, 13%, 0.7);
+  --lumo-shade-80pct: hsla(214, 32%, 13%, 0.8);
+  --lumo-shade-90pct: hsla(214, 33%, 13%, 0.9);
+  --lumo-shade: hsl(214, 33%, 13%);
+
+  /* Contrast */
+  --lumo-contrast-5pct: var(--lumo-tint-5pct);
+  --lumo-contrast-10pct: var(--lumo-tint-10pct);
+  --lumo-contrast-20pct: var(--lumo-tint-20pct);
+  --lumo-contrast-30pct: var(--lumo-tint-30pct);
+  --lumo-contrast-40pct: var(--lumo-tint-40pct);
+  --lumo-contrast-50pct: var(--lumo-tint-50pct);
+  --lumo-contrast-60pct: var(--lumo-tint-60pct);
+  --lumo-contrast-70pct: var(--lumo-tint-70pct);
+  --lumo-contrast-80pct: var(--lumo-tint-80pct);
+  --lumo-contrast-90pct: var(--lumo-tint-90pct);
+  --lumo-contrast: var(--lumo-tint);
+
+  /* Text */
+  --lumo-header-text-color: var(--lumo-contrast);
+  --lumo-body-text-color: var(--lumo-contrast-90pct);
+  --lumo-secondary-text-color: var(--lumo-contrast-70pct);
+  --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
+  --lumo-disabled-text-color: var(--lumo-contrast-30pct);
+
+  /* Primary */
+  --lumo-primary-color: hsl(214, 90%, 48%);
+  --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+  --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+  --lumo-primary-text-color: hsl(214, 90%, 77%);
+  --lumo-primary-contrast-color: #fff;
+
+  /* Error */
+  --lumo-error-color: hsl(3, 79%, 49%);
+  --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+  --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+  --lumo-error-text-color: hsl(3, 100%, 80%);
+
+  /* Success */
+  --lumo-success-color: hsl(145, 72%, 30%);
+  --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+  --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+  --lumo-success-text-color: hsl(145, 85%, 46%);
+}
+
+html {
+  color: var(--lumo-body-text-color);
+  background-color: var(--lumo-base-color);
+  color-scheme: light;
+}
+
+[theme~='dark'] {
+  color: var(--lumo-body-text-color);
+  background-color: var(--lumo-base-color);
+  color-scheme: dark;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: var(--lumo-header-text-color);
+}
+
+a:where(:any-link) {
+  color: var(--lumo-primary-text-color);
+}
+
+a:not(:any-link) {
+  color: var(--lumo-disabled-text-color);
+}
+
+blockquote {
+  color: var(--lumo-secondary-text-color);
+}
+
+code,
+pre {
+  background-color: var(--lumo-contrast-10pct);
+  border-radius: var(--lumo-border-radius-m);
+}

packages/cxl-lumo-styles/scss/block-editor/sizing.scss

@@ -0,0 +1,18 @@
+/* node_modules/@vaadin/vaadin-lumo-styles/sizing.js */
+
+// const sizing
+html,
+:host {
+  --lumo-size-xs: 1.625rem;
+  --lumo-size-s: 1.875rem;
+  --lumo-size-m: 2.25rem;
+  --lumo-size-l: 2.75rem;
+  --lumo-size-xl: 3.5rem;
+
+  /* Icons */
+  --lumo-icon-size-s: 1.25em;
+  --lumo-icon-size-m: 1.5em;
+  --lumo-icon-size-l: 2.25em;
+  /* For backwards compatibility */
+  --lumo-icon-size: var(--lumo-icon-size-m);
+}

packages/cxl-lumo-styles/scss/block-editor/spacing.scss

@@ -0,0 +1,26 @@
+/* node_modules/@vaadin/vaadin-lumo-styles/spacing.js */
+
+// const spacing
+html,
+:host {
+  /* Square */
+  --lumo-space-xs: 0.25rem;
+  --lumo-space-s: 0.5rem;
+  --lumo-space-m: 1rem;
+  --lumo-space-l: 1.5rem;
+  --lumo-space-xl: 2.5rem;
+
+  /* Wide */
+  --lumo-space-wide-xs: calc(var(--lumo-space-xs) / 2) var(--lumo-space-xs);
+  --lumo-space-wide-s: calc(var(--lumo-space-s) / 2) var(--lumo-space-s);
+  --lumo-space-wide-m: calc(var(--lumo-space-m) / 2) var(--lumo-space-m);
+  --lumo-space-wide-l: calc(var(--lumo-space-l) / 2) var(--lumo-space-l);
+  --lumo-space-wide-xl: calc(var(--lumo-space-xl) / 2) var(--lumo-space-xl);
+
+  /* Tall */
+  --lumo-space-tall-xs: var(--lumo-space-xs) calc(var(--lumo-space-xs) / 2);
+  --lumo-space-tall-s: var(--lumo-space-s) calc(var(--lumo-space-s) / 2);
+  --lumo-space-tall-m: var(--lumo-space-m) calc(var(--lumo-space-m) / 2);
+  --lumo-space-tall-l: var(--lumo-space-l) calc(var(--lumo-space-l) / 2);
+  --lumo-space-tall-xl: var(--lumo-space-xl) calc(var(--lumo-space-xl) / 2);
+}

packages/cxl-lumo-styles/scss/block-editor/style.scss

@@ -0,0 +1,27 @@
+/* node_modules/@vaadin/vaadin-lumo-styles/style.js */
+
+// const style
+html,
+:host {
+  /* Border radius */
+  --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+  --lumo-border-radius-m: var(--lumo-border-radius, 0.25em); /* Button, text field, menu overlay, etc */
+  --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
+  --lumo-border-radius: 0.25em; /* Deprecated */
+
+  /* Shadow */
+  --lumo-box-shadow-xs: 0 1px 4px -1px var(--lumo-shade-50pct);
+  --lumo-box-shadow-s: 0 2px 4px -1px var(--lumo-shade-20pct), 0 3px 12px -1px var(--lumo-shade-30pct);
+  --lumo-box-shadow-m: 0 2px 6px -1px var(--lumo-shade-20pct), 0 8px 24px -4px var(--lumo-shade-40pct);
+  --lumo-box-shadow-l: 0 3px 18px -2px var(--lumo-shade-20pct), 0 12px 48px -6px var(--lumo-shade-40pct);
+  --lumo-box-shadow-xl: 0 4px 24px -3px var(--lumo-shade-20pct), 0 18px 64px -8px var(--lumo-shade-40pct);
+
+  /* Clickable element cursor */
+  --lumo-clickable-cursor: default;
+}
+
+// const globals
+html {
+  --vaadin-checkbox-size: calc(var(--lumo-size-m) / 2);
+  --vaadin-radio-button-size: calc(var(--lumo-size-m) / 2);
+}

packages/cxl-lumo-styles/scss/block-editor/typography.scss

@@ -0,0 +1,127 @@
+/* node_modules/@vaadin/vaadin-lumo-styles/typography.js */
+
+// const font
+html,
+:host {
+  /* prettier-ignore */
+  --lumo-font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+
+  /* Font sizes */
+  --lumo-font-size-xxs: 0.75rem;
+  --lumo-font-size-xs: 0.8125rem;
+  --lumo-font-size-s: 0.875rem;
+  --lumo-font-size-m: 1rem;
+  --lumo-font-size-l: 1.125rem;
+  --lumo-font-size-xl: 1.375rem;
+  --lumo-font-size-xxl: 1.75rem;
+  --lumo-font-size-xxxl: 2.5rem;
+
+  /* Line heights */
+  --lumo-line-height-xs: 1.25;
+  --lumo-line-height-s: 1.375;
+  --lumo-line-height-m: 1.625;
+}
+
+// const typography
+html,
+:host {
+  font-family: var(--lumo-font-family);
+  font-size: var(--lumo-font-size, var(--lumo-font-size-m));
+  line-height: var(--lumo-line-height-m);
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+small,
+[theme~='font-size-s'] {
+  font-size: var(--lumo-font-size-s);
+  line-height: var(--lumo-line-height-s);
+}
+
+[theme~='font-size-xs'] {
+  font-size: var(--lumo-font-size-xs);
+  line-height: var(--lumo-line-height-xs);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 600;
+  line-height: var(--lumo-line-height-xs);
+  margin-top: 1.25em;
+}
+
+h1 {
+  font-size: var(--lumo-font-size-xxxl);
+  margin-bottom: 0.75em;
+}
+
+h2 {
+  font-size: var(--lumo-font-size-xxl);
+  margin-bottom: 0.5em;
+}
+
+h3 {
+  font-size: var(--lumo-font-size-xl);
+  margin-bottom: 0.5em;
+}
+
+h4 {
+  font-size: var(--lumo-font-size-l);
+  margin-bottom: 0.5em;
+}
+
+h5 {
+  font-size: var(--lumo-font-size-m);
+  margin-bottom: 0.25em;
+}
+
+h6 {
+  font-size: var(--lumo-font-size-xs);
+  margin-bottom: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+p,
+blockquote {
+  margin-top: 0.5em;
+  margin-bottom: 0.75em;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:where(:any-link):hover {
+  text-decoration: underline;
+}
+
+hr {
+  display: block;
+  align-self: stretch;
+  height: 1px;
+  border: 0;
+  padding: 0;
+  margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
+  background-color: var(--lumo-contrast-10pct);
+}
+
+blockquote {
+  border-left: 2px solid var(--lumo-contrast-30pct);
+}
+
+b,
+strong {
+  font-weight: 600;
+}
+
+/* RTL specific styles */
+blockquote[dir='rtl'] {
+  border-left: none;
+  border-right: 2px solid var(--lumo-contrast-30pct);
+}