@vaadin/vaadin-lumo-styles 23.2.0-alpha3 → 23.2.0-alpha4

package/font-icons.js

@@ -5,9 +5,9 @@
  */
 import './version.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     @font-face {
       font-family: 'lumo-icons';
@@ -63,4 +63,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/iconset.js

@@ -10,9 +10,9 @@ console.warn(
   `WARNING: Since Vaadin 23.1, using <iron-icon> is deprecated. Please use <vaadin-icon> and '@vaadin/vaadin-lumo-styles/vaadin-iconset.js' instead.`,
 );
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
+template.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
 <svg xmlns="http://www.w3.org/2000/svg">
 <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>
@@ -61,4 +61,4 @@ $_documentContainer.innerHTML = `<iron-iconset-svg size="1000" name="lumo">
 </svg>
 </iron-iconset-svg>`;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "23.2.0-alpha3",
+  "version": "23.2.0-alpha4",
   "publishConfig": {
     "access": "public"
   },
@@ -20,7 +20,7 @@
   "module": "all-imports.js",
   "type": "module",
   "scripts": {
-    "icons": "gulp icons"
+    "icons": "gulp icons --gulpfile gulpfile.cjs"
   },
   "files": [
     "*.d.ts",
@@ -42,8 +42,8 @@
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/icon": "23.2.0-alpha3",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha3"
+    "@vaadin/icon": "23.2.0-alpha4",
+    "@vaadin/vaadin-themable-mixin": "23.2.0-alpha4"
   },
   "devDependencies": {
     "gulp": "^4.0.2",
@@ -52,5 +52,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^4.1.0"
   },
-  "gitHead": "06e5875be93ca50da2846dafc65a8531010c0576"
+  "gitHead": "cbf5f1d0f38ac9b81c65cf9ef5660182e176e598"
 }

package/presets/compact.js

@@ -5,9 +5,9 @@
  */
 import '../sizing.js';
 import '../spacing.js';
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `
+template.innerHTML = `
   <style>
     /* Use a stronger selector so that imports added later do not override the property values */
     html:not(div) {
@@ -37,4 +37,4 @@ $_documentContainer.innerHTML = `
   </style>
 `;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/vaadin-iconset.js

@@ -6,9 +6,9 @@
 import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
 
-const $_documentContainer = document.createElement('template');
+const template = document.createElement('template');
 
-$_documentContainer.innerHTML = `<vaadin-iconset name="lumo" size="1000">
+template.innerHTML = `<vaadin-iconset name="lumo" size="1000">
 <svg xmlns="http://www.w3.org/2000/svg">
 <defs>
 <g id="lumo: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>
@@ -57,4 +57,4 @@ $_documentContainer.innerHTML = `<vaadin-iconset name="lumo" size="1000">
 </svg>
 </vaadin-iconset>`;
 
-document.head.appendChild($_documentContainer.content);
+document.head.appendChild(template.content);

package/version.js

@@ -5,7 +5,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '23.2.0-alpha3';
+    return '23.2.0-alpha4';
   }
 }
 

package/gulpfile.js

