@vaadin/vaadin-lumo-styles - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0-alpha1

badge.js

 import './style.js';
 import './color.js';
 import './typography.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const badge = css`
+  [theme~="badge"] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
+    color: var(--lumo-primary-text-color);
+    background-color: var(--lumo-primary-color-10pct);
+    border-radius: var(--lumo-border-radius-s);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-s);
+    line-height: 1;
+    font-weight: 500;
+    text-transform: initial;
+    letter-spacing: initial;
+    min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-badge">
-  <template>
-    <style>
-      [theme~="badge"] {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        box-sizing: border-box;
-        padding: 0.4em calc(0.5em + var(--lumo-border-radius-s) / 4);
-        color: var(--lumo-primary-text-color);
-        background-color: var(--lumo-primary-color-10pct);
-        border-radius: var(--lumo-border-radius-s);
-        font-family: var(--lumo-font-family);
-        font-size: var(--lumo-font-size-s);
-        line-height: 1;
-        font-weight: 500;
-        text-transform: initial;
-        letter-spacing: initial;
-        min-width: calc(var(--lumo-line-height-xs) * 1em + 0.45em);
-      }
+  /* Ensure proper vertical alignment */
+  [theme~="badge"]::before {
+    display: inline-block;
+    content: "\\2003";
+    width: 0;
+  }
 
-      /* Ensure proper vertical alignment */
-      [theme~="badge"]::before {
-        display: inline-block;
-        content: "\\2003";
-        width: 0;
-      }
+  [theme~="badge"][theme~="small"] {
+    font-size: var(--lumo-font-size-xxs);
+    line-height: 1;
+  }
 
-      [theme~="badge"][theme~="small"] {
-        font-size: var(--lumo-font-size-xxs);
-        line-height: 1;
-      }
+  /* Colors */
 
-      /* Colors */
+  [theme~="badge"][theme~="success"] {
+    color: var(--lumo-success-text-color);
+    background-color: var(--lumo-success-color-10pct);
+  }
 
-      [theme~="badge"][theme~="success"] {
-        color: var(--lumo-success-text-color);
-        background-color: var(--lumo-success-color-10pct);
-      }
+  [theme~="badge"][theme~="error"] {
+    color: var(--lumo-error-text-color);
+    background-color: var(--lumo-error-color-10pct);
+  }
 
-      [theme~="badge"][theme~="error"] {
-        color: var(--lumo-error-text-color);
-        background-color: var(--lumo-error-color-10pct);
-      }
+  [theme~="badge"][theme~="contrast"] {
+    color: var(--lumo-contrast-80pct);
+    background-color: var(--lumo-contrast-5pct);
+  }
 
-      [theme~="badge"][theme~="contrast"] {
-        color: var(--lumo-contrast-80pct);
-        background-color: var(--lumo-contrast-5pct);
-      }
+  /* Primary */
 
-      /* Primary */
+  [theme~="badge"][theme~="primary"] {
+    color: var(--lumo-primary-contrast-color);
+    background-color: var(--lumo-primary-color);
+  }
 
-      [theme~="badge"][theme~="primary"] {
-        color: var(--lumo-primary-contrast-color);
-        background-color: var(--lumo-primary-color);
-      }
+  [theme~="badge"][theme~="success"][theme~="primary"] {
+    color: var(--lumo-success-contrast-color);
+    background-color: var(--lumo-success-color);
+  }
 
-      [theme~="badge"][theme~="success"][theme~="primary"] {
-        color: var(--lumo-success-contrast-color);
-        background-color: var(--lumo-success-color);
-      }
+  [theme~="badge"][theme~="error"][theme~="primary"] {
+    color: var(--lumo-error-contrast-color);
+    background-color: var(--lumo-error-color);
+  }
 
-      [theme~="badge"][theme~="error"][theme~="primary"] {
-        color: var(--lumo-error-contrast-color);
-        background-color: var(--lumo-error-color);
-      }
+  [theme~="badge"][theme~="contrast"][theme~="primary"] {
+    color: var(--lumo-base-color);
+    background-color: var(--lumo-contrast);
+  }
 
-      [theme~="badge"][theme~="contrast"][theme~="primary"] {
-        color: var(--lumo-base-color);
-        background-color: var(--lumo-contrast);
-      }
+  /* Links */
 
-      /* Links */
+  [theme~="badge"][href]:hover {
+    text-decoration: none;
+  }
 
