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

Comparing version 21.0.0-alpha1 to 21.0.0-alpha10

all-imports.d.ts

@@ -11,1 +11,2 @@ export * from './mixins/field-button.js';
 export * from './typography.js';
+export * from './utility.js';

all-imports.js

@@ -30,1 +30,3 @@ /**
 export * from './typography.js';
+import './utility.js';
+export * from './utility.js';

badge.js

@@ -89,2 +89,3 @@ /**
 
+  [theme~='badge'] vaadin-icon,
   [theme~='badge'] iron-icon {
@@ -96,2 +97,3 @@ margin: -0.25em 0;
 
+  [theme~='badge'] vaadin-icon:first-child,
   [theme~='badge'] iron-icon:first-child {
@@ -101,2 +103,3 @@ margin-left: -0.375em;
 
+  [theme~='badge'] vaadin-icon:last-child,
   [theme~='badge'] iron-icon:last-child {
@@ -106,13 +109,15 @@ margin-right: -0.375em;
 
-  [theme~='badge'][icon] {
+  iron-icon[theme~='badge'][icon],
+  vaadin-icon[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);
+    width: var(--lumo-icon-size-m);
+    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);
+  iron-icon[theme~='badge'][icon][theme~='small'],
+  vaadin-icon[theme~='badge'][icon][theme~='small'] {
+    width: var(--lumo-icon-size-s);
+    height: var(--lumo-icon-size-s);
   }
@@ -156,2 +161,3 @@
 
+  [dir='rtl'][theme~='badge'] vaadin-icon:first-child,
   [dir='rtl'][theme~='badge'] iron-icon:first-child {
@@ -162,2 +168,3 @@ margin-right: -0.375em;
 
+  [dir='rtl'][theme~='badge'] vaadin-icon:last-child,
   [dir='rtl'][theme~='badge'] iron-icon:last-child {
@@ -164,0 +171,0 @@ margin-left: -0.375em;

gulpfile.js

@@ -27,2 +27,37 @@ /* eslint-env node */
 
