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

Comparing version 22.0.0-alpha1 to 22.0.0-alpha10

color.js

@@ -33,5 +33,5 @@ /**
     --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-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
     --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
@@ -62,20 +62,20 @@ --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
     /* 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-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
     --lumo-primary-contrast-color: #fff;
 
     /* Error */
-    --lumo-error-color: hsl(3, 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-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
     --lumo-error-contrast-color: #fff;
 
     /* Success */
-    --lumo-success-color: hsl(145, 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-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
     --lumo-success-contrast-color: #fff;
@@ -101,4 +101,4 @@ }
     --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-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
     --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
@@ -142,19 +142,19 @@ --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
     /* 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-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
     --lumo-primary-contrast-color: #fff;
 
     /* Error */
-    --lumo-error-color: hsl(3, 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%);
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
 
     /* Success */
-    --lumo-success-color: hsl(145, 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%);
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
   }
@@ -205,4 +205,4 @@
 
-registerStyles('', colorLegacy, { moduleId: 'lumo-color-legacy', include: ['lumo-color'] });
+registerStyles('', [color, colorLegacy], { moduleId: 'lumo-color-legacy' });
 
 export { colorBase, color, colorLegacy };

gulpfile.js

@@ -119,3 +119,3 @@ /* eslint-env node */
         const vaadinIcons = `${createCopyright()}
-import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
@@ -122,0 +122,0 @@

icons.js

@@ -9,1 +9,2 @@ /**
 import './iconset.js';
+import './vaadin-iconset.js';

mixins/menu-overlay.d.ts

 import { CSSResult } from 'lit';
 
-export const menuOverlay: CSSResult;
+export const menuOverlay: CSSResult[];
+
+export const menuOverlayCore: CSSResult;

mixins/menu-overlay.js

@@ -9,3 +9,3 @@ /**
 import '../style.js';
-import './overlay.js';
+import { overlay } from './overlay.js';
 
@@ -46,3 +46,3 @@ const menuOverlayCore = css`
 
-const menuOverlay = css`
+const menuOverlayExt = css`
   /* Small viewport (bottom sheet) styles */