-      [theme~="badge"][href]:hover {
-        text-decoration: none;
-      }
+  /* Icon */
 
-      /* Icon */
+  [theme~="badge"] iron-icon {
+    margin: -0.25em 0;
+    --iron-icon-width: 1.5em;
+    --iron-icon-height: 1.5em;
+  }
 
-      [theme~="badge"] iron-icon {
-        margin: -0.25em 0;
-        --iron-icon-width: 1.5em;
-        --iron-icon-height: 1.5em;
-      }
+  [theme~="badge"] iron-icon:first-child {
+    margin-left: -0.375em;
+  }
 
-      [theme~="badge"] iron-icon:first-child {
-        margin-left: -0.375em;
-      }
+  [theme~="badge"] iron-icon:last-child {
+    margin-right: -0.375em;
+  }
 
-      [theme~="badge"] iron-icon:last-child {
-        margin-right: -0.375em;
-      }
+  [theme~="badge"][icon] {
+    min-width: 0;
+    padding: 0;
+    font-size: 1rem;
+    --iron-icon-width: var(--lumo-icon-size-m);
+    --iron-icon-height: var(--lumo-icon-size-m);
+  }
 
-      [theme~="badge"][icon] {
-        min-width: 0;
-        padding: 0;
-        font-size: 1rem;
-        --iron-icon-width: var(--lumo-icon-size-m);
-        --iron-icon-height: var(--lumo-icon-size-m);
-      }
+  [theme~="badge"][icon][theme~="small"] {
+    --iron-icon-width: var(--lumo-icon-size-s);
+    --iron-icon-height: var(--lumo-icon-size-s);
+  }
 
-      [theme~="badge"][icon][theme~="small"] {
-        --iron-icon-width: var(--lumo-icon-size-s);
-        --iron-icon-height: var(--lumo-icon-size-s);
-      }
+  /* Empty */
 
-      /* Empty */
+  [theme~="badge"]:not([icon]):empty {
+    min-width: 0;
+    width: 1em;
+    height: 1em;
+    padding: 0;
+    border-radius: 50%;
+    background-color: var(--lumo-primary-color);
+  }
 
-      [theme~="badge"]:not([icon]):empty {
-        min-width: 0;
-        width: 1em;
-        height: 1em;
-        padding: 0;
-        border-radius: 50%;
-        background-color: var(--lumo-primary-color);
-      }
+  [theme~="badge"][theme~="small"]:not([icon]):empty {
+    width: 0.75em;
+    height: 0.75em;
+  }
 
-      [theme~="badge"][theme~="small"]:not([icon]):empty {
-        width: 0.75em;
-        height: 0.75em;
-      }
+  [theme~="badge"][theme~="contrast"]:not([icon]):empty {
+    background-color: var(--lumo-contrast);
+  }
 
-      [theme~="badge"][theme~="contrast"]:not([icon]):empty {
-        background-color: var(--lumo-contrast);
-      }
+  [theme~="badge"][theme~="success"]:not([icon]):empty {
+    background-color: var(--lumo-success-color);
+  }
 
-      [theme~="badge"][theme~="success"]:not([icon]):empty {
-        background-color: var(--lumo-success-color);
-      }
+  [theme~="badge"][theme~="error"]:not([icon]):empty {
+    background-color: var(--lumo-error-color);
+  }
 
-      [theme~="badge"][theme~="error"]:not([icon]):empty {
-        background-color: var(--lumo-error-color);
-      }
+  /* Pill */
 
-      /* Pill */
+  [theme~="badge"][theme~="pill"] {
+    --lumo-border-radius-s: 1em;
+  }
 
-      [theme~="badge"][theme~="pill"] {
-        --lumo-border-radius-s: 1em;
-      }
+  /* RTL specific styles */
 
-      /* RTL specific styles */
+  [dir="rtl"][theme~="badge"] iron-icon:first-child {
+    margin-right: -0.375em;
+    margin-left: 0;
+  }
 