@@ -1,216 +0,0 @@
-/* eslint-env node */
-'use strict';
-
-const gulp = require('gulp');
-const sort = require('gulp-sort');
-const iconfont = require('gulp-iconfont');
-const fs = require('fs');
-const svgpath = require('svgpath');
-const svgmin = require('gulp-svgmin');
-
-/**
- * Normalize file sort order across platforms (OS X vs Linux, maybe others).
- *
- * Before: `[..., 'eye-disabled', 'eye', ...]`
- * After:  `[..., 'eye', 'eye-disabled', ...]`
- *
- * Order of appearance impacts assigned Unicode codepoints, and sometimes build diffs.
- *
- * @see https://github.com/nfroidure/svgicons2svgfont/pull/82
- * @see https://github.com/nfroidure/svgicons2svgfont/blob/master/src/filesorter.js
- * @see http://support.ecisolutions.com/doc-ddms/help/reportsmenu/ascii_sort_order_chart.htm
- */
-function sortIconFilesNormalized(file1, file2) {
-  return file1.replace(/-/g, '~').localeCompare(file2.replace(/-/g, '~'), 'en-US');
-}
-
-function createCopyright() {
-  return `/**
- * @license
- * Copyright (c) 2017 - 2022 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((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 () => {
-  const folder = 'icons/svg/';
-  let glyphs;
-
-  // Optimize the source files
-  gulp
-    .src(`${folder}*.svg`)
-    .pipe(
-      svgmin({
-        plugins: [
-          {
-            removeTitle: true,
-          },
-          {
-            removeViewBox: false,
-          },
-          {
-            cleanupNumericValues: {
-              floatPrecision: 6,
-            },
-          },
-          {
-            convertPathData: {
-              floatPrecision: 6,
-            },
-          },
-        ],
-      }),
-    )
-    .pipe(gulp.dest(folder))
-    .on('finish', () => {
-      // Iron-iconset-svg
-      fs.readdir(folder, (err, filenames) => {
-        if (err) {
-          console.error(err);
-          return;
-        }
-
-        filenames.sort(sortIconFilesNormalized);
-
-        const ironIcons = `${createCopyright()}
-import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = \`<iron-iconset-svg size="1000" name="lumo">
-${createIconset(folder, filenames)}
-</iron-iconset-svg>\`;\n\ndocument.head.appendChild($_documentContainer.content);\n`;
-
-        fs.writeFile('iconset.js', ironIcons, (err) => {
-          if (err) {
-            return console.error(err);
-          }
-        });
-
-        const vaadinIcons = `${createCopyright()}
-import '@vaadin/icon/vaadin-iconset.js';
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_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, (err) => {
-          if (err) {
-            return console.error(err);
-          }
-        });
-      });
-
-      // Icon font
-      gulp
-        .src(`${folder}*.svg`)
-        .pipe(
-          sort({
-            comparator(file1, file2) {
-              return sortIconFilesNormalized(file1.relative, file2.relative);
-            },
-          }),
-        )
-        .pipe(
-          iconfont({
-            fontName: 'lumo-icons',
-            formats: ['woff'],
-            fontHeight: 1000,
-            ascent: 850,
-            descent: 150,
-            fixedWidth: true,
-            normalize: true,
-            timestamp: 1, // Truthy!
-          }),
-        )
-        .on('glyphs', (glyphData) => {
-          // Store for later use
-          glyphs = glyphData;
-        })
-        .pipe(gulp.dest('.'))
-        .on('finish', () => {
-          // Generate base64 version of the font
-          const lumoIconsWoff = fs.readFileSync('lumo-icons.woff');
-
-          // Write the output to font-icons.js
-          let output = createCopyright();
-          output += `
-import './version.js';
-
-const $_documentContainer = document.createElement('template');
-
-$_documentContainer.innerHTML = \`
-  <style>
-    @font-face {
-      font-family: 'lumo-icons';
-      src: url(data:application/font-woff;charset=utf-8;base64,${lumoIconsWoff.toString('base64')}) format('woff');
-      font-weight: normal;
-      font-style: normal;
-    }
-
-    html {
-`;
-          glyphs.forEach((g) => {
-            const name = g.name.replace(/\s/g, '-').toLowerCase();
-            const unicode = `\\\\${g.unicode[0].charCodeAt(0).toString(16)}`;
-            output += `      --lumo-icons-${name}: "${unicode}";\n`;
-          });
-          output += `    }
-  </style>
-\`;
-
-document.head.appendChild($_documentContainer.content);
-`;
-          fs.writeFile('font-icons.js', output, (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-
-          const list = glyphs.map((g) => g.name);
-          fs.writeFile('test/glyphs.json', JSON.stringify(list, null, 2), (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-
-          // Cleanup
-          fs.unlink('lumo-icons.woff', (err) => {
-            if (err) {
-              return console.error(err);
-            }
-          });
-        });
-    });
-});