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

Comparing version 1.3.3 to 1.4.0

badge.js

@@ -14,6 +14,6 @@ import './style.js';
         box-sizing: border-box;
-        padding: 0.4em calc(0.5em + var(--lumo-border-radius) / 4);
+        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);
+        border-radius: var(--lumo-border-radius-s);
         font-family: var(--lumo-font-family);
@@ -20,0 +20,0 @@ font-size: var(--lumo-font-size-s);

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');
@@ -182,3 +183,3 @@
         background-color: var(--lumo-contrast-10pct);
-        border-radius: var(--lumo-border-radius);
+        border-radius: var(--lumo-border-radius-m);
       }
@@ -185,0 +186,0 @@ </style>

mixins/field-button.js

 import '../color.js';
 import '../font-icons.js';
 import '../sizing.js';
+import '../style.js';
 const $_documentContainer = document.createElement('template');
@@ -18,3 +19,3 @@
         transition: 0.2s color;
-        cursor: default;
+        cursor: var(--lumo-clickable-cursor);
       }
@@ -33,2 +34,3 @@
         font-family: "lumo-icons";
+        display: block;
       }
@@ -35,0 +37,0 @@ </style>

mixins/menu-overlay.js

@@ -89,3 +89,3 @@ import '../spacing.js';
         :host([closing]) [part="overlay"] {
-          animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.550, .055, .675, .19) both;
+          animation: 0.14s 0.14s lumo-mobile-menu-overlay-exit cubic-bezier(.55, .055, .675, .19) both;
         }
@@ -92,0 +92,0 @@ }

mixins/overlay.js

@@ -16,2 +16,3 @@ import '../color.js';
         /* 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;
@@ -23,3 +24,3 @@ }
         background-image: linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
-        border-radius: var(--lumo-border-radius);
+        border-radius: var(--lumo-border-radius-m);
         box-shadow: 0 0 0 1px var(--lumo-shade-5pct), var(--lumo-box-shadow-m);
@@ -65,8 +66,4 @@ color: var(--lumo-body-text-color);
       @keyframes lumo-overlay-dummy-animation {
-        0% {
-          opacity: 1;
-        }
-        100% {
-          opacity: 1;
-        }
+        0% { opacity: 1; }
+        100% { opacity: 1; }
       }
@@ -73,0 +70,0 @@ </style>

mixins/required-field.js

@@ -15,3 +15,3 @@ import '../color.js';
         font-size: var(--lumo-font-size-s);
-        margin-left: calc(var(--lumo-border-radius) / 4);
+        margin-left: calc(var(--lumo-border-radius-m) / 4);
         transition: color 0.2s;
@@ -60,3 +60,3 @@ line-height: 1;
       [part="error-message"] {
-        margin-left: calc(var(--lumo-border-radius) / 4);
+        margin-left: calc(var(--lumo-border-radius-m) / 4);
         font-size: var(--lumo-font-size-xs);
@@ -63,0 +63,0 @@ line-height: var(--lumo-line-height-xs);

package.json

@@ -14,3 +14,3 @@ {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "main": "lumo.js",
@@ -17,0 +17,0 @@ "author": "Vaadin Ltd",

README.md

@@ -41,15 +41,15 @@ [![npm version](https://badgen.net/npm/v/@vaadin/vaadin-lumo-styles)](https://www.npmjs.com/package/@vaadin/vaadin-lumo-styles)
 
-## Running demos and tests in browser
+## 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/) installed.
+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 `polymer serve --open`, browser will automatically open the component API documentation.
+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:8080/components/vaadin-lumo-styles/demo
+  - http://127.0.0.1:3000/components/vaadin-lumo-styles/demo
 
@@ -56,0 +56,0 @@

style.js

@@ -8,9 +8,17 @@ import './version.js';
     html {
-      --lumo-border-radius: 0.25em;
+      /* Border radius */
+      --lumo-border-radius-s: 0.25em; /* Checkbox, badge, date-picker year indicator, etc */
+      --lumo-border-radius-m: 0.25em; /* Button, text field, menu overlay, etc */
+      --lumo-border-radius-l: 0.5em; /* Dialog, notification, etc */
+      --lumo-border-radius: var(--lumo-border-radius-m); /* Backwards compatibility */
 
-      /* Shadows */
-      --lumo-box-shadow-s: 0 1px 2px 0 var(--lumo-shade-20pct), 0 2px 8px -2px 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;
     }
@@ -17,0 +25,0 @@ </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');
@@ -124,3 +125,3 @@
         padding: 0;
-        margin: var(--lumo-space-s) calc(var(--lumo-border-radius) / 2);
+        margin: var(--lumo-space-s) calc(var(--lumo-border-radius-m) / 2);
         background-color: var(--lumo-contrast-10pct);
@@ -127,0 +128,0 @@ }

version.js

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

No alert changes

Improved metrics

Total package byte prevSize

66504

increased by1.04%

Lines of code

942

increased by0.86%

No dependency changes