-      [dir="rtl"][theme~="badge"] iron-icon:first-child {
-        margin-right: -0.375em;
-        margin-left: 0;
-      }
+  [dir="rtl"][theme~="badge"] iron-icon:last-child {
+    margin-left: -0.375em;
+    margin-right: 0;
+  }
+`;
+registerStyles('', badge, {moduleId: 'lumo-badge'});
 
-      [dir="rtl"][theme~="badge"] iron-icon:last-child {
-        margin-left: -0.375em;
-        margin-right: 0;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { badge };

color.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-import '@polymer/polymer/lib/elements/dom-module.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const colorBase = css`
+:host {
+  /* Base (background) */
+  --lumo-base-color: #FFF;
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      /* 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;
 
-      /* 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.5);
+  --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);
+  --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);
+  --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
+  --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
+  --lumo-shade: hsl(214, 35%, 15%);
 
-      /* 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.5);
-      --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);
-      --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);
-      --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);
 
-      /* 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);
 
-      /* 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%, 52%);
+  --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);
+  --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);
+  --lumo-primary-text-color: var(--lumo-primary-color);
+  --lumo-primary-contrast-color: #FFF;
 
-      /* Primary */
-      --lumo-primary-color: hsl(214, 90%, 52%);
-      --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);
-      --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);
-      --lumo-primary-text-color: var(--lumo-primary-color);
-      --lumo-primary-contrast-color: #FFF;
+  /* Error */
+  --lumo-error-color: hsl(3, 100%, 61%);
+  --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
+  --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
+  --lumo-error-text-color: hsl(3, 92%, 53%);
+  --lumo-error-contrast-color: #FFF;
 
-      /* Error */
-      --lumo-error-color: hsl(3, 100%, 61%);
-      --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
-      --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
-      --lumo-error-text-color: hsl(3, 92%, 53%);
-      --lumo-error-contrast-color: #FFF;
+  /* Success */
+  --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
+  --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
+  --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
+  --lumo-success-text-color: hsl(145, 100%, 32%);
+  --lumo-success-contrast-color: #FFF;
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${colorBase.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* Success */
-      --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
-      --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
-      --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
-      --lumo-success-text-color: hsl(145, 100%, 32%);
-      --lumo-success-contrast-color: #FFF;
-    }
-  </style>
-</custom-style><dom-module id="lumo-color">
-  <template>
-    <style>
-      [theme~="dark"] {
-        /* Base (background) */
-        --lumo-base-color: hsl(214, 35%, 21%);
+export { colorBase };
 
-        /* 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.6);
-        --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);
-        --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
-        --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
-        --lumo-tint: hsl(214, 100%, 98%);
+const color = css`
+  [theme~="dark"] {
+    /* Base (background) */
+    --lumo-base-color: hsl(214, 35%, 21%);
 
-        /* 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%);
+    /* 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.6);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);
+    --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
+    --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
+    --lumo-tint: hsl(214, 100%, 98%);
 
-        /* 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);
+    /* 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%);
 
-        /* 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);
+    /* 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);
 
-        /* Primary */
-        --lumo-primary-color: hsl(214, 86%, 55%);
-        --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
-        --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
-        --lumo-primary-text-color: hsl(214, 100%, 70%);
-        --lumo-primary-contrast-color: #FFF;
+    /* 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);
 
-        /* Error */
-        --lumo-error-color: hsl(3, 90%, 63%);
-        --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);
-        --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);
-        --lumo-error-text-color: hsl(3, 100%, 67%);
+    /* Primary */
+    --lumo-primary-color: hsl(214, 86%, 55%);
+    --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
+    --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
+    --lumo-primary-text-color: hsl(214, 100%, 70%);
+    --lumo-primary-contrast-color: #FFF;
 
-        /* Success */
-        --lumo-success-color: hsl(145, 65%, 42%);
-        --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);
-        --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);
-        --lumo-success-text-color: hsl(145, 85%, 47%);
-      }
+    /* Error */
+    --lumo-error-color: hsl(3, 90%, 63%);
+    --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);
+    --lumo-error-text-color: hsl(3, 100%, 67%);
 
-      html {
-        color: var(--lumo-body-text-color);
-        background-color: var(--lumo-base-color);
-      }
+    /* Success */
+    --lumo-success-color: hsl(145, 65%, 42%);
+    --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 47%);
+  }
 
-      [theme~="dark"] {
-        color: var(--lumo-body-text-color);
-        background-color: var(--lumo-base-color);
-      }
+  html {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+  }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        color: var(--lumo-header-text-color);
-      }
+  [theme~="dark"] {
+    color: var(--lumo-body-text-color);
+    background-color: var(--lumo-base-color);
+  }
 
-      a {
-        color: var(--lumo-primary-text-color);
-      }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: var(--lumo-header-text-color);
+  }
 
-      blockquote {
-        color: var(--lumo-secondary-text-color);
-      }
+  a {
+    color: var(--lumo-primary-text-color);
+  }
 
