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

Comparing version 1.7.0-alpha2 to 20.0.0-alpha1

all-imports.js

@@ -0,1 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import './mixins/field-button.js';
@@ -25,7 +30,1 @@ export * from './mixins/field-button.js';
 export * from './typography.js';
-
-/**
-@license
-Copyright (c) 2019 Vaadin Ltd.
-This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
-*/

badge.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const badge: CSSResult;

badge.js

@@ -0,7 +1,13 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './style.js';
 import './color.js';
 import './typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const badge = css`
-  [theme~="badge"] {
+  [theme~='badge'] {
     display: inline-flex;
@@ -25,9 +31,9 @@ align-items: center;
   /* Ensure proper vertical alignment */
-  [theme~="badge"]::before {
+  [theme~='badge']::before {
     display: inline-block;
-    content: "\\2003";
+    content: '\\2003';
     width: 0;
   }
 
-  [theme~="badge"][theme~="small"] {
+  [theme~='badge'][theme~='small'] {
     font-size: var(--lumo-font-size-xxs);
@@ -39,3 +45,3 @@ line-height: 1;
 
-  [theme~="badge"][theme~="success"] {
+  [theme~='badge'][theme~='success'] {
     color: var(--lumo-success-text-color);
@@ -45,3 +51,3 @@ background-color: var(--lumo-success-color-10pct);
 
-  [theme~="badge"][theme~="error"] {
+  [theme~='badge'][theme~='error'] {
     color: var(--lumo-error-text-color);
@@ -51,3 +57,3 @@ background-color: var(--lumo-error-color-10pct);
 
-  [theme~="badge"][theme~="contrast"] {
+  [theme~='badge'][theme~='contrast'] {
     color: var(--lumo-contrast-80pct);
@@ -59,3 +65,3 @@ background-color: var(--lumo-contrast-5pct);
 
-  [theme~="badge"][theme~="primary"] {
+  [theme~='badge'][theme~='primary'] {
     color: var(--lumo-primary-contrast-color);
@@ -65,3 +71,3 @@ background-color: var(--lumo-primary-color);
 
-  [theme~="badge"][theme~="success"][theme~="primary"] {
+  [theme~='badge'][theme~='success'][theme~='primary'] {
     color: var(--lumo-success-contrast-color);
@@ -71,3 +77,3 @@ background-color: var(--lumo-success-color);
 
-  [theme~="badge"][theme~="error"][theme~="primary"] {
+  [theme~='badge'][theme~='error'][theme~='primary'] {
     color: var(--lumo-error-contrast-color);
@@ -77,3 +83,3 @@ background-color: var(--lumo-error-color);
 
-  [theme~="badge"][theme~="contrast"][theme~="primary"] {
+  [theme~='badge'][theme~='contrast'][theme~='primary'] {
     color: var(--lumo-base-color);
@@ -85,3 +91,3 @@ background-color: var(--lumo-contrast);
 
-  [theme~="badge"][href]:hover {
+  [theme~='badge'][href]:hover {
     text-decoration: none;
@@ -92,3 +98,3 @@ }
 
-  [theme~="badge"] iron-icon {
+  [theme~='badge'] iron-icon {
     margin: -0.25em 0;
@@ -99,11 +105,11 @@ --iron-icon-width: 1.5em;
 
-  [theme~="badge"] iron-icon:first-child {
+  [theme~='badge'] iron-icon:first-child {
     margin-left: -0.375em;
   }
 
-  [theme~="badge"] iron-icon:last-child {
+  [theme~='badge'] iron-icon:last-child {
     margin-right: -0.375em;
   }
 
-  [theme~="badge"][icon] {
+  [theme~='badge'][icon] {
     min-width: 0;
@@ -116,3 +122,3 @@ padding: 0;
 
-  [theme~="badge"][icon][theme~="small"] {
+  [theme~='badge'][icon][theme~='small'] {
     --iron-icon-width: var(--lumo-icon-size-s);
@@ -124,3 +130,3 @@ --iron-icon-height: var(--lumo-icon-size-s);
 
-  [theme~="badge"]:not([icon]):empty {
+  [theme~='badge']:not([icon]):empty {
     min-width: 0;
@@ -134,3 +140,3 @@ width: 1em;
 
-  [theme~="badge"][theme~="small"]:not([icon]):empty {
+  [theme~='badge'][theme~='small']:not([icon]):empty {
     width: 0.75em;
@@ -140,11 +146,11 @@ height: 0.75em;
 
-  [theme~="badge"][theme~="contrast"]:not([icon]):empty {
+  [theme~='badge'][theme~='contrast']:not([icon]):empty {
     background-color: var(--lumo-contrast);
   }
 
-  [theme~="badge"][theme~="success"]:not([icon]):empty {
+  [theme~='badge'][theme~='success']:not([icon]):empty {
     background-color: var(--lumo-success-color);
   }
 
-  [theme~="badge"][theme~="error"]:not([icon]):empty {
+  [theme~='badge'][theme~='error']:not([icon]):empty {
     background-color: var(--lumo-error-color);
@@ -155,3 +161,3 @@ }
 
-  [theme~="badge"][theme~="pill"] {
+  [theme~='badge'][theme~='pill'] {
     --lumo-border-radius-s: 1em;
@@ -162,3 +168,3 @@ }
 
-  [dir="rtl"][theme~="badge"] iron-icon:first-child {
+  [dir='rtl'][theme~='badge'] iron-icon:first-child {
     margin-right: -0.375em;
@@ -168,3 +174,3 @@ margin-left: 0;
 
-  [dir="rtl"][theme~="badge"] iron-icon:last-child {
+  [dir='rtl'][theme~='badge'] iron-icon:last-child {
     margin-left: -0.375em;
@@ -174,4 +180,5 @@ margin-right: 0;
 `;
-registerStyles('', badge, {moduleId: 'lumo-badge'});
 
+registerStyles('', badge, { moduleId: 'lumo-badge' });
+
 export { badge };

color.d.ts

@@ -1,2 +0,2 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
@@ -3,0 +3,0 @@ export const colorBase: CSSResult;

color.js

@@ -0,85 +1,89 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './version.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const colorBase = css`
-:host {
-  /* Base (background) */
-  --lumo-base-color: #FFF;
+  :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;
+    /* 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;
-}
+    /* 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>`;
+$tpl.innerHTML = `<style>${colorBase.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
-export { colorBase };
-
 const color = css`
-  [theme~="dark"] {
+  [theme~='dark'] {
     /* Base (background) */
@@ -139,3 +143,3 @@ --lumo-base-color: hsl(214, 35%, 21%);
     --lumo-primary-text-color: hsl(214, 100%, 70%);
-    --lumo-primary-contrast-color: #FFF;
+    --lumo-primary-contrast-color: #fff;
 
@@ -160,3 +164,3 @@ /* Error */
 
-  [theme~="dark"] {
+  [theme~='dark'] {
     color: var(--lumo-body-text-color);
@@ -189,5 +193,4 @@ background-color: var(--lumo-base-color);
 `;
-registerStyles('', color, {moduleId: 'lumo-color'});
 
-export { color };
+registerStyles('', color, { moduleId: 'lumo-color' });
 
@@ -200,4 +203,5 @@ const colorLegacy = css`
 `;
-registerStyles('', colorLegacy, {moduleId: 'lumo-color-legacy', include: ['lumo-color']});
 
-export { colorLegacy };
+registerStyles('', colorLegacy, { moduleId: 'lumo-color-legacy', include: ['lumo-color'] });
+
+export { colorBase, color, colorLegacy };

font-icons.js

@@ -1,6 +0,10 @@
-import '@polymer/polymer/lib/elements/custom-style.js';
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import './version.js';
 const $_documentContainer = document.createElement('template');
 
-$_documentContainer.innerHTML = `<custom-style>
+$_documentContainer.innerHTML = `
   <style>
@@ -59,12 +63,4 @@ @font-face {
   </style>
-</custom-style>`;
+`;
 
 document.head.appendChild($_documentContainer.content);
-
-/* NOTICE: Generated with 'gulp icons' */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;

icons.js

@@ -0,3 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@polymer/iron-icon/iron-icon.js';
 import './version.js';
-import '@polymer/iron-icon/iron-icon.js';
 import './iconset.js';

iconset.js

@@ -0,3 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
 import './version.js';
-import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
+
 const $_documentContainer = document.createElement('template');
@@ -52,9 +58,1 @@
 document.head.appendChild($_documentContainer.content);
-
-/* NOTICE: Generated with 'gulp icons' */
-/*
-  FIXME(polymer-modulizer): the above comments were extracted
-  from HTML and may be out of place here. Review them and
-  then delete this comment!
-*/
-;

mixins/field-button.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const fieldButton: CSSResult;

mixins/field-button.js

@@ -0,1 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '../color.js';
@@ -5,5 +11,5 @@ import '../font-icons.js';
 import '../style.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const fieldButton = css`
-  [part$="button"] {
+  [part$='button'] {
     flex: none;
@@ -20,18 +26,18 @@ width: 1em;
 
-  :host(:not([readonly])) [part$="button"]:hover {
+  :host(:not([readonly])) [part$='button']:hover {
     color: var(--lumo-contrast-90pct);
   }
 
-  :host([disabled]) [part$="button"],
-  :host([readonly]) [part$="button"] {
+  :host([disabled]) [part$='button'],
+  :host([readonly]) [part$='button'] {
     color: var(--lumo-contrast-20pct);
   }
 
-  [part$="button"]::before {
-    font-family: "lumo-icons";
+  [part$='button']::before {
+    font-family: 'lumo-icons';
     display: block;
   }
 `;
-registerStyles('', fieldButton, {moduleId: 'lumo-field-button'});
+registerStyles('', fieldButton, { moduleId: 'lumo-field-button' });
 
 export { fieldButton };

mixins/menu-overlay.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const menuOverlay: CSSResult;

mixins/menu-overlay.js

@@ -1,12 +0,11 @@
-/* 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!
-*/
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '../spacing.js';
-
 import '../style.js';
 import './overlay.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const menuOverlayCore = css`
@@ -18,7 +17,7 @@ :host([opening]),
 
-  [part="overlay"] {
+  [part='overlay'] {
     will-change: opacity, transform;
   }
 
-  :host([opening]) [part="overlay"] {
+  :host([opening]) [part='overlay'] {
     animation: 0.1s lumo-menu-overlay-enter ease-out both;
@@ -34,3 +33,3 @@ }
 
-  :host([closing]) [part="overlay"] {
+  :host([closing]) [part='overlay'] {
     animation: 0.1s lumo-menu-overlay-exit both;
@@ -45,5 +44,4 @@ }
 `;
-registerStyles('', menuOverlayCore, {moduleId: 'lumo-menu-overlay-core'});
 
-export { menuOverlayCore };
+registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
 
@@ -63,3 +61,3 @@ const menuOverlay = css`
 
-    [part="overlay"] {
+    [part='overlay'] {
       max-height: 50vh;
@@ -72,3 +70,3 @@ width: 100vw;
     /* The content part scrolls instead of the overlay part, because of the gradient fade-out */
-    [part="content"] {
+    [part='content'] {
       padding: 30px var(--lumo-space-m);
@@ -83,3 +81,3 @@ max-height: inherit;
 
-    [part="backdrop"] {
+    [part='backdrop'] {
       display: block;
@@ -90,13 +88,13 @@ }
 
-    :host([opening]) [part="overlay"] {
-      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(.215, .61, .355, 1) both;
+    :host([opening]) [part='overlay'] {
+      animation: 0.2s lumo-mobile-menu-overlay-enter cubic-bezier(0.215, 0.61, 0.355, 1) both;
     }
 
     :host([closing]),
-    :host([closing]) [part="backdrop"] {
+    :host([closing]) [part='backdrop'] {
       animation-delay: 0.14s;
     }
 
-    :host([closing]) [part="overlay"] {
-      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.55, .055, .675, .19) both;
+    :host([closing]) [part='overlay'] {
+      animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(0.55, 0.055, 0.675, 0.19) both;
     }
@@ -117,4 +115,4 @@ }
 `;
-registerStyles('', menuOverlay, {moduleId: 'lumo-menu-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core']});
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core'] });
 
-export { menuOverlay };
+export { menuOverlayCore, menuOverlay };

mixins/overlay.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const overlay: CSSResult;

mixins/overlay.js

@@ -0,1 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '../color.js';
@@ -5,3 +11,3 @@ import '../spacing.js';
 import '../typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const overlay = css`
@@ -18,3 +24,3 @@ :host {
 
-  [part="overlay"] {
+  [part='overlay'] {
     background-color: var(--lumo-base-color);
@@ -36,7 +42,7 @@ background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
 
-  [part="content"] {
+  [part='content'] {
     padding: var(--lumo-space-xs);
   }
 
-  [part="backdrop"] {
+  [part='backdrop'] {
     background-color: var(--lumo-shade-20pct);
@@ -53,3 +59,3 @@ animation: 0.2s lumo-overlay-backdrop-enter both;
 
-  :host([closing]) [part="backdrop"] {
+  :host([closing]) [part='backdrop'] {
     animation: 0.2s lumo-overlay-backdrop-exit both;
@@ -65,8 +71,14 @@ }
   @keyframes lumo-overlay-dummy-animation {
-    0% { opacity: 1; }
-    100% { opacity: 1; }
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 1;
+    }
   }
 `;
-registerStyles('', overlay, {moduleId: 'lumo-overlay'});
 
+registerStyles('', overlay, { moduleId: 'lumo-overlay' });
+
 export { overlay };

mixins/required-field.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const requiredField: CSSResult;

mixins/required-field.js

@@ -0,1 +1,7 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '../color.js';
@@ -5,5 +11,5 @@ import '../spacing.js';
 import '../typography.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+
 const requiredField = css`
-  [part="label"] {
+  [part='label'] {
     align-self: flex-start;
@@ -33,8 +39,8 @@ color: var(--lumo-secondary-text-color);
 
-  :host([required]) [part="label"] {
+  :host([required]) [part='label'] {
     padding-right: 1em;
   }
 
-  [part="label"]::after {
-    content: var(--lumo-required-field-indicator, "•");
+  [part='label']::after {
+    content: var(--lumo-required-field-indicator, '•');
     transition: opacity 0.2s;
@@ -49,11 +55,11 @@ opacity: 0;
 
-  :host([required]:not([has-value])) [part="label"]::after {
+  :host([required]:not([has-value])) [part='label']::after {
     opacity: 1;
   }
 
-  :host([invalid]) [part="label"]::after {
+  :host([invalid]) [part='label']::after {
     color: var(--lumo-error-text-color);
   }
 
-  [part="error-message"] {
+  [part='error-message'] {
     margin-left: calc(var(--lumo-border-radius-m) / 4);
@@ -69,5 +75,5 @@ font-size: var(--lumo-font-size-xs);
   /* 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: "";
+  [part='error-message']:not(:empty)::before,
+  [part='error-message']:not(:empty)::after {
+    content: '';
     display: block;
@@ -77,3 +83,3 @@ height: 0.4em;
 
-  :host(:not([invalid])) [part="error-message"] {
+  :host(:not([invalid])) [part='error-message'] {
     max-height: 0;
@@ -85,3 +91,3 @@ overflow: hidden;
 
-  :host([dir="rtl"]) [part="label"] {
+  :host([dir='rtl']) [part='label'] {
     margin-left: 0;
@@ -91,3 +97,3 @@ margin-right: calc(var(--lumo-border-radius-m) / 4);
 
-  :host([required][dir="rtl"]) [part="label"] {
+  :host([required][dir='rtl']) [part='label'] {
     padding-left: 1em;
@@ -97,3 +103,3 @@ padding-right: 0;
 
-  :host([dir="rtl"]) [part="label"]::after {
+  :host([dir='rtl']) [part='label']::after {
     right: auto;
@@ -103,3 +109,3 @@ left: 0;
 
-  :host([dir="rtl"]) [part="error-message"] {
+  :host([dir='rtl']) [part='error-message'] {
     margin-left: 0;
@@ -109,4 +115,5 @@ margin-right: calc(var(--lumo-border-radius-m) / 4);
 `;
-registerStyles('', requiredField, {moduleId: 'lumo-required-field'});
 
+registerStyles('', requiredField, { moduleId: 'lumo-required-field' });
+
 export { requiredField };

package.json

 {
+  "name": "@vaadin/vaadin-lumo-styles",
+  "version": "20.0.0-alpha1",
   "description": "Lumo is a design system foundation for modern web applications, used by Vaadin components",
+  "main": "all-imports.js",
+  "module": "all-imports.js",
+  "repository": "vaadin/vaadin-lumo-styles",
   "keywords": [
@@ -11,7 +16,2 @@ "vaadin",
   ],
-  "repository": "vaadin/vaadin-lumo-styles",
-  "homepage": "https://vaadin.com/components",
-  "name": "@vaadin/vaadin-lumo-styles",
-  "version": "1.7.0-alpha2",
-  "main": "all-imports.js",
   "author": "Vaadin Ltd",
@@ -22,2 +22,3 @@ "license": "Apache-2.0",
   },
+  "homepage": "https://vaadin.com/components",
   "files": [
@@ -28,45 +29,14 @@ "*.js",
     "mixins/*.d.ts",
-    "presets/*.js",
-    "!wdio.conf.js"
+    "presets/*.js"
   ],
-  "resolutions": {
-    "es-abstract": "1.17.6",
-    "@types/doctrine": "0.0.3",
-    "inherits": "2.0.3",
-    "samsam": "1.1.3",
-    "supports-color": "3.1.2",
-    "type-detect": "1.0.0"
-  },
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.6.1"
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/vaadin-themable-mixin": "^20.0.0-alpha1"
   },
-  "scripts": {
-  "generate-typings": "gen-typescript-declarations --outDir . --verify"
-},
-"devDependencies": {
-    "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-checkbox": "^2.2.0",
-    "@vaadin/vaadin-combo-box": "^4.1.0",
-    "@vaadin/vaadin-context-menu": "^4.1.0",
-    "@vaadin/vaadin-date-picker": "^3.2.0",
-    "@vaadin/vaadin-dialog": "^2.1.0",
-    "@vaadin/vaadin-form-layout": "^2.1.0",
-    "@vaadin/vaadin-grid": "^5.1.0",
-    "@vaadin/vaadin-item": "^2.1.0",
-    "@vaadin/vaadin-list-box": "^1.1.0",
-    "@vaadin/vaadin-notification": "^1.1.0",
-    "@vaadin/vaadin-ordered-layout": "^1.1.0",
-    "@vaadin/vaadin-progress-bar": "^1.1.0",
-    "@vaadin/vaadin-radio-button": "^1.1.0",
-    "@vaadin/vaadin-select": "^2.0.0",
-    "@vaadin/vaadin-split-layout": "^4.1.0",
-    "@vaadin/vaadin-tabs": "^2.1.0",
-    "@vaadin/vaadin-text-field": "^2.1.0",
-    "@vaadin/vaadin-upload": "^4.2.0",
-    "@vaadin/elements-demo-resources": "^2.1.0",
-    "@polymer/iron-ajax": "^3.0.0"
-  }
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "93c8e0ec03a178c6d74261261f985bd07f7cc79c"
 }

presets/compact.js

@@ -0,7 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 import '../sizing.js';
 import '../spacing.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
 const $_documentContainer = document.createElement('template');
 
-$_documentContainer.innerHTML = `<custom-style>
+$_documentContainer.innerHTML = `
   <style>
@@ -34,3 +38,3 @@ /* Browsers that fall back to the polyfill require plain html selector */
 
-    /* Need to use a separete and stronger selector for other browsers where
+    /* Need to use a separate and stronger selector for other browsers where
     the imports added later would otherwise override the property values */
@@ -62,4 +66,4 @@ html:not(div) {
   </style>
-</custom-style>`;
+`;
 
 document.head.appendChild($_documentContainer.content);

sizing.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const sizing: CSSResult;

sizing.js

@@ -0,24 +1,30 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './version.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
-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;
+  :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);
-}
+    /* 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>`;
+$tpl.innerHTML = `<style>${sizing.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
 export { sizing };

spacing.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const spacing: CSSResult;

spacing.js

@@ -0,32 +1,38 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './version.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
-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;
+  :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);
+    /* 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);
-}
+    /* 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>`;
+$tpl.innerHTML = `<style>${spacing.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
 export { spacing };

style.d.ts

@@ -1,3 +0,3 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
 export const style: CSSResult;

style.js

@@ -0,27 +1,33 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './version.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
-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 */
+  :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);
+    /* 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;
-}
+    /* 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>`;
+$tpl.innerHTML = `<style>${style.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
 export { style };

typography.d.ts

@@ -1,2 +0,2 @@
-import {CSSResult} from 'lit-element';
+import { CSSResult } from 'lit-element';
 
@@ -3,0 +3,0 @@ export const font: CSSResult;

typography.js

@@ -0,31 +1,35 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import './version.js';
-import '@polymer/polymer/lib/elements/custom-style.js';
-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";
+  :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: .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: 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;
-}
+    /* 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>`;
+$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
-export { font };
-
 const typography = css`
@@ -52,3 +56,3 @@ html {
   small,
-  [theme~="font-size-s"] {
+  [theme~='font-size-s'] {
     font-size: var(--lumo-font-size-s);
@@ -58,3 +62,3 @@ line-height: var(--lumo-line-height-s);
 
-  [theme~="font-size-xs"] {
+  [theme~='font-size-xs'] {
     font-size: var(--lumo-font-size-xs);
@@ -142,3 +146,3 @@ line-height: var(--lumo-line-height-xs);
 
-  blockquote[dir="rtl"] {
+  blockquote[dir='rtl'] {
     border-left: none;
@@ -148,4 +152,5 @@ border-right: 2px solid var(--lumo-contrast-30pct);
 `;
-registerStyles('', typography, {moduleId: 'lumo-typography'});
 
-export { typography };
+registerStyles('', typography, { moduleId: 'lumo-typography' });
+
+export { font, typography };

version.js

@@ -0,4 +1,9 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
 class Lumo extends HTMLElement {
   static get version() {
-    return '1.7.0-alpha2';
+    return '20.0.0-alpha1';
   }
@@ -5,0 +10,0 @@ }

Fixed alerts

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

69588

increased by0.56%

Dev dependency count

0

decreased by-100%

Lines of code

1121

increased by4.47%

Dependency changes

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

• - Removed@vaadin/vaadin-themable-mixin@1.6.2(transitive)

• Updated@vaadin/vaadin-themable-mixin@^20.0.0-alpha1