@lukso/web-components 1.0.1 → 1.0.4

package/src/shared/styles/typography.scss

@@ -0,0 +1,122 @@
+/**
+  * @file Typography
+  *
+  * This file contains all typography classes used in designs.
+  * They should be used instead of individual font attributes.
+  *
+  * You can use them same as the normal Tailwind classes, e.g.: class="heading-1"
+  */
+
+@layer base {
+  .heading-h1 {
+    @apply text-26 not-italic font-600 leading-31 font-inter;
+  }
+
+  .heading-h2 {
+    @apply text-21 not-italic font-600 leading-26 font-inter;
+  }
+
+  .heading-h3 {
+    @apply text-17 not-italic font-600 leading-22 font-inter;
+  }
+
+  .heading-h4 {
+    @apply text-12 not-italic font-700 leading-15 font-inter uppercase tracking-[.02em];
+  }
+
+  .heading-h5 {
+    @apply text-14 not-italic font-700 leading-17 font-inter;
+  }
+
+  .heading-h1-apax {
+    @apply text-24 not-italic font-500 leading-28 font-apax;
+  }
+
+  .heading-h4-apax {
+    @apply text-14 not-italic font-500 leading-20 font-apax;
+  }
+
+  .heading-h5-apax {
+    @apply text-8 not-italic font-500 leading-28 font-apax;
+  }
+
+  // Paragraph
+
+  .paragraph-16-regular {
+    @apply text-16 not-italic font-400 leading-24 font-inter;
+  }
+
+  .paragraph-16-semi-bold {
+    @apply text-16 not-italic font-600 leading-24 font-inter;
+  }
+
+  .paragraph-14-regular {
+    @apply text-14 not-italic font-400 leading-22 font-inter;
+  }
+
+  .paragraph-14-medium {
+    @apply text-14 not-italic font-500 leading-22 font-inter;
+  }
+
+  .paragraph-14-semi-bold {
+    @apply text-14 not-italic font-600 leading-22 font-inter;
+  }
+
+  .paragraph-12-regular {
+    @apply text-12 not-italic font-400 leading-20 font-inter;
+  }
+
+  .paragraph-12-medium {
+    @apply text-12 not-italic font-500 leading-20 font-inter;
+  }
+
+  .paragraph-12-semi-bold {
+    @apply text-12 not-italic font-600 leading-20 font-inter;
+  }
+
+  // Currency
+
+  .currency-10-semi-bold {
+    @apply text-10 not-italic font-600 leading-12 font-inter;
+  }
+
+  .currency-10-bold-uppercase {
+    @apply text-10 not-italic font-700 leading-12 font-inter uppercase;
+  }
+
+  .currency-14-semi-bold {
+    @apply text-14 not-italic font-600 leading-17 font-inter;
+  }
+
+  // utility
+
+  .link {
+    @apply text-17 not-italic font-600 leading-22 font-inter;
+  }
+
+  .button-text {
+    @apply text-17 not-italic font-600 leading-17 font-inter;
+  }
+
+  .caption {
+    @apply text-13 not-italic font-400 leading-20 font-inter;
+  }
+
+  // Monospaced
+
+  .monospace-16-regular {
+    @apply text-16 not-italic font-400 leading-22 font-mono;
+  }
+
+  .monospace-16-bold {
+    @apply text-16 not-italic font-700 leading-22 font-mono;
+  }
+
+  .monospace-12-bold {
+    @apply text-12 not-italic font-700 leading-14 font-mono;
+  }
+
+  .monospace-10-bold {
+    @apply text-10 not-italic font-700 leading-14 font-mono;
+  }
+}

package/src/shared/styles/variables.scss

@@ -0,0 +1,5 @@
+/**
+  * @file Variables
+  *
+  * This file contains all CSS variables used in designs.
+  */

package/src/shared/tailwind.element.ts

@@ -0,0 +1,16 @@
+import { LitElement, unsafeCSS } from 'lit'
+
+import style from './styles/component.scss?inline'
+
+const tailwindElement = unsafeCSS(style)
+
+export const TailwindStyledElement = (style: any): typeof LitElement =>
+  class extends LitElement {
+    static styles = style
+      ? [tailwindElement, unsafeCSS(style)]
+      : [tailwindElement]
+  }
+
+export class TailwindElement extends LitElement {
+  static styles = [tailwindElement]
+}

package/src/shared/utils/hslColorMap.ts

@@ -0,0 +1,20 @@
+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
+}

package/src/tailwind.config.ts