-      code,
-      pre {
-        background-color: var(--lumo-contrast-10pct);
-        border-radius: var(--lumo-border-radius-m);
-      }
-    </style>
-  </template>
-</dom-module><dom-module id="lumo-color-legacy">
-  <template>
-    <style include="lumo-color">
-      :host {
-        color: var(--lumo-body-text-color) !important;
-        background-color: var(--lumo-base-color) !important;
-      }
-    </style>
-  </template>
-</dom-module>`;
+  blockquote {
+    color: var(--lumo-secondary-text-color);
+  }
 
-document.head.appendChild($_documentContainer.content);
+  code,
+  pre {
+    background-color: var(--lumo-contrast-10pct);
+    border-radius: var(--lumo-border-radius-m);
+  }
+`;
+registerStyles('', color, {moduleId: 'lumo-color'});
 
-/* Only needed for IE11 when you want to use the dark palette inside the light palette */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+export { color };
+
+const colorLegacy = css`
+  :host {
+    color: var(--lumo-body-text-color) !important;
+    background-color: var(--lumo-base-color) !important;
+  }
+`;
+registerStyles('', colorLegacy, {moduleId: 'lumo-color-legacy', include: ['lumo-color']});
+
+export { colorLegacy };

mixins/field-button.js

@@ -5,36 +5,32 @@ import '../color.js';
 import '../style.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const fieldButton = css`
+  [part$="button"] {
+    flex: none;
+    width: 1em;
+    height: 1em;
+    line-height: 1;
+    font-size: var(--lumo-icon-size-m);
+    text-align: center;
+    color: var(--lumo-contrast-60pct);
+    transition: 0.2s color;
+    cursor: var(--lumo-clickable-cursor);
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-field-button">
-  <template>
-    <style>
-      [part\$="button"] {
-        flex: none;
-        width: 1em;
-        height: 1em;
-        line-height: 1;
-        font-size: var(--lumo-icon-size-m);
-        text-align: center;
-        color: var(--lumo-contrast-60pct);
-        transition: 0.2s color;
-        cursor: var(--lumo-clickable-cursor);
-      }
+  :host(:not([readonly])) [part$="button"]:hover {
+    color: var(--lumo-contrast-90pct);
+  }
 
-      :host(:not([readonly])) [part\$="button"]:hover {
-        color: var(--lumo-contrast-90pct);
-      }
+  :host([disabled]) [part$="button"],
+  :host([readonly]) [part$="button"] {
+    color: var(--lumo-contrast-20pct);
+  }
 
-      :host([disabled]) [part\$="button"],
-      :host([readonly]) [part\$="button"] {
-        color: var(--lumo-contrast-20pct);
-      }
+  [part$="button"]::before {
+    font-family: "lumo-icons";
+    display: block;
+  }
+`;
+registerStyles('', fieldButton, {moduleId: 'lumo-field-button'});
 
-      [part\$="button"]::before {
-        font-family: "lumo-icons";
-        display: block;
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { fieldButton };

mixins/menu-overlay.js

@@ -0,116 +1,112 @@
+/* Split as a separate module because combo box can only use the "fullscreen" styles */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
 import '../spacing.js';
+
 import '../style.js';
 import './overlay.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const menuOverlayCore = css`
+  :host([opening]),
+  :host([closing]) {
+    animation: 0.14s lumo-overlay-dummy-animation;
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-menu-overlay-core">
-  <template>
-    <style>
-      :host([opening]),
-      :host([closing]) {
-        animation: 0.14s lumo-overlay-dummy-animation;
-      }
+  [part="overlay"] {
+    will-change: opacity, transform;
+  }
 
-      [part="overlay"] {
-        will-change: opacity, transform;
-      }
+  :host([opening]) [part="overlay"] {
+    animation: 0.1s lumo-menu-overlay-enter ease-out both;
+  }
 
-      :host([opening]) [part="overlay"] {
-        animation: 0.1s lumo-menu-overlay-enter ease-out both;
-      }
+  @keyframes lumo-menu-overlay-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-4px);
+    }
+  }
 
-      @keyframes lumo-menu-overlay-enter {
-        0% {
-          opacity: 0;
-          transform: translateY(-4px);
-        }
-      }
+  :host([closing]) [part="overlay"] {
+    animation: 0.1s lumo-menu-overlay-exit both;
+  }
 
