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

Comparing version 22.0.0-alpha6 to 22.0.0-alpha7

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%);
   }
@@ -161,0 +161,0 @@

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 @@

mixins/required-field.js

@@ -43,6 +43,3 @@ /**
 
-  /* TODO: remove old pseudo element when the following components are updated to use new indicator:
-    combo-box, date-picker, time-picker, date-time-picker, select. */
-  [part='label']::after,
-  [part='indicator']::after {
+  [part='required-indicator']::after {
     content: var(--lumo-required-field-indicator, '•');
@@ -58,9 +55,7 @@ transition: opacity 0.2s;
 
-  :host([required]:not([has-value])) [part='label']::after,
-  :host([required]:not([has-value])) [part='indicator']::after {
+  :host([required]:not([has-value])) [part='required-indicator']::after {
     opacity: 1;
   }
 
-  :host([invalid]) [part='label']::after,
-  :host([invalid]) [part='indicator']::after {
+  :host([invalid]) [part='required-indicator']::after {
     color: var(--lumo-error-text-color);
@@ -79,6 +74,4 @@ }
 
-  /* TODO update to check for "has-error-message" when all the field components
-  are updated to use ValidateMixin that only sets that attribute when invalid */
-  [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: '';
@@ -106,4 +99,3 @@ display: block;
 
-  :host([dir='rtl']) [part='label']::after,
-  :host([dir='rtl']) [part='indicator']::after {
+  :host([dir='rtl']) [part='required-indicator']::after {
     right: auto;
@@ -110,0 +102,0 @@ left: 0;

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "22.0.0-alpha6",
+  "version": "22.0.0-alpha7",
+  "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-alpha6",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha6"
+    "@vaadin/icon": "22.0.0-alpha7",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha7"
   },
@@ -49,6 +56,3 @@ "devDependencies": {
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "4b136b1c7da8942960e7255f40c27859125b3a45"
+  "gitHead": "8e89419c6b44a1d225d5859e180d7b35e47ddb52"
 }

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;

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,23 +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;
-  }
-`;
-
 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-alpha6';
+    return '22.0.0-alpha7';
   }
@@ -11,0 +11,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

131267

increased by3.09%

Number of package files

47

increased by9.3%

Lines of code

3255

increased by4.29%

Number of low supply chain risk alerts

1

decreased by-50%

Dependency changes

• + Added@vaadin/icon@22.0.0-alpha7

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

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

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

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

• - 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-alpha7