@@ -0,0 +1,60 @@
+import { colorPalette } from './shared/styles/color-palette'
+
+export default {
+  content: ['**/*.{ts,html,css,scss}'],
+  theme: {
+    fontFamily: {
+      inter: ['Inter', 'sans-serif'],
+      apax: ['Apax', 'sans-serif'],
+      mono: ['"PT Mono"', 'sans-serif'],
+    },
+    extend: {
+      colors: colorPalette,
+      boxShadow: {
+        'button-hover-primary': '0px 20px 16px -16px rgba(0, 0, 0, 0.4)',
+        'button-hover-secondary': '0px 20px 16px -16px rgba(0, 0, 0, 0.12)',
+        '1xl': '0px 0px 16px rgba(189, 206, 219, 0.4)',
+        '2xl':
+          '0px 36px 80px rgba(189, 206, 219, 0.3), 0px 5.01331px 33.4221px rgba(189, 206, 219, 0.0503198), 0px 2.68036px 17.869px rgba(189, 206, 219, 0.0417275), 0px 1.50259px 10.0172px rgba(189, 206, 219, 0.035), 0px 0.798012px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 0.332071px 2.21381px rgba(189, 206, 219, 0.0196802)',
+        '3xl':
+          '0px 12px 80px rgba(189, 206, 219, 0.3), 0px 73.78px 33.4221px rgba(189, 206, 219, 0.0803), 0px 22.3363px 17.869px rgba(189, 206, 219, 0.0417275), 0px 12.5216px 10.0172px rgba(189, 206, 219, 0.035), 0px 6.6501px 5.32008px rgba(189, 206, 219, 0.0282725), 0px 2.76726px 2.21381px rgba(189, 206, 219, 0.0196802)',
+      },
+      fontSize: {
+        8: '8px',
+        10: '10px',
+        12: '12px',
+        13: '13px',
+        14: '14px',
+        16: '16px',
+        17: '17px',
+        21: '21px',
+        24: '24px',
+        26: '26px',
+      },
+      fontWeight: {
+        100: '100',
+        200: '200',
+        300: '300',
+        400: '400',
+        500: '500',
+        600: '600',
+        700: '700',
+        800: '800',
+        900: '900',
+      },
+      lineHeight: {
+        12: '12px',
+        14: '14px',
+        15: '15px',
+        17: '17px',
+        20: '20px',
+        22: '22px',
+        24: '24px',
+        26: '26px',
+        28: '28px',
+        31: '31px',
+      },
+    },
+  },
+  plugins: [],
+}

package/tools/color-palette.cjs

@@ -0,0 +1,141 @@
+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("utils/hslColorMap", ["require", "exports", "tinycolor2"], function (require, exports, tinycolor2_1) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        exports.hslColorMap = void 0;
+        tinycolor2_1 = __importDefault(tinycolor2_1);
+        /**
+         * 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' }
+         */
+        var hslColorMap = function (h, s, l) {
+            var colors = {};
+            for (var i = 0; i < l.length; i++) {
+                var lightness = l[i];
+                colors[lightness] = (0, tinycolor2_1.default)({ h: h, s: s, l: lightness }).toHexString();
+            }
+            return colors;
+        };
+        exports.hslColorMap = hslColorMap;
+    });
+    define("styles/color-palette", ["require", "exports", "utils/hslColorMap"], function (require, exports, hslColorMap_1) {
+        "use strict";
+        Object.defineProperty(exports, "__esModule", { value: true });
+        exports.neutral3 = exports.neutral2 = exports.neutral1 = exports.colorPalette = void 0;
+        /**
+         * Color palette based on the structure thats compatible with Tailwind config
+         */
+        exports.colorPalette = {
+            neutral: (0, hslColorMap_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]),
+            'gradient-1': {
+                start: '#D39B9D',
+                end: '#9071D1',
+            },
+            'gradient-2': {
+                start: '#F8DAD3',
+                end: '#CC99AE',
+            },
+        };
+        /**
+         * 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
+         */
+        var splitColor = function (colors, from, to) {
+            return Object.keys(colors)
+                .slice(from, to)
+                .reduce(function (result, key) {
+                result[key] = colors[key];
+                return result;
+            }, {});
+        };
+        /**
+         * Color map subsets that can be used in the Storybook preview
+         */
+        exports.neutral1 = splitColor(exports.colorPalette.neutral, 0, 8);
+        exports.neutral2 = splitColor(exports.colorPalette.neutral, 8, 16);
+        exports.neutral3 = splitColor(exports.colorPalette.neutral, 16, Object.keys(exports.colorPalette.neutral).length);
+    });
+    
+    '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/color-palette.d.ts

@@ -0,0 +1,50 @@
+declare module "utils/hslColorMap" {
+    /**
+     * 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: any, s: any, l: any) => {};
+}
+declare module "styles/color-palette" {
+    type ColorMap = {
+        [key: string]: string;
+    };
+    /**
+     * Color palette based on the structure thats compatible with Tailwind config
+     */
+    export const colorPalette: {
+        neutral: {};
+        honey: {};
+        coral: {};
+        warm: {};
+        'sea-salt': {};
+        cloud: {};
+        ocean: {};
+        sky: {};
+        lukso: {};
+        yellow: {};
+        green: {};
+        blue: {};
+        red: {};
+        purple: {};
+        'gradient-1': {
+            start: string;
+            end: string;
+        };
+        'gradient-2': {
+            start: string;
+            end: string;
+        };
+    };
+    /**
+     * Color map subsets that can be used in the Storybook preview
+     */
+    export const neutral1: ColorMap;
+    export const neutral2: ColorMap;
+    export const neutral3: ColorMap;
+}
+//# sourceMappingURL=color-palette.d.ts.map

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

@@ -0,0 +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;;;ICjBD,KAAK,QAAQ,GAAG;QACd,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;KACtB,CAAA;IAED;;OAEG;IACH,MAAM,CAAC,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;KA8BxB,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"}