-      :host([closing]) [part="overlay"] {
-        animation: 0.1s lumo-menu-overlay-exit both;
-      }
+  @keyframes lumo-menu-overlay-exit {
+    100% {
+      opacity: 0;
+    }
+  }
+`;
+registerStyles('', menuOverlayCore, {moduleId: 'lumo-menu-overlay-core'});
 
-      @keyframes lumo-menu-overlay-exit {
-        100% {
-          opacity: 0;
-        }
-      }
-    </style>
-  </template>
-</dom-module><dom-module id="lumo-menu-overlay">
-  <template>
-    <style include="lumo-overlay lumo-menu-overlay-core">
-      /* Small viewport (bottom sheet) styles */
-      /* Use direct media queries instead of the state attributes (\`[phone]\` and \`[fullscreen]\`) provided by the elements */
-      @media (max-width: 420px), (max-height: 420px) {
-        :host {
-          top: 0 !important;
-          right: 0 !important;
-          bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
-          left: 0 !important;
-          align-items: stretch !important;
-          justify-content: flex-end !important;
-        }
+export { menuOverlayCore };
 
-        [part="overlay"] {
-          max-height: 50vh;
-          width: 100vw;
-          border-radius: 0;
-          box-shadow: var(--lumo-box-shadow-xl);
-        }
+const menuOverlay = css`
+  /* Small viewport (bottom sheet) styles */
+  /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
+  @media (max-width: 420px), (max-height: 420px) {
+    :host {
+      top: 0 !important;
+      right: 0 !important;
+      bottom: var(--vaadin-overlay-viewport-bottom, 0) !important;
+      left: 0 !important;
+      align-items: stretch !important;
+      justify-content: flex-end !important;
+    }
 
-        /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-        [part="content"] {
-          padding: 30px var(--lumo-space-m);
-          max-height: inherit;
-          box-sizing: border-box;
-          -webkit-overflow-scrolling: touch;
-          overflow: auto;
-          -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-          mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
-        }
+    [part="overlay"] {
+      max-height: 50vh;
+      width: 100vw;
+      border-radius: 0;
+      box-shadow: var(--lumo-box-shadow-xl);
+    }
 
-        [part="backdrop"] {
-          display: block;
-        }
+    /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
+    [part="content"] {
+      padding: 30px var(--lumo-space-m);
+      max-height: inherit;
+      box-sizing: border-box;
+      -webkit-overflow-scrolling: touch;
+      overflow: auto;
+      -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+      mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent);
+    }
 
-        /* Animations */
+    [part="backdrop"] {
+      display: block;
+    }
 
-        :host([opening]) [part="overlay"] {
-          animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1) both;
-        }
+    /* Animations */
 
-        :host([closing]),
-        :host([closing]) [part="backdrop"] {
-          animation-delay: 0.14s;
-        }
+    :host([opening]) [part="overlay"] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1) both;
+    }
 
-        :host([closing]) [part="overlay"] {
-          animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.55, .055, .675, .19) both;
-        }
-      }
+    :host([closing]),
+    :host([closing]) [part="backdrop"] {
+      animation-delay: 0.14s;
+    }
 
-      @keyframes lumo-mobile-menu-overlay-enter {
-        0% {
-          transform: translateY(150%);
-        }
-      }
+    :host([closing]) [part="overlay"] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.55, .055, .675, .19) both;
+    }
+  }
 
-      @keyframes lumo-mobile-menu-overlay-exit {
-        100% {
-          transform: translateY(150%);
-        }
-      }
-    </style>
-  </template>
-</dom-module>`;
+  @keyframes lumo-mobile-menu-overlay-enter {
+    0% {
+      transform: translateY(150%);
+    }
+  }
 
-document.head.appendChild($_documentContainer.content);
+  @keyframes lumo-mobile-menu-overlay-exit {
+    100% {
+      transform: translateY(150%);
+    }
+  }
+`;
+registerStyles('', menuOverlay, {moduleId: 'lumo-menu-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core']});
 
-/* Split as a separate module because combo box can only use the "fullscreen" styles */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;
+export { menuOverlay };

mixins/overlay.js

@@ -5,68 +5,64 @@ import '../color.js';
 import '../typography.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const overlay = css`