+function createCopyright() {
+  return `/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+function createIconset(folder, filenames, idPrefix = '') {
+  let output = `<svg xmlns="http://www.w3.org/2000/svg">\n<defs>\n`;
+  filenames.forEach(function (filename) {
+    // Skip non-svg files
+    if (filename.indexOf('.svg') === -1) {
+      return;
+    }
+
+    const content = fs.readFileSync(folder + filename, 'utf-8');
+    const path = content.match(/<path( fill-rule="evenodd" clip-rule="evenodd")* d="([^"]*)"/);
+    if (path) {
+      const newPath = new svgpath(path[2])
+        .scale(1000 / 24, 1000 / 24)
+        .round(0)
+        .toString();
+      const name = filename.replace('.svg', '').replace(/\s/g, '-').toLowerCase();
+      const attrs = path[1] !== undefined ? path[1] : '';
+      output += `<g id="${idPrefix}${name}"><path d="${newPath}"${attrs}></path></g>\n`;
+    } else {
+      throw new Error(`Unexpected SVG content: ${filename}`);
+    }
+  });
+
+  output += `</defs>\n</svg>`;
+  return output;
+}
+
 gulp.task('icons', async function () {
@@ -66,7 +101,5 @@ const folder = 'icons/svg/';
 
-        let output = `/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+        filenames.sort(sortIconFilesNormalized);
+
+        const ironIcons = `${createCopyright()}
 import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
@@ -78,38 +111,22 @@ import './version.js';
 $_documentContainer.innerHTML = \`<iron-iconset-svg size="1000" name="lumo">
-<svg xmlns="http://www.w3.org/2000/svg">
-<defs>
-`;
+${createIconset(folder, filenames)}
+</iron-iconset-svg>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
 
-        filenames.sort(sortIconFilesNormalized);
-        filenames.forEach(function (filename) {
-          // Skip non-svg files
-          if (filename.indexOf('.svg') === -1) {
-            return;
+        fs.writeFile('iconset.js', ironIcons, function (err) {
+          if (err) {
+            return console.error(err);
           }
-
-          const content = fs.readFileSync(folder + filename, 'utf-8');
-          const path = content.match(/<path d="([^"]*)"/);
-          if (path) {
-            // var xScale = Math.min(1, fontHeight / glyphWidth);
-            // var yScale = -1 * Math.min(1, fontHeight / glyphWidth);
-            // var xTranslate = Math.max(0, (fontHeight - glyphWidth) / 2);
-            // var yTranslate = -1 * fontAscent * (2 - Math.min(1, fontHeight / glyphWidth));
-            const newPath = new svgpath(path[1])
-              // .translate(xTranslate, yTranslate)
-              .scale(1000 / 24, 1000 / 24)
-              .round(0)
-              .toString();
-            const name = filename.replace('.svg', '').replace(/\s/g, '-').toLowerCase();
-            output += `<g id="${name}"><path d="${newPath}"></path></g>\n`;
-          }
         });
 
-        output += `</defs>
-</svg>
-</iron-iconset-svg>\`;
+        const vaadinIcons = `${createCopyright()}
+import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import './version.js';
 
-document.head.appendChild($_documentContainer.content);
-`;
+const $_documentContainer = document.createElement('template');
 
-        fs.writeFile('iconset.js', output, function (err) {
+$_documentContainer.innerHTML = \`<vaadin-iconset name="lumo" size="1000">
+${createIconset(folder, filenames, 'lumo:')}
+</vaadin-iconset>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
+
+        fs.writeFile('vaadin-iconset.js', vaadinIcons, function (err) {
           if (err) {
@@ -153,7 +170,4 @@ return console.error(err);
           // Write the output to font-icons.js
-          let output = `/**
- * @license
- * Copyright (c) 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+          let output = createCopyright();
+          output += `
 import './version.js';
@@ -191,2 +205,9 @@
 
+          const list = glyphs.map((g) => g.name);
+          fs.writeFile('test/glyphs.json', JSON.stringify(list, null, 2), function (err) {
+            if (err) {
+              return console.error(err);
+            }
+          });
+
           // Cleanup
@@ -193,0 +214,0 @@ fs.unlink('lumo-icons.woff', function (err) {

iconset.js

@@ -14,2 +14,5 @@ /**
 <defs>
+<g id="align-center"><path d="M167 217c0-18 17-33 38-34H795c21 0 38 15 38 34 0 18-17 33-38 33H205C184 250 167 235 167 217z m83 191c0-18 13-33 29-33H721c16 0 29 15 29 33 0 18-13 33-29 34H279C263 442 250 427 250 408zM250 792c0-18 13-33 29-34H721c16 0 29 15 29 34s-13 33-29 33H279C263 825 250 810 250 792z m-83-192c0-18 17-33 38-33H795c21 0 38 15 38 33s-17 33-38 33H205C184 633 167 618 167 600z" fill-rule="evenodd" clip-rule="evenodd"></path></g>
+<g id="align-left"><path d="M167 217c0-18 17-33 38-34H795c21 0 38 15 38 34 0 18-17 33-38 33H205C184 250 167 235 167 217z m0 191c0-18 13-33 28-33H638c16 0 29 15 29 33 0 18-13 33-29 34H195C179 442 167 427 167 408zM167 792c0-18 13-33 28-34H638c16 0 29 15 29 34s-13 33-29 33H195C179 825 167 810 167 792z m0-192c0-18 17-33 38-33H795c21 0 38 15 38 33s-17 33-38 33H205C184 633 167 618 167 600z" fill-rule="evenodd" clip-rule="evenodd"></path></g>
+<g id="align-right"><path d="M167 217c0-18 17-33 38-34H795c21 0 38 15 38 34 0 18-17 33-38 33H205C184 250 167 235 167 217z m166 191c0-18 13-33 29-33H805c16 0 29 15 28 33 0 18-13 33-28 34H362C346 442 333 427 333 408zM333 792c0-18 13-33 29-34H805c16 0 29 15 28 34s-13 33-28 33H362C346 825 333 810 333 792z m-166-192c0-18 17-33 38-33H795c21 0 38 15 38 33s-17 33-38 33H205C184 633 167 618 167 600z" fill-rule="evenodd" clip-rule="evenodd"></path></g>
 <g id="angle-down"><path d="M283 391c-18-16-46-15-63 4-16 18-15 46 3 63l244 224c17 15 43 15 60 0l250-229c18-16 20-45 3-63-16-18-45-20-63-4l-220 203-214-198z"></path></g>
@@ -16,0 +19,0 @@ <g id="angle-left"><path d="M601 710c16 18 15 46-3 63-18 16-46 15-63-4l-224-244c-15-17-15-43 0-59l229-250c16-18 45-20 63-4 18 16 20 45 3 63l-203 220 198 215z"></path></g>

package.json

 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "21.0.0-alpha1",
+  "version": "21.0.0-alpha10",
   "description": "Lumo is a design system foundation for modern web applications, used by Vaadin components",
@@ -27,3 +27,4 @@ "main": "all-imports.js",
     "mixins/*.d.ts",
-    "presets/*.js"
+    "presets/*.js",
+    "utilities/*.js"
   ],
@@ -37,3 +38,4 @@ "scripts": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha1"
+    "@vaadin/vaadin-icon": "^21.0.0-alpha10",
+    "@vaadin/vaadin-themable-mixin": "^21.0.0-alpha10"
   },
@@ -50,3 +52,3 @@ "devDependencies": {
   },
-  "gitHead": "8542c7dadc4c86e454a48613f0f2d027dcb5aa86"
+  "gitHead": "9e75b3416edc041e35720c29a842423a1da66e60"
 }

version.js

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

No alert changes

Improved metrics

Total package byte prevSize

129347

increased by71.69%

Number of package files

43

increased by38.71%

Lines of code

3093

increased by138.47%

Published versions last week

4

increased by300%

Worsened metrics

Dependency count

5

increased by25%

Published versions last months

7

decreased by-12.5%

Published versions last two months

21

decreased by-4.55%

Published versions last year

126

decreased by-0.79%

Dependency changes

• + Added@vaadin/vaadin-icon@^21.0.0-alpha10

• + Added@vaadin/vaadin-development-mode-detector@2.0.7(transitive)

• + Added@vaadin/vaadin-element-mixin@21.0.5(transitive)

• + Added@vaadin/vaadin-icon@21.0.5(transitive)

• + Added@vaadin/vaadin-lumo-styles@21.0.5(transitive)

• + Added@vaadin/vaadin-usage-statistics@2.1.3(transitive)

• Updated@vaadin/vaadin-themable-mixin@^21.0.0-alpha10