@@ -110,4 +110,7 @@ /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
 `;
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core'] });
 
+const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
+
 export { menuOverlayCore, menuOverlay };

mixins/required-field.js

@@ -21,2 +21,3 @@ /**
     line-height: 1;
+    padding-right: 1em;
     padding-bottom: 0.5em;
@@ -35,2 +36,6 @@ overflow: hidden;
 
+  :host([has-label][theme~='small'])::before {
+    margin-top: calc(var(--lumo-font-size-xs) * 1.5);
+  }
+
   :host([has-label]) {
@@ -40,11 +45,7 @@ padding-top: var(--lumo-space-m);
 
-  :host([required]) [part='label'] {
-    padding-right: 1em;
-  }
-
-  [part='label']::after {
+  [part='required-indicator']::after {
     content: var(--lumo-required-field-indicator, '•');
     transition: opacity 0.2s;
     opacity: 0;
-    color: var(--lumo-primary-text-color);
+    color: var(--lumo-required-field-indicator-color, var(--lumo-primary-text-color));
     position: absolute;
@@ -56,8 +57,8 @@ right: 0;
 
-  :host([required]:not([has-value])) [part='label']::after {
+  :host([required]:not([has-value])) [part='required-indicator']::after {
     opacity: 1;
   }
 
-  :host([invalid]) [part='label']::after {
-    color: var(--lumo-error-text-color);
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, var(--lumo-error-text-color));
   }
@@ -75,5 +76,4 @@
 
-  /* Margin that doesn’t reserve space when there’s no error message */
-  [part='error-message']:not(:empty)::before,
-  [part='error-message']:not(:empty)::after {
+  :host([has-error-message]) [part='error-message']::before,
+  :host([has-error-message]) [part='error-message']::after {
     content: '';
@@ -96,3 +96,3 @@ display: block;
 
-  :host([required][dir='rtl']) [part='label'] {
+  :host([dir='rtl']) [part='label'] {
     padding-left: 1em;
@@ -102,3 +102,3 @@ padding-right: 0;
 
-  :host([dir='rtl']) [part='label']::after {
+  :host([dir='rtl']) [part='required-indicator']::after {
     right: auto;
@@ -105,0 +105,0 @@ left: 0;

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "22.0.0-alpha1",
+  "version": "22.0.0-alpha10",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Lumo is a design system foundation for modern web applications, used by Vaadin components",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-lumo-styles"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
+  "bugs": {
+    "url": "https://github.com/vaadin/vaadin-lumo-styles/issues"
+  },
   "main": "all-imports.js",
   "module": "all-imports.js",
-  "repository": "vaadin/vaadin-lumo-styles",
+  "scripts": {
+    "icons": "gulp icons"
+  },
+  "files": [
+    "*.d.ts",
+    "*.js",
+    "mixins/*.d.ts",
+    "mixins/*.js",
+    "presets/*.js",
+    "utilities/*.js"
+  ],
   "keywords": [
@@ -16,19 +40,2 @@ "vaadin",
   ],
-  "author": "Vaadin Ltd",
-  "license": "Apache-2.0",
-  "bugs": {
-    "url": "https://github.com/vaadin/vaadin-lumo-styles/issues"
-  },
-  "homepage": "https://vaadin.com/components",
-  "files": [
-    "*.js",
-    "*.d.ts",
-    "mixins/*.js",
-    "mixins/*.d.ts",
-    "presets/*.js",
-    "utilities/*.js"
-  ],
-  "scripts": {
-    "icons": "gulp icons"
-  },
   "dependencies": {
@@ -38,4 +45,4 @@ "@polymer/iron-icon": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-icon": "^22.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha1"
+    "@vaadin/icon": "22.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha10"
   },
@@ -49,6 +56,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "c9694d6549bff1f7fffb9ece26178e57fc228a51"
+  "gitHead": "6d3055383b9c3c8306ea34c6f2e2087e63c49348"
 }

presets/compact.js

@@ -12,30 +12,3 @@ /**
   <style>
-    /* Browsers that fall back to the polyfill require plain html selector */
-    html {
-      --lumo-size-xl: 3rem;
-      --lumo-size-l: 2.5rem;
-      --lumo-size-m: 2rem;
-      --lumo-size-s: 1.75rem;
-      --lumo-size-xs: 1.5rem;
-      --lumo-font-size: 1rem;
-      --lumo-font-size-xxxl: 1.75rem;
-      --lumo-font-size-xxl: 1.375rem;
-      --lumo-font-size-xl: 1.125rem;
-      --lumo-font-size-l: 1rem;
-      --lumo-font-size-m: 0.875rem;
-      --lumo-font-size-s: 0.8125rem;
-      --lumo-font-size-xs: 0.75rem;
-      --lumo-font-size-xxs: 0.6875rem;
-      --lumo-line-height-m: 1.4;
-      --lumo-line-height-s: 1.2;
-      --lumo-line-height-xs: 1.1;
-      --lumo-space-xl: 1.875rem;
-      --lumo-space-l: 1.25rem;
-      --lumo-space-m: 0.625rem;
-      --lumo-space-s: 0.3125rem;
-      --lumo-space-xs: 0.1875rem;
-    }
-
-    /* Need to use a separate and stronger selector for other browsers where
-    the imports added later would otherwise override the property values */
+    /* Use a stronger selector so that imports added later do not override the property values */
     html:not(div) {
@@ -42,0 +15,0 @@ --lumo-size-xl: 3rem;

README.md

@@ -0,8 +1,6 @@
+# Lumo
+
 [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-lumo-styles)](https://www.npmjs.com/package/@vaadin/vaadin-lumo-styles)
-[![Bower version](https://badgen.net/github/release/vaadin/vaadin-lumo-styles)](https://github.com/vaadin/vaadin-lumo-styles/releases)
-[![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/vaadin/web-components?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
 
-
-# Lumo
-
 > Lumo – ✨ enchantment (Finnish) and 🔆 light (Esperanto)
@@ -14,73 +12,6 @@
 
-The implementation of Lumo is based on CSS custom properties, and [Polymer style modules](https://www.polymer-project.org/2.0/docs/devguide/style-shadow-dom#style-modules). Note, that you don’t need to use Polymer to build your application in order to use Lumo.
+[Documentation ↗](https://vaadin.com/docs/latest/ds/foundation)
 
-
-## Documentation
-
-*🚧 Documentation will eventually be deployed at https://vaadin.com 🚧*
-
-For documentation and instructions how to get started, use the “Documentation” link in the latest [release notes](https://github.com/vaadin/vaadin-lumo-styles/releases).
-
-
-## Part of the Vaadin platform
-
-Lumo is maintained as a part of the [Vaadin platform](https://vaadin.com/).
-
-[Vaadin components](https://vaadin.com/components) is a collection of web components that use the Lumo design language as their default theme. The [Vaadin app starters](https://vaadin.com/start) are also based on Lumo.
-
-
-## Big Thanks
-
-Cross-browser Testing Platform and Open Source <3 Provided by [Sauce Labs](https://saucelabs.com).
-
-
-## Contributing
-
-Reporting [issues and feature request](https://github.com/vaadin/vaadin-lumo-styles/issues/new) is a great way to help! If you have questions, join the [Vaadin components chat](https://gitter.im/vaadin/vaadin-core-elements) – we’re happy to answer Lumo related questions there.
-
-
-## Running demos and tests in a browser
-
-1. Fork the `vaadin-lumo-styles` repository and clone it locally.
-
-1. Make sure you have [npm](https://www.npmjs.com/) and [Bower](https://bower.io) installed.
-
-1. When in the `vaadin-lumo-styles` directory, run `npm install` and then `bower install` to install dependencies.
-
-1. Run `npm start`, browser will automatically open the component API documentation.
-
-1. You can also open demo/documentation by adding **demo** to the URL, for example:
-
-  - http://127.0.0.1:3000/components/vaadin-lumo-styles/demo
-
-
-## Adding or updating icons
-
-1. Open `icons/Lumo Icons.sketch` using [Sketch](https://sketchapp.com)
-
-1. Follow the instructions in the Sketch document
-
-1. Run `npm install` to install dependencies
-
-1. Run `gulp icons` to generate new versions of `iconset.html` and `font-icons.html`
-
-
-## Following the coding style
-
-We are using [ESLint](http://eslint.org/) for linting JavaScript code. You can check if your code is following our standards by running `gulp lint`, which will automatically lint all `.js` files as well as JavaScript snippets inside `.html` files. CSS inside `.html` files is also linted at the same time.
-
-
-## Creating a pull request
-
-  - Make sure your code is compliant with our code linters: `gulp lint`
-  - [Submit a pull request](https://www.digitalocean.com/community/tutorials/how-to-create-a-pull-request-on-github) with detailed title and description
-  - Wait for response from one of Vaadin components team members
-
-
-## Updating the version number
-Use `npm version <new version>` to update the version number in `package.json` and in other relevant places such as `version.html`, when preparing to release a new version.
-
-
 ## License
 
 Apache License 2.0

typography.js

@@ -32,12 +32,3 @@ /**
 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 */
+  html,
   :host {
@@ -148,30 +139,6 @@ font-family: var(--lumo-font-family);
 
-const inputs = css`
-  /* Slotted input styles */
-  input[slot='input']::placeholder,
-  textarea[slot='textarea']::placeholder {
-    color: inherit;
-    transition: opacity 0.175s 0.1s;
-    opacity: 0.5;
-  }
-
-  [readonly] > input[slot='input']::placeholder,
-  [readonly] > textarea[slot='textarea']::placeholder,
-  [disabled] > input[slot='input']::placeholder,
-  [disabled] > textarea[slot='textarea']::placeholder {
-    opacity: 0;
-  }
-
-  /* Hide the native arrow icons */
-  input[slot='input']::-webkit-outer-spin-button,
-  input[slot='input']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-
 const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}${inputs.toString()}</style>`;
+$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
-export { font, inputs, typography };
+export { font, typography };

vaadin-iconset.js

@@ -6,3 +6,3 @@ /**
  */
-import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
@@ -9,0 +9,0 @@

version.js

@@ -8,3 +8,3 @@ /**
   static get version() {
-    return '22.0.0-alpha1';
+    return '22.0.0-alpha10';
   }
@@ -11,0 +11,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

131359

increased by1.02%

Number of package files

47

increased by9.3%

Lines of code

3255

increased by4.46%

Number of low supply chain risk alerts

1

decreased by-50%

Worsened metrics

Number of lines in readme file

17

decreased by-80.23%

Dependency changes

• + Added@vaadin/icon@22.0.0-alpha10

• + Added@vaadin/component-base@22.0.0-alpha10(transitive)

• + Added@vaadin/icon@22.0.0-alpha10(transitive)

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

• - Removed@vaadin/vaadin-icon@^22.0.0-alpha1

• - Removed@open-wc/dedupe-mixin@1.4.0(transitive)

• - Removed@vaadin/component-base@22.1.0(transitive)

• - Removed@vaadin/icon@22.1.0(transitive)

• - Removed@vaadin/vaadin-icon@22.1.0(transitive)

• - Removed@vaadin/vaadin-lumo-styles@22.1.0(transitive)

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

• Updated@vaadin/vaadin-themable-mixin@22.0.0-alpha10