+  :host {
+    top: var(--lumo-space-m);
+    right: var(--lumo-space-m);
+    bottom: var(--lumo-space-m);
+    left: var(--lumo-space-m);
+    /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
+    /* stylelint-disable-next-line */
+    outline: 0px solid transparent;
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-overlay">
-  <template>
-    <style>
-      :host {
-        top: var(--lumo-space-m);
-        right: var(--lumo-space-m);
-        bottom: var(--lumo-space-m);
-        left: var(--lumo-space-m);
-        /* Workaround for Edge issue (only on Surface), where an overflowing vaadin-list-box inside vaadin-select-overlay makes the overlay transparent */
-        /* stylelint-disable-next-line */
-        outline: 0px solid transparent;
-      }
+  [part="overlay"] {
+    background-color: var(--lumo-base-color);
+    background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
+    border-radius: var(--lumo-border-radius-m);
+    box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
+    color: var(--lumo-body-text-color);
+    font-family: var(--lumo-font-family);
+    font-size: var(--lumo-font-size-m);
+    font-weight: 400;
+    line-height: var(--lumo-line-height-m);
+    letter-spacing: 0;
+    text-transform: none;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
 
-      [part="overlay"] {
-        background-color: var(--lumo-base-color);
-        background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-        border-radius: var(--lumo-border-radius-m);
-        box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
-        color: var(--lumo-body-text-color);
-        font-family: var(--lumo-font-family);
-        font-size: var(--lumo-font-size-m);
-        font-weight: 400;
-        line-height: var(--lumo-line-height-m);
-        letter-spacing: 0;
-        text-transform: none;
-        -webkit-text-size-adjust: 100%;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
+  [part="content"] {
+    padding: var(--lumo-space-xs);
+  }
 
-      [part="content"] {
-        padding: var(--lumo-space-xs);
-      }
+  [part="backdrop"] {
+    background-color: var(--lumo-shade-20pct);
+    animation: 0.2s lumo-overlay-backdrop-enter both;
+    will-change: opacity;
+  }
 
-      [part="backdrop"] {
-        background-color: var(--lumo-shade-20pct);
-        animation: 0.2s lumo-overlay-backdrop-enter both;
-        will-change: opacity;
-      }
+  @keyframes lumo-overlay-backdrop-enter {
+    0% {
+      opacity: 0;
+    }
+  }
 
-      @keyframes lumo-overlay-backdrop-enter {
-        0% {
-          opacity: 0;
-        }
-      }
+  :host([closing]) [part="backdrop"] {
+    animation: 0.2s lumo-overlay-backdrop-exit both;
+  }
 
-      :host([closing]) [part="backdrop"] {
-        animation: 0.2s lumo-overlay-backdrop-exit both;
-      }
+  @keyframes lumo-overlay-backdrop-exit {
+    100% {
+      opacity: 0;
+    }
+  }
 
-      @keyframes lumo-overlay-backdrop-exit {
-        100% {
-          opacity: 0;
-        }
-      }
+  @keyframes lumo-overlay-dummy-animation {
+    0% { opacity: 1; }
+    100% { opacity: 1; }
+  }
+`;
+registerStyles('', overlay, {moduleId: 'lumo-overlay'});
 
-      @keyframes lumo-overlay-dummy-animation {
-        0% { opacity: 1; }
-        100% { opacity: 1; }
-      }
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { overlay };

mixins/required-field.js

@@ -5,104 +5,99 @@ import '../color.js';
 import '../typography.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const requiredField = css`
+  [part="label"] {
+    align-self: flex-start;
+    color: var(--lumo-secondary-text-color);
+    font-weight: 500;
+    font-size: var(--lumo-font-size-s);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+    line-height: 1;
+    padding-bottom: 0.5em;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
 
-$_documentContainer.innerHTML = `<dom-module id="lumo-required-field">
-  <template>
-    <style>
-      [part="label"] {
-        align-self: flex-start;
-        color: var(--lumo-secondary-text-color);
-        font-weight: 500;
-        font-size: var(--lumo-font-size-s);
-        margin-left: calc(var(--lumo-border-radius-m) / 4);
-        transition: color 0.2s;
-        line-height: 1;
-        padding-bottom: 0.5em;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        position: relative;
-        max-width: 100%;
-        box-sizing: border-box;
-      }
+  :host([has-label])::before {
+    margin-top: calc(var(--lumo-font-size-s) * 1.5);
+  }
 
-      :host([has-label])::before {
-        margin-top: calc(var(--lumo-font-size-s) * 1.5);
-      }
+  :host([has-label]) {
+    padding-top: var(--lumo-space-m);
+  }
 
-      :host([has-label]) {
-        padding-top: var(--lumo-space-m);
-      }
+  :host([required]) [part="label"] {
+    padding-right: 1em;
+  }
 
-      :host([required]) [part="label"] {
-        padding-right: 1em;
-      }
+  [part="label"]::after {
+    content: var(--lumo-required-field-indicator, "•");
+    transition: opacity 0.2s;
+    opacity: 0;
+    color: var(--lumo-primary-text-color);
+    position: absolute;
+    right: 0;
+    width: 1em;
+    text-align: center;
+  }
 
-      [part="label"]::after {
-        content: var(--lumo-required-field-indicator, "•");
-        transition: opacity 0.2s;
-        opacity: 0;
-        color: var(--lumo-primary-text-color);
-        position: absolute;
-        right: 0;
-        width: 1em;
-        text-align: center;
-      }
+  :host([required]:not([has-value])) [part="label"]::after {
+    opacity: 1;
+  }
 
-      :host([required]:not([has-value])) [part="label"]::after {
-        opacity: 1;
-      }
+  :host([invalid]) [part="label"]::after {
+    color: var(--lumo-error-text-color);
+  }
 
-      :host([invalid]) [part="label"]::after {
-        color: var(--lumo-error-text-color);
-      }
+  [part="error-message"] {
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
+    color: var(--lumo-error-text-color);
+    will-change: max-height;
+    transition: 0.4s max-height;
+    max-height: 5em;
+  }
 
-      [part="error-message"] {
-        margin-left: calc(var(--lumo-border-radius-m) / 4);
-        font-size: var(--lumo-font-size-xs);
-        line-height: var(--lumo-line-height-xs);
-        color: var(--lumo-error-text-color);
-        will-change: max-height;
-        transition: 0.4s max-height;
-        max-height: 5em;
-      }
+  /* Margin that doesn’t reserve space when there’s no error message */
+  [part="error-message"]:not(:empty)::before,
+  [part="error-message"]:not(:empty)::after {
+    content: "";
+    display: block;
+    height: 0.4em;
+  }
 
-      /* Margin that doesn’t reserve space when there’s no error message */
-      [part="error-message"]:not(:empty)::before,
-      [part="error-message"]:not(:empty)::after {
-        content: "";
-        display: block;
-        height: 0.4em;
-      }
+  :host(:not([invalid])) [part="error-message"] {
+    max-height: 0;
+    overflow: hidden;
+  }
 
-      :host(:not([invalid])) [part="error-message"] {
-        max-height: 0;
-        overflow: hidden;
-      }
+  /* RTL specific styles */
 
-      /* RTL specific styles */
+  :host([dir="rtl"]) [part="label"] {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-border-radius-m) / 4);
+  }
 
-      :host([dir="rtl"]) [part="label"] {
-        margin-left: 0;
-        margin-right: calc(var(--lumo-border-radius-m) / 4);
-      }
+  :host([required][dir="rtl"]) [part="label"] {
+    padding-left: 1em;
+    padding-right: 0;
+  }
 
-      :host([required][dir="rtl"]) [part="label"] {
-        padding-left: 1em;
-        padding-right: 0;
-      }
+  :host([dir="rtl"]) [part="label"]::after {
+    right: auto;
+    left: 0;
+  }
 
-      :host([dir="rtl"]) [part="label"]::after {
-        right: auto;
-        left: 0;
-      }
+  :host([dir="rtl"]) [part="error-message"] {
+    margin-left: 0;
+    margin-right: calc(var(--lumo-border-radius-m) / 4);
+  }
+`;
+registerStyles('', requiredField, {moduleId: 'lumo-required-field'});
 
-      :host([dir="rtl"]) [part="error-message"] {
-        margin-left: 0;
-        margin-right: calc(var(--lumo-border-radius-m) / 4);
-      }
-
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { requiredField };

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "1.6.1",
+  "version": "1.7.0-alpha1",
   "main": "all-imports.js",
@@ -39,3 +39,4 @@ "author": "Vaadin Ltd",
     "@polymer/iron-icon": "^3.0.0",
-    "@polymer/iron-iconset-svg": "^3.0.0"
+    "@polymer/iron-iconset-svg": "^3.0.0",
+    "@vaadin/vaadin-themable-mixin": "^1.6.1"
   },
@@ -42,0 +43,0 @@ "scripts": {

sizing.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const sizing = css`
+: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;
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      --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);
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${sizing.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* 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);
-    }
-  </style>
-</custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
+export { sizing };

spacing.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const spacing = css`
+: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;
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      /* 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);
 
-      /* 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);
+}
+`;
+const $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${spacing.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* 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);
-    }
-  </style>
-</custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
+export { spacing };

style.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-const $_documentContainer = document.createElement('template');
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const style = css`
+: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 */
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      /* 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);
 
-      /* 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 $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${style.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* Clickable element cursor */
-      --lumo-clickable-cursor: default;
-    }
-  </style>
-</custom-style>`;
-
-document.head.appendChild($_documentContainer.content);
+export { style };

typography.js

 import './version.js';
 import '@polymer/polymer/lib/elements/custom-style.js';
-import '@polymer/polymer/lib/elements/dom-module.js';
-const $_documentContainer = document.createElement('template');
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+const font = css`
+:host {
+  /* Font families */
+  --lumo-font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
-$_documentContainer.innerHTML = `<custom-style>
-  <style>
-    html {
-      /* Font families */
-      --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: .75rem;
+  --lumo-font-size-xs: .8125rem;
+  --lumo-font-size-s: .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;
 
-      /* Font sizes */
-      --lumo-font-size-xxs: .75rem;
-      --lumo-font-size-xs: .8125rem;
-      --lumo-font-size-s: .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 $tpl = document.createElement('template');
+$tpl.innerHTML = `<custom-style><style>${font.toString().replace(':host', 'html')}</style></custom-style>`;
+document.head.appendChild($tpl.content);
 
-      /* Line heights */
-      --lumo-line-height-xs: 1.25;
-      --lumo-line-height-s: 1.375;
-      --lumo-line-height-m: 1.625;
-    }
+export { font };
 
-  </style>
-</custom-style><dom-module id="lumo-typography">
-  <template>
-    <style>
-      html {
-        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;
-      }
+const typography = css`
+  html {
+    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;
+  }
 
-      /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
-      :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;
-      }
+  /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
+  :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);
-      }
+  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);
-      }
+  [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,
+  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;
-      }
+  h1 {
+    font-size: var(--lumo-font-size-xxxl);
+    margin-bottom: 0.75em;
+  }
 
