@lukso/web-components 1.3.1 → 1.5.0

package/src/shared/styles/main.scss

@@ -4,6 +4,7 @@
   * This file contain general styles that should be applied to host page.
   */
 
+@import './colors';
 @import './fonts';
 @import './typography';
 

package/src/shared/utils/__tests__/sliceAddress.spec.ts

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

package/tailwind.config.cjs

@@ -1,5 +1,65 @@
+const plugin = require('tailwindcss/plugin')
+
 const { colorPalette } = require('./tools/color-palette.cjs')
 
+/**
+ * Add animation delay utilities. Example: .animation-delay-1000
+ */
+const animationDelayPlugin = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationDelay')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-delay-${key}`)}`]: { animationDelay: `${value}` },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation iteration utilities. Example: .animation-iteration-infinite
+ */
+const animationIterationPlugin = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationIteration')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-iteration-${key}`)}`]: {
+        animationIterationCount: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation duration utilities. Example: .animation-duration-1000
+ */
+const animationDuration = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationDuration')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-duration-${key}`)}`]: {
+        animationDuration: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
+/**
+ * Add animation fill mode  utilities. Example: .animation-fill-forwards
+ */
+const animationFill = plugin(function ({ addUtilities, theme, e }) {
+  const values = theme('animationFill')
+  var utilities = Object.entries(values).map(([key, value]) => {
+    return {
+      [`.${e(`animation-fill-${key}`)}`]: {
+        animationFillMode: `${value}`,
+      },
+    }
+  })
+  addUtilities(utilities)
+})
+
 module.exports = {
   content: ['**/*.{ts,html,css,scss,mdx}'],
   theme: {
@@ -110,7 +170,81 @@ module.exports = {
       height: {
         78: '78px',
       },
+      animation: {
+        'pulse-resize': 'pulse-resize 1s ease-in-out infinite',
+        'resize-in': 'resize-in 0.5s ease-in-out',
+        'fade-in': 'fade-in 0.5s ease-in-out',
+      },
+      keyframes: {
+        'pulse-resize': {
+          '0%, 100%': { transform: 'scale(1)' },
+          '50%': { transform: 'scale(0.7)' },
+        },
+        'resize-in': {
+          '0%': { transform: 'scale(0.5)' },
+          '100%': { transform: 'scale(1)' },
+        },
+        'fade-in': {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
+      },
+      animationDelay: {
+        none: '0s',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+        5000: '5000ms',
+      },
+      animationIteration: {
+        infinite: 'infinite',
+        1: '1',
+        2: '2',
+        3: '3',
+      },
+      animationDuration: {
+        25: '25ms',
+        50: '50ms',
+        75: '75ms',
+        100: '100ms',
+        150: '150ms',
+        200: '200ms',
+        300: '300ms',
+        400: '400ms',
+        500: '500ms',
+        600: '600ms',
+        700: '700ms',
+        800: '800ms',
+        900: '900ms',
+        1000: '1000ms',
+        1500: '1500ms',
+        2000: '2000ms',
+        3000: '3000ms',
+      },
+      animationFill: {
+        none: 'none',
+        forwards: 'forwards',
+        backwards: 'backwards',
+        both: 'both',
+      },
     },
   },
-  plugins: [],
+  plugins: [
+    animationDelayPlugin,
+    animationIterationPlugin,
+    animationDuration,
+    animationFill,
+  ],
 }

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("utils/hslColorMap", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
+    define("hslColorMap", ["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("styles/color-palette", ["require", "exports", "tinycolor2", "utils/hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
+    define("color-palette", ["require", "exports", "tinycolor2", "hslColorMap"], function (require, exports, tinycolor2_2, hslColorMap_1) {
         "use strict";
         Object.defineProperty(exports, "__esModule", { value: true });
         exports.neutral3 = exports.neutral2 = exports.neutral1 = exports.colorPalette = void 0;

package/tools/color-palette.d.ts

@@ -1,4 +1,4 @@
-declare module "utils/hslColorMap" {
+declare module "hslColorMap" {
     /**
      * Generates a color map for a given hue, saturation and lightness values
      *
@@ -9,7 +9,7 @@ declare module "utils/hslColorMap" {
      */
     export const hslColorMap: (h: any, s: any, l: any) => {};
 }
-declare module "styles/color-palette" {
+declare module "color-palette" {
     type ColorMap = {
         [key: string]: string;
     };

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

@@ -1 +1 @@
-{"version":3,"file":"color-palette.d.ts","sourceRoot":"","sources":["../src/shared/utils/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/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"}