@lukso/web-components 1.5.3 → 1.6.0

package/src/components/lukso-icon/style.scss

@@ -1,3 +1,3 @@
 :host {
-  display: inline-flex;
+  @apply inline-flex;
 }

package/src/components/lukso-input/index.ts

@@ -47,11 +47,11 @@ export class LuksoInput extends TailwindElement {
   private hasHocus = false
 
   private defaultInputStyles = `bg-neutral-100 text-neutral-20 paragraph-16-regular px-4 py-3
-    border border-solid border-neutral-90 h-[48px] placeholder:text-neutral-70
+    border border-solid h-[48px] placeholder:text-neutral-70
     outline-none transition transition-all duration-250 appearance-none`
 
   private defaultUnitStyles = `paragraph-12-regular text-neutral-60 flex px-3.5 items-center relative
-    border border-solid border-neutral-90 h-[48px] transition transition-all duration-250
+    border border-solid h-[48px] transition transition-all duration-250
     rounded-r-xl border-l-0 before:bg-neutral-90 before:absolute before:top-[calc(50%-12px)] before:left-0
     before:w-[1px] before:h-[24px] whitespace-nowrap`
 
@@ -70,6 +70,7 @@ export class LuksoInput extends TailwindElement {
           [this.defaultInputStyles]: true,
           ['border-red-85 text-red-65 focus:border-red-65']: this.error !== '',
           ['border-neutral-35']: this.hasHocus,
+          ['border-neutral-90']: !this.hasHocus,
           ['rounded-l-xl border-r-0']: this.unit !== '',
           ['rounded-xl']: this.unit === '',
           ['w-full']: this.isFullWidth,

package/src/components/lukso-navbar/index.ts

@@ -43,7 +43,7 @@ export class LuksoNavbar extends TailwindElement {
           class="flex items-center px-10 h-full cursor-pointer"
           @click=${this._onBrandClick}
         >
-          <img src="assets/images/lukso-logo.svg" class="mr-4" />
+          <img src="/assets/images/lukso-logo.svg" class="mr-4" />
           <div
             class="text-purple-51 heading-h4-apax whitespace-pre-line flex leading-none"
           >

package/src/components/lukso-profile/index.ts

@@ -53,7 +53,7 @@ export class LuksoProfile extends TailwindElement {
     return this.sizes[this.size].identiconSize
   }
 
-  private defaultProfileUrl = 'assets/images/profile-default.png'
+  private defaultProfileUrl = '/assets/images/profile-default.png'
 
   private identicon() {
     return this.hasIdenticon && this.profileAddress && this.identiconSize()

package/src/components/lukso-username/index.ts

@@ -2,7 +2,7 @@ import { html } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { styleMap } from 'lit-html/directives/style-map.js'
 
-import { sliceAddress } from '@/shared/utils/sliceAddress'
+import { sliceAddress } from '@/shared/utils/slice-address'
 import { TailwindElement } from '@/shared/tailwind-element'
 import { customClassMap } from '@/shared/directives'
 

package/src/shared/styles/typography.scss

@@ -28,15 +28,35 @@
     @apply text-14 not-italic font-700 leading-17 font-inter;
   }
 
-  .heading-h1-apax {
+  .heading-h1-medium-apax {
+    @apply text-44 not-italic font-500 leading-40 font-apax;
+  }
+
+  .heading-h1-regular-apax {
+    @apply text-44 not-italic font-400 leading-40 font-apax;
+  }
+
+  .heading-h2-medium-apax {
     @apply text-24 not-italic font-500 leading-28 font-apax;
   }
 
-  .heading-h4-apax {
+  .heading-h3-medium-apax {
+    @apply text-16 not-italic font-500 leading-19 font-apax;
+  }
+
+  .heading-h4-medium-apax {
+    @apply text-14 not-italic font-500 leading-20 font-apax;
+  }
+
+  .heading-h4-medium-uppercase-apax {
     @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
   }
 
-  .heading-h5-apax {
+  .heading-h5-medium-apax {
+    @apply text-8 not-italic font-500 leading-10 font-apax;
+  }
+
+  .heading-h5-medium-uppercase-apax {
     @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
   }
 

package/src/shared/utils/__tests__/{sliceAddress.spec.ts → slice-address.spec.ts}

@@ -1,4 +1,4 @@
-import { sliceAddress } from '../sliceAddress'
+import { sliceAddress } from '../slice-address'
 
 test('sliceAddress', () => {
   expect(sliceAddress()).toEqual('')

package/{dist/sass → src/shared/utils}/color-palette.ts

@@ -1,6 +1,6 @@
 import tinycolor from 'tinycolor2'
 
-import { hslColorMap } from './hslColorMap'
+import { hslColorMap } from './hsl-color-map'
 
 type ColorMap = {
   [key: string]: string

package/src/shared/utils/copy-assets.ts

@@ -0,0 +1,80 @@
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * List of allowed file extensions
+ */
+const fileExtensionWhitelist = [
+  '.woff2',
+  '.svg',
+  '.img',
+  '.jpg',
+  '.jpeg',
+  '.png',
+]
+
+/**
+ * Copy file from source to destination
+ *
+ * @param source - Source path
+ * @param target - Destination path
+ * @returns
+ */
+function copyFileSync(source, target) {
+  let targetFile = target
+
+  // If target is a directory, a new file with the same name will be created
+  if (fs.existsSync(target)) {
+    if (fs.lstatSync(target).isDirectory()) {
+      targetFile = path.join(target, path.basename(source))
+    }
+  }
+
+  if (!fileExtensionWhitelist.includes(path.extname(source))) {
+    return
+  }
+
+  fs.writeFileSync(targetFile, fs.readFileSync(source))
+}
+
+/**
+ * Recursively copy directory from source to destination
+ *
+ * @param source - source directory
+ * @param target - destination directory
+ */
+function copyFolderRecursiveSync(source, target) {
+  let files = []
+
+  // Check if folder needs to be created or integrated
+  const targetFolder = path.join(target, path.basename(source))
+  if (!fs.existsSync(targetFolder)) {
+    fs.mkdirSync(targetFolder)
+  }
+
+  // Copy
+  if (fs.lstatSync(source).isDirectory()) {
+    files = fs.readdirSync(source)
+    files.forEach(function (file) {
+      const curSource = path.join(source, file)
+      if (fs.lstatSync(curSource).isDirectory()) {
+        copyFolderRecursiveSync(curSource, targetFolder)
+      } else {
+        copyFileSync(curSource, targetFolder)
+      }
+    })
+  }
+}
+
+/**
+ * Copy asset directory from source to destination
+ *
+ * @param assetDir - destination directory
+ * @param assets - source directory
+ */
+export const copyAssets = (assetDir: string, assets: any) => {
+  if (!fs.existsSync(assetDir)) {
+    fs.mkdirSync(assetDir, { recursive: true })
+  }
+  copyFolderRecursiveSync(assets, assetDir)
+}

package/tailwind.config.cjs

@@ -135,6 +135,7 @@ module.exports = {
         21: '21px',
         24: '24px',
         26: '26px',
+        44: '44px',
       },
       fontWeight: {
         100: '100',
@@ -153,12 +154,14 @@ module.exports = {
         14: '14px',
         15: '15px',
         17: '17px',
+        19: '19px',
         20: '20px',
         22: '22px',
         24: '24px',
         26: '26px',
         28: '28px',
         31: '31px',
+        40: '40px',
       },
       transitionDuration: {
         25: '25ms',

package/tools/color-palette.cjs

@@ -12,7 +12,7 @@ module.exports = (function () {
     var __importDefault = (this && this.__importDefault) || function (mod) {
         return (mod && mod.__esModule) ? mod : { "default": mod };
     };
-    define("hslColorMap", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
+    define("hsl-color-map", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.hslColorMap = void 0;
@@ -35,7 +35,7 @@ module.exports = (function () {
         };
         exports.hslColorMap = hslColorMap;
     });
-    define("color-palette", ["require", "exports", "tinycolor2", "hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
+    define("color-palette", ["require", "exports", "tinycolor2", "hsl-color-map"], function (require, exports, tinycolor2_2, hsl_color_map_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.neutral3 = exports.neutral2 = exports.neutral1 = exports.colorPalette = void 0;
@@ -44,24 +44,24 @@ module.exports = (function () {
          * Color palette based on the structure thats compatible with Tailwind config
          */
         exports.colorPalette = {
-            neutral: (0, hslColorMap_1.hslColorMap)(206, 30, [
+            neutral: (0, hsl_color_map_1.hslColorMap)(206, 30, [
                 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
                 97, 98, 100,
             ]),
-            honey: (0, hslColorMap_1.hslColorMap)(42, 93, [72, 75, 82, 85, 92]),
-            coral: (0, hslColorMap_1.hslColorMap)(14, 87, [65, 74, 75, 84, 85, 94]),
-            warm: (0, hslColorMap_1.hslColorMap)(25, 100, [77, 87, 97]),
-            'sea-salt': (0, hslColorMap_1.hslColorMap)(180, 17, [57, 67, 88]),
-            cloud: (0, hslColorMap_1.hslColorMap)(200, 38, [43, 75, 88]),
-            ocean: (0, hslColorMap_1.hslColorMap)(209, 38, [38, 75, 88]),
-            sky: (0, hslColorMap_1.hslColorMap)(209, 64, [64, 75, 85]),
-            lukso: (0, hslColorMap_1.hslColorMap)(335, 33, [70, 80, 90]),
-            yellow: (0, hslColorMap_1.hslColorMap)(36, 100, [55, 65, 75, 85]),
-            green: (0, hslColorMap_1.hslColorMap)(135, 57, [45, 54, 75, 85]),
-            blue: (0, hslColorMap_1.hslColorMap)(216, 96, [50, 60, 75, 85]),
-            red: (0, hslColorMap_1.hslColorMap)(0, 75, [55, 65, 75, 85]),
-            purple: (0, hslColorMap_1.hslColorMap)(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
-            pink: (0, hslColorMap_1.hslColorMap)(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
+            honey: (0, hsl_color_map_1.hslColorMap)(42, 93, [72, 75, 82, 85, 92]),
+            coral: (0, hsl_color_map_1.hslColorMap)(14, 87, [65, 74, 75, 84, 85, 94]),
+            warm: (0, hsl_color_map_1.hslColorMap)(25, 100, [77, 87, 97]),
+            'sea-salt': (0, hsl_color_map_1.hslColorMap)(180, 17, [57, 67, 88]),
+            cloud: (0, hsl_color_map_1.hslColorMap)(200, 38, [43, 75, 88]),
+            ocean: (0, hsl_color_map_1.hslColorMap)(209, 38, [38, 75, 88]),
+            sky: (0, hsl_color_map_1.hslColorMap)(209, 64, [64, 75, 85]),
+            lukso: (0, hsl_color_map_1.hslColorMap)(335, 33, [70, 80, 90]),
+            yellow: (0, hsl_color_map_1.hslColorMap)(36, 100, [55, 65, 75, 85]),
+            green: (0, hsl_color_map_1.hslColorMap)(135, 57, [45, 54, 75, 85]),
+            blue: (0, hsl_color_map_1.hslColorMap)(216, 96, [50, 60, 75, 85]),
+            red: (0, hsl_color_map_1.hslColorMap)(0, 75, [55, 65, 75, 85]),
+            purple: (0, hsl_color_map_1.hslColorMap)(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
+            pink: (0, hsl_color_map_1.hslColorMap)(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
             'gradient-1': {
                 start: '#D39B9D',
                 end: '#9071D1',

package/tools/color-palette.d.ts

@@ -1,4 +1,4 @@
-declare module "hslColorMap" {
+declare module "hsl-color-map" {
     /**
      * Generates a color map for a given hue, saturation and lightness values
      *

package/tools/color-palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/styles/hslColorMap.ts","../src/shared/styles/color-palette.ts"],"names":[],"mappings":";IAEA;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICfD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}
+{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/utils/hsl-color-map.ts","../src/shared/utils/color-palette.ts"],"names":[],"mappings":";IAEA;;;;;;;OAOG;IACH,MAAM,CAAC,MAAM,WAAW,gCASvB,CAAA;;;ICfD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmCxB,CAAA;IAoBD;;OAEG;IACH,MAAM,CAAC,MAAM,QAAQ,UAAyC,CAAA;IAC9D,MAAM,CAAC,MAAM,QAAQ,UAA0C,CAAA;IAC/D,MAAM,CAAC,MAAM,QAAQ,UAIpB,CAAA"}

package/tools/copy-assets.cjs

@@ -0,0 +1,139 @@
+module.exports = (function () {
+    var defines = {};
+    var entry = [null];
+    function define(name, dependencies, factory) {
+        defines[name] = { dependencies: dependencies, factory: factory };
+        entry[0] = name;
+    }
+    define("require", ["exports"], function (exports) {
+        Object.defineProperty(exports, "__cjsModule", { value: true });
+        Object.defineProperty(exports, "default", { value: function (name) { return resolve(name); } });
+    });
+    var __importDefault = (this && this.__importDefault) || function (mod) {
+        return (mod && mod.__esModule) ? mod : { "default": mod };
+    };
+    define("copy-assets", ["require", "exports", "fs", "path"], function (require, exports, fs_1, path_1) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        exports.copyAssets = void 0;
+        fs_1 = __importDefault(fs_1);
+        path_1 = __importDefault(path_1);
+        /**
+         * List of allowed file extensions
+         */
+        var fileExtensionWhitelist = [
+            '.woff2',
+            '.svg',
+            '.img',
+            '.jpg',
+            '.jpeg',
+            '.png',
+        ];
+        /**
+         * Copy file from source to destination
+         *
+         * @param source - Source path
+         * @param target - Destination path
+         * @returns
+         */
+        function copyFileSync(source, target) {
+            var targetFile = target;
+            // If target is a directory, a new file with the same name will be created
+            if (fs_1.default.existsSync(target)) {
+                if (fs_1.default.lstatSync(target).isDirectory()) {
+                    targetFile = path_1.default.join(target, path_1.default.basename(source));
+                }
+            }
+            if (!fileExtensionWhitelist.includes(path_1.default.extname(source))) {
+                return;
+            }
+            fs_1.default.writeFileSync(targetFile, fs_1.default.readFileSync(source));
+        }
+        /**
+         * Recursively copy directory from source to destination
+         *
+         * @param source - source directory
+         * @param target - destination directory
+         */
+        function copyFolderRecursiveSync(source, target) {
+            var files = [];
+            // Check if folder needs to be created or integrated
+            var targetFolder = path_1.default.join(target, path_1.default.basename(source));
+            if (!fs_1.default.existsSync(targetFolder)) {
+                fs_1.default.mkdirSync(targetFolder);
+            }
+            // Copy
+            if (fs_1.default.lstatSync(source).isDirectory()) {
+                files = fs_1.default.readdirSync(source);
+                files.forEach(function (file) {
+                    var curSource = path_1.default.join(source, file);
+                    if (fs_1.default.lstatSync(curSource).isDirectory()) {
+                        copyFolderRecursiveSync(curSource, targetFolder);
+                    }
+                    else {
+                        copyFileSync(curSource, targetFolder);
+                    }
+                });
+            }
+        }
+        /**
+         * Copy asset directory from source to destination
+         *
+         * @param assetDir - destination directory
+         * @param assets - source directory
+         */
+        var copyAssets = function (assetDir, assets) {
+            if (!fs_1.default.existsSync(assetDir)) {
+                fs_1.default.mkdirSync(assetDir, { recursive: true });
+            }
+            copyFolderRecursiveSync(assets, assetDir);
+        };
+        exports.copyAssets = copyAssets;
+    });
+    
+    'marker:resolver';
+
+    function get_define(name) {
+        if (defines[name]) {
+            return defines[name];
+        }
+        else if (defines[name + '/index']) {
+            return defines[name + '/index'];
+        }
+        else {
+            var dependencies = ['exports'];
+            var factory = function (exports) {
+                try {
+                    Object.defineProperty(exports, "__cjsModule", { value: true });
+                    Object.defineProperty(exports, "default", { value: require(name) });
+                }
+                catch (_a) {
+                    throw Error(['module "', name, '" not found.'].join(''));
+                }
+            };
+            return { dependencies: dependencies, factory: factory };
+        }
+    }
+    var instances = {};
+    function resolve(name) {
+        if (instances[name]) {
+            return instances[name];
+        }
+        if (name === 'exports') {
+            return {};
+        }
+        var define = get_define(name);
+        if (typeof define.factory !== 'function') {
+            return define.factory;
+        }
+        instances[name] = {};
+        var dependencies = define.dependencies.map(function (name) { return resolve(name); });
+        define.factory.apply(define, dependencies);
+        var exports = dependencies[define.dependencies.indexOf('exports')];
+        instances[name] = (exports['__cjsModule']) ? exports.default : exports;
+        return instances[name];
+    }
+    if (entry[0] !== null) {
+        return resolve(entry[0]);
+    }
+})();

package/tools/copy-assets.d.ts

@@ -0,0 +1,10 @@
+declare module "copy-assets" {
+    /**
+     * Copy asset directory from source to destination
+     *
+     * @param assetDir - destination directory
+     * @param assets - source directory
+     */
+    export const copyAssets: (assetDir: string, assets: any) => void;
+}
+//# sourceMappingURL=copy-assets.d.ts.map

package/tools/copy-assets.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-assets.d.ts","sourceRoot":"","sources":["../src/shared/utils/copy-assets.ts"],"names":[],"mappings":";IAoEA;;;;;OAKG;IACH,MAAM,CAAC,MAAM,UAAU,aAAc,MAAM,UAAU,GAAG,SAKvD,CAAA"}

package/src/shared/styles/color-palette.ts

@@ -1,76 +0,0 @@
-import tinycolor from 'tinycolor2'
-
-import { hslColorMap } from './hslColorMap'
-
-type ColorMap = {
-  [key: string]: string
-}
-
-/**
- * Color palette based on the structure thats compatible with Tailwind config
- */
-export const colorPalette = {
-  neutral: hslColorMap(
-    206,
-    30,
-    [
-      10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95,
-      97, 98, 100,
-    ]
-  ),
-  honey: hslColorMap(42, 93, [72, 75, 82, 85, 92]),
-  coral: hslColorMap(14, 87, [65, 74, 75, 84, 85, 94]),
-  warm: hslColorMap(25, 100, [77, 87, 97]),
-  'sea-salt': hslColorMap(180, 17, [57, 67, 88]),
-  cloud: hslColorMap(200, 38, [43, 75, 88]),
-  ocean: hslColorMap(209, 38, [38, 75, 88]),
-  sky: hslColorMap(209, 64, [64, 75, 85]),
-  lukso: hslColorMap(335, 33, [70, 80, 90]),
-  yellow: hslColorMap(36, 100, [55, 65, 75, 85]),
-  green: hslColorMap(135, 57, [45, 54, 75, 85]),
-  blue: hslColorMap(216, 96, [50, 60, 75, 85]),
-  red: hslColorMap(0, 75, [55, 65, 75, 85]),
-  purple: hslColorMap(230, 24, [94, 82, 63, 58, 51, 41, 31, 15]),
-  pink: hslColorMap(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
-  'gradient-1': {
-    start: '#D39B9D',
-    end: '#9071D1',
-  },
-  'gradient-2': {
-    start: '#F8DAD3',
-    end: '#CC99AE',
-  },
-  'gradient-3': {
-    start: tinycolor({ h: 230, s: 20, l: 28 }).toHexString(),
-    end: tinycolor({ h: 230, s: 24, l: 51 }).toHexString(),
-  },
-}
-
-/**
- * Splits a color map into smaller color maps
- *
- * @param colors - color map to split
- * @param from - index to start from
- * @param to - index to end at
- * @returns a new color map
- */
-const splitColor = (colors: ColorMap, from: number, to: number): ColorMap => {
-  return Object.keys(colors)
-    .slice(from, to)
-    .reduce((result, key) => {
-      result[key] = colors[key]
-
-      return result
-    }, {})
-}
-
-/**
- * Color map subsets that can be used in the Storybook preview
- */
-export const neutral1 = splitColor(colorPalette.neutral, 0, 8)
-export const neutral2 = splitColor(colorPalette.neutral, 8, 16)
-export const neutral3 = splitColor(
-  colorPalette.neutral,
-  16,
-  Object.keys(colorPalette.neutral).length
-)

package/src/shared/styles/hslColorMap.ts

@@ -1,20 +0,0 @@
-import tinycolor from 'tinycolor2'
-
-/**
- * Generates a color map for a given hue, saturation and lightness values
- *
- * @param {*} h - hue
- * @param {*} s - saturation
- * @param {*} l - lightness as an array
- * @returns object containing lightness as key and hex color as value e.g. { 10: '#000000', 20: '#111111' }
- */
-export const hslColorMap = (h, s, l) => {
-  const colors = {}
-
-  for (let i = 0; i < l.length; i++) {
-    const lightness = l[i]
-    colors[lightness] = tinycolor({ h, s, l: lightness }).toHexString()
-  }
-
-  return colors
-}