-      h2 {
-        font-size: var(--lumo-font-size-xxl);
-        margin-bottom: 0.5em;
-      }
+  h2 {
+    font-size: var(--lumo-font-size-xxl);
+    margin-bottom: 0.5em;
+  }
 
-      h3 {
-        font-size: var(--lumo-font-size-xl);
-        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;
-      }
+  h4 {
+    font-size: var(--lumo-font-size-l);
+    margin-bottom: 0.5em;
+  }
 
-      h5 {
-        font-size: var(--lumo-font-size-m);
-        margin-bottom: 0.25em;
-      }
+  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;
-      }
+  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;
-      }
+  p,
+  blockquote {
+    margin-top: 0.5em;
+    margin-bottom: 0.75em;
+  }
 
-      a {
-        text-decoration: none;
-      }
+  a {
+    text-decoration: none;
+  }
 
-      a:hover {
-        text-decoration: underline;
-      }
+  a: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);
-      }
+  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);
-      }
+  blockquote {
+    border-left: 2px solid var(--lumo-contrast-30pct);
+  }
 
-      b,
-      strong {
-        font-weight: 600;
-      }
+  b,
+  strong {
+    font-weight: 600;
+  }
 
-      /* RTL specific styles */
+  /* RTL specific styles */
 
-      blockquote[dir="rtl"] {
-        border-left: none;
-        border-right: 2px solid var(--lumo-contrast-30pct);
-      }
+  blockquote[dir="rtl"] {
+    border-left: none;
+    border-right: 2px solid var(--lumo-contrast-30pct);
+  }
+`;
+registerStyles('', typography, {moduleId: 'lumo-typography'});
 
-    </style>
-  </template>
-</dom-module>`;
-
-document.head.appendChild($_documentContainer.content);
+export { typography };

version.js

 class Lumo extends HTMLElement {
   static get version() {
-    return '1.6.1';
+    return '1.7.0-alpha1';
   }
@@ -5,0 +5,0 @@ }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

67734

decreased by-3.69%

Dependency count

4

increased by33.33%

Lines of code

1034

decreased by-2.27%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Added@vaadin/vaadin-themable-mixin@^1.6.1

• + Added@vaadin/vaadin-themable-mixin@1.6.2(transitive)

• + Addedlit-element@2.5.1(transitive)

• + Addedlit-html@1.4.1(transitive)