@lukso/web-components 1.51.6 → 1.52.0

package/dist/shared/tailwind-element/index.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shared_tailwindElement_index = require('../../index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('../../index-f426e548.cjs');
 
 
 

package/dist/shared/tailwind-element/index.js

@@ -1 +1 @@
-export { a as TailwindElement, T as TailwindStyledElement } from '../../index-04d11436.js';
+export { a as TailwindElement, T as TailwindStyledElement } from '../../index-35ca0b42.js';

package/dist/{style-map-671a0511.cjs → style-map-1175c018.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-const shared_tailwindElement_index = require('./index-997f3f0e.cjs');
+const shared_tailwindElement_index = require('./index-f426e548.cjs');
 const directive = require('./directive-8278ab14.cjs');
 
 /**

package/dist/{style-map-5be28c06.js → style-map-17f918a2.js}

@@ -1,4 +1,4 @@
-import { b as T } from './index-04d11436.js';
+import { b as T } from './index-35ca0b42.js';
 import { e, i as i$1, t } from './directive-2bb7789e.js';
 
 /**

package/dist/styles/main.css

@@ -137,7 +137,7 @@
 @font-face {
   font-family: Inter;
   src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");
-  font-weight: bold;
+  font-weight: bolder;
   font-style: normal;
   font-display: swap;
 }

package/dist/{color-palette.cjs → tailwind-config.cjs}

@@ -1190,6 +1190,100 @@ const hslColorMap = (h, s, l) => {
   return colors;
 };
 
+const boxShadows = {
+  "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)",
+  "button-press-primary": "0px 12px 16px -16px rgba(0, 0, 0, 0.4)",
+  "button-press-secondary": "0px 12px 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)",
+  "neutral-drop-shadow": "0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08)",
+  "neutral-drop-shadow-1xl": "0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "neutral-drop-shadow-2xl": "0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "neutral-drop-shadow-3xl": "0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "pink-drop-shadow": "0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08)",
+  "pink-drop-shadow-1xl": "0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "pink-drop-shadow-2xl": "0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "pink-drop-shadow-3xl": "0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "neutral-inner-shadow": "inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08)",
+  "neutral-inner-shadow-top": "inset 0 7px 9px -7px rgb(18 41 74 / 21%)",
+  "neutral-inner-shadow-1xl": "inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15)",
+  "neutral-inner-shadow-2xl": "inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15)",
+  "neutral-inner-shadow-3xl": "inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15)",
+  "neutral-above-shadow": "0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-1xl": "0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-2xl": "0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-3xl": "0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325)",
+  "pink-above-shadow": "0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-1xl": "0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-2xl": "0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-3xl": "0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325)",
+  "wizard-step": "1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16)",
+  "wizard-line": "inset 0px 0px 2px rgba(0, 0, 0, 0.14)"
+};
+const fontSizes = {
+  6: "6px",
+  8: "8px",
+  10: "10px",
+  12: "12px",
+  13: "13px",
+  14: "14px",
+  16: "16px",
+  17: "17px",
+  20: "20px",
+  21: "21px",
+  24: "24px",
+  26: "26px",
+  32: "32px",
+  40: "40px",
+  44: "44px",
+  48: "48px"
+};
+const fontWeights = {
+  100: "100",
+  200: "200",
+  300: "300",
+  400: "400",
+  500: "500",
+  600: "600",
+  700: "700",
+  800: "800",
+  900: "900"
+};
+const lineHeights = {
+  10: "10px",
+  12: "12px",
+  14: "14px",
+  15: "15px",
+  17: "17px",
+  19: "19px",
+  20: "20px",
+  22: "22px",
+  24: "24px",
+  26: "26px",
+  28: "28px",
+  31: "31px",
+  32: "32px",
+  38: "38px",
+  40: "40px",
+  48: "48px",
+  58: "58px"
+};
+const scales = {
+  98: ".98"
+};
+const heights = {
+  78: "78px"
+};
+const borderRadius = {
+  0: "0",
+  4: "4px",
+  8: "8px",
+  12: "12px",
+  16: "16px",
+  24: "24px"
+};
 const colorPalette = {
   neutral: hslColorMap(
     206,
@@ -1259,7 +1353,14 @@ const neutral3 = splitColor(
   Object.keys(colorPalette.neutral).length
 );
 
+exports.borderRadius = borderRadius;
+exports.boxShadows = boxShadows;
 exports.colorPalette = colorPalette;
+exports.fontSizes = fontSizes;
+exports.fontWeights = fontWeights;
+exports.heights = heights;
+exports.lineHeights = lineHeights;
 exports.neutral1 = neutral1;
 exports.neutral2 = neutral2;
 exports.neutral3 = neutral3;
+exports.scales = scales;

package/dist/tailwind-config.d.ts

@@ -0,0 +1,136 @@
+export declare const boxShadows: {
+    'button-hover-primary': string;
+    'button-hover-secondary': string;
+    'button-press-primary': string;
+    'button-press-secondary': string;
+    '1xl': string;
+    '2xl': string;
+    '3xl': string;
+    'neutral-drop-shadow': string;
+    'neutral-drop-shadow-1xl': string;
+    'neutral-drop-shadow-2xl': string;
+    'neutral-drop-shadow-3xl': string;
+    'pink-drop-shadow': string;
+    'pink-drop-shadow-1xl': string;
+    'pink-drop-shadow-2xl': string;
+    'pink-drop-shadow-3xl': string;
+    'neutral-inner-shadow': string;
+    'neutral-inner-shadow-top': string;
+    'neutral-inner-shadow-1xl': string;
+    'neutral-inner-shadow-2xl': string;
+    'neutral-inner-shadow-3xl': string;
+    'neutral-above-shadow': string;
+    'neutral-above-shadow-1xl': string;
+    'neutral-above-shadow-2xl': string;
+    'neutral-above-shadow-3xl': string;
+    'pink-above-shadow': string;
+    'pink-above-shadow-1xl': string;
+    'pink-above-shadow-2xl': string;
+    'pink-above-shadow-3xl': string;
+    'wizard-step': string;
+    'wizard-line': string;
+};
+export declare const fontSizes: {
+    6: string;
+    8: string;
+    10: string;
+    12: string;
+    13: string;
+    14: string;
+    16: string;
+    17: string;
+    20: string;
+    21: string;
+    24: string;
+    26: string;
+    32: string;
+    40: string;
+    44: string;
+    48: string;
+};
+export declare const fontWeights: {
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+};
+export declare const lineHeights: {
+    10: string;
+    12: string;
+    14: string;
+    15: string;
+    17: string;
+    19: string;
+    20: string;
+    22: string;
+    24: string;
+    26: string;
+    28: string;
+    31: string;
+    32: string;
+    38: string;
+    40: string;
+    48: string;
+    58: string;
+};
+export declare const scales: {
+    98: string;
+};
+export declare const heights: {
+    78: string;
+};
+export declare const borderRadius: {
+    0: string;
+    4: string;
+    8: string;
+    12: string;
+    16: string;
+    24: string;
+};
+export type ColorMap = {
+    [key: string]: string;
+};
+/**
+ * Color palette based on the structure thats compatible with Tailwind config
+ */
+export declare const colorPalette: {
+    neutral: {};
+    honey: {};
+    coral: {};
+    warm: {};
+    'sea-salt': {};
+    cloud: {};
+    ocean: {};
+    sky: {};
+    lukso: {};
+    yellow: {};
+    green: {};
+    blue: {};
+    red: {};
+    purple: {};
+    pink: {};
+    'gradient-1': {
+        start: string;
+        end: string;
+    };
+    'gradient-2': {
+        start: string;
+        end: string;
+    };
+    'gradient-3': {
+        start: any;
+        end: any;
+    };
+};
+/**
+ * Color map subsets that can be used in the Storybook preview
+ */
+export declare const neutral1: ColorMap;
+export declare const neutral2: ColorMap;
+export declare const neutral3: ColorMap;
+//# sourceMappingURL=tailwind-config.d.ts.map

package/dist/tailwind-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind-config.d.ts","sourceRoot":"","sources":["../../../../src/shared/tools/tailwind-config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqDtB,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAiBrB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;CAUvB,CAAA;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;CAkBvB,CAAA;AAED,eAAO,MAAM,MAAM;;CAElB,CAAA;AAED,eAAO,MAAM,OAAO;;CAEnB,CAAA;AAED,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmCxB,CAAA;AAoBD;;GAEG;AACH,eAAO,MAAM,QAAQ,UAAyC,CAAA;AAC9D,eAAO,MAAM,QAAQ,UAA0C,CAAA;AAC/D,eAAO,MAAM,QAAQ,UAIpB,CAAA"}

package/{tools/color-palette-18dd9e2f.cjs → dist/tailwind-config.js}

@@ -1,5 +1,3 @@
-'use strict';
-
 // This file is autogenerated. It's used to publish ESM to npm.
 function _typeof(obj) {
   "@babel/helpers - typeof";
@@ -1188,6 +1186,100 @@ const hslColorMap = (h, s, l) => {
   return colors;
 };
 
+const boxShadows = {
+  "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)",
+  "button-press-primary": "0px 12px 16px -16px rgba(0, 0, 0, 0.4)",
+  "button-press-secondary": "0px 12px 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)",
+  "neutral-drop-shadow": "0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08)",
+  "neutral-drop-shadow-1xl": "0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "neutral-drop-shadow-2xl": "0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "neutral-drop-shadow-3xl": "0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)",
+  "pink-drop-shadow": "0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08)",
+  "pink-drop-shadow-1xl": "0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "pink-drop-shadow-2xl": "0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "pink-drop-shadow-3xl": "0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)",
+  "neutral-inner-shadow": "inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08)",
+  "neutral-inner-shadow-top": "inset 0 7px 9px -7px rgb(18 41 74 / 21%)",
+  "neutral-inner-shadow-1xl": "inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15)",
+  "neutral-inner-shadow-2xl": "inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15)",
+  "neutral-inner-shadow-3xl": "inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15)",
+  "neutral-above-shadow": "0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-1xl": "0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-2xl": "0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325)",
+  "neutral-above-shadow-3xl": "0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325)",
+  "pink-above-shadow": "0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-1xl": "0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-2xl": "0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325)",
+  "pink-above-shadow-3xl": "0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325)",
+  "wizard-step": "1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16)",
+  "wizard-line": "inset 0px 0px 2px rgba(0, 0, 0, 0.14)"
+};
+const fontSizes = {
+  6: "6px",
+  8: "8px",
+  10: "10px",
+  12: "12px",
+  13: "13px",
+  14: "14px",
+  16: "16px",
+  17: "17px",
+  20: "20px",
+  21: "21px",
+  24: "24px",
+  26: "26px",
+  32: "32px",
+  40: "40px",
+  44: "44px",
+  48: "48px"
+};
+const fontWeights = {
+  100: "100",
+  200: "200",
+  300: "300",
+  400: "400",
+  500: "500",
+  600: "600",
+  700: "700",
+  800: "800",
+  900: "900"
+};
+const lineHeights = {
+  10: "10px",
+  12: "12px",
+  14: "14px",
+  15: "15px",
+  17: "17px",
+  19: "19px",
+  20: "20px",
+  22: "22px",
+  24: "24px",
+  26: "26px",
+  28: "28px",
+  31: "31px",
+  32: "32px",
+  38: "38px",
+  40: "40px",
+  48: "48px",
+  58: "58px"
+};
+const scales = {
+  98: ".98"
+};
+const heights = {
+  78: "78px"
+};
+const borderRadius = {
+  0: "0",
+  4: "4px",
+  8: "8px",
+  12: "12px",
+  16: "16px",
+  24: "24px"
+};
 const colorPalette = {
   neutral: hslColorMap(
     206,
@@ -1257,8 +1349,4 @@ const neutral3 = splitColor(
   Object.keys(colorPalette.neutral).length
 );
 
-exports.colorPalette = colorPalette;
-exports.hslColorMap = hslColorMap;
-exports.neutral1 = neutral1;
-exports.neutral2 = neutral2;
-exports.neutral3 = neutral3;
+export { borderRadius, boxShadows, colorPalette, fontSizes, fontWeights, heights, lineHeights, neutral1, neutral2, neutral3, scales };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukso/web-components",
-  "version": "1.51.6",
+  "version": "1.52.0",
   "type": "module",
   "files": [
     "dist",
@@ -51,10 +51,10 @@
       "import": "./tools/sass/index.js",
       "types": "./tools/sass/index.d.ts"
     },
-    "./tools/color-palette": {
-      "require": "./tools/color-palette.cjs",
-      "import": "./tools/color-palette.js",
-      "types": "./tools/color-palette.d.ts"
+    "./tools/tailwind-config": {
+      "require": "./tools/tailwind-config.cjs",
+      "import": "./tools/tailwind-config.js",
+      "types": "./tools/tailwind-config.d.ts"
     },
     "./tools/copy-assets": {
       "require": "./tools/copy-assets.cjs",
@@ -204,7 +204,10 @@
     ]
   },
   "dependencies": {
+    "clsx": "^2.0.0",
     "ethereum-blockies-base64": "^1.0.2",
+    "tailwind-merge": "^2.0.0",
+    "tailwind-variants": "^0.1.18",
     "tippy.js": "^6.3.7"
   },
   "customElements": "custom-elements.json"

package/tailwind.config.cjs

@@ -1,6 +1,6 @@
 const plugin = require('tailwindcss/plugin')
 
-const { colorPalette } = require('./tools/color-palette.cjs')
+const { colorPalette, boxShadows, fontWeights, fontSizes, lineHeights, scales, heights, borderRadius } = require('./tools/tailwind-config.cjs')
 
 /**
  * Add animation delay utilities. Example: .animation-delay-1000
@@ -70,109 +70,10 @@ module.exports = {
     },
     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)',
-        'button-press-primary': '0px 12px 16px -16px rgba(0, 0, 0, 0.4)',
-        'button-press-secondary': '0px 12px 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)',
-        'neutral-drop-shadow':
-          '0px 9px 4px rgba(63, 93, 116, 0.01), 0px 5px 3px rgba(63, 93, 116, 0.04), 0px 2px 2px rgba(63, 93, 116, 0.07), 0px 1px 1px rgba(63, 93, 116, 0.08), 0px 0px 0px rgba(63, 93, 116, 0.08)',
-        'neutral-drop-shadow-1xl':
-          '0px 18px 7px rgba(63, 93, 116, 0.02), 0px 10px 6px rgba(63, 93, 116, 0.08), 0px 4px 4px rgba(63, 93, 116, 0.13), 0px 1px 2px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
-        'neutral-drop-shadow-2xl':
-          '0px 54px 22px rgba(63, 93, 116, 0.02), 0px 30px 18px rgba(63, 93, 116, 0.08), 0px 14px 14px rgba(63, 93, 116, 0.13), 0px 3px 7px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
-        'neutral-drop-shadow-3xl':
-          '0px 118px 47px rgba(63, 93, 116, 0.02), 0px 67px 40px rgba(63, 93, 116, 0.08), 0px 30px 30px rgba(63, 93, 116, 0.13), 0px 7px 16px rgba(63, 93, 116, 0.15), 0px 0px 0px rgba(63, 93, 116, 0.16)',
-        'pink-drop-shadow':
-          '0px 9px 4px rgba(112, 96, 92, 0.01), 0px 5px 3px rgba(112, 96, 92, 0.04), 0px 2px 2px rgba(112, 96, 92, 0.07), 0px 1px 1px rgba(112, 96, 92, 0.08), 0px 0px 0px rgba(112, 96, 92, 0.08)',
-        'pink-drop-shadow-1xl':
-          '0px 17px 7px rgba(112, 96, 92, 0.02), 0px 10px 6px rgba(112, 96, 92, 0.08), 0px 4px 4px rgba(112, 96, 92, 0.13), 0px 1px 2px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
-        'pink-drop-shadow-2xl':
-          '0px 54px 21px rgba(112, 96, 92, 0.02), 0px 30px 18px rgba(112, 96, 92, 0.08), 0px 13px 13px rgba(112, 96, 92, 0.13), 0px 3px 7px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
-        'pink-drop-shadow-3xl':
-          '0px 117px 47px rgba(112, 96, 92, 0.02), 0px 66px 40px rgba(112, 96, 92, 0.08), 0px 29px 29px rgba(112, 96, 92, 0.13), 0px 7px 16px rgba(112, 96, 92, 0.15), 0px 0px 0px rgba(112, 96, 92, 0.16)',
-        'neutral-inner-shadow':
-          'inset 0px 9px 3px rgba(63, 93, 116, 0.01), inset 0px 5px 3px rgba(63, 93, 116, 0.04), inset 0px 2px 2px rgba(63, 93, 116, 0.07), inset 0px 1px 1px rgba(63, 93, 116, 0.08)',
-        'neutral-inner-shadow-top': 'inset 0 7px 9px -7px rgb(18 41 74 / 21%)',
-        'neutral-inner-shadow-1xl':
-          'inset 0px 19px 8px rgba(63, 93, 116, 0.02), inset 0px 11px 6px rgba(63, 93, 116, 0.08), inset 0px 5px 5px rgba(63, 93, 116, 0.13), inset 0px 1px 3px rgba(63, 93, 116, 0.15)',
-        'neutral-inner-shadow-2xl':
-          'inset 0px 60px 24px rgba(63, 93, 116, 0.02), inset 0px 34px 20px rgba(63, 93, 116, 0.08), inset 0px 15px 15px rgba(63, 93, 116, 0.13), inset 0px 4px 8px rgba(63, 93, 116, 0.15)',
-        'neutral-inner-shadow-3xl':
-          'inset 0px 130px 52px rgba(63, 93, 116, 0.02), inset 0px 73px 44px rgba(63, 93, 116, 0.08), inset 0px 33px 33px rgba(63, 93, 116, 0.13), inset 0px 8px 18px rgba(63, 93, 116, 0.15)',
-        'neutral-above-shadow':
-          '0px 0px 24px rgba(63, 93, 116, 0.1), 0px 0px 10.4625px rgba(63, 93, 116, 0.0675), 0px 0px 3.9px rgba(63, 93, 116, 0.05), 0px 0px 1.3875px rgba(63, 93, 116, 0.0325)',
-        'neutral-above-shadow-1xl':
-          '0px 0px 32px rgba(63, 93, 116, 0.1), 0px 0px 18.46px rgba(63, 93, 116, 0.0675), 0px 0px 11.9px rgba(63, 93, 116, 0.05), 0px 0px 9.39px rgba(63, 93, 116, 0.0325)',
-        'neutral-above-shadow-2xl':
-          '0px 0px 40px rgba(63, 93, 116, 0.1), 0px 0px 26.46px rgba(63, 93, 116, 0.0675), 0px 0px 19.9px rgba(63, 93, 116, 0.05), 0px 0px 17.39px rgba(63, 93, 116, 0.0325)',
-        'neutral-above-shadow-3xl':
-          '0px 0px 48px rgba(63, 93, 116, 0.1), 0px 0px 34.46px rgba(63, 93, 116, 0.0675), 0px 0px 27.9px rgba(63, 93, 116, 0.05), 0px 0px 25.39px rgba(63, 93, 116, 0.0325)',
-        'pink-above-shadow':
-          '0px 0px 24px rgba(112, 96, 92, 0.1), 0px 0px 10.4625px rgba(112, 96, 92, 0.0675), 0px 0px 3.9px rgba(112, 96, 92, 0.05), 0px 0px 1.3875px rgba(112, 96, 92, 0.0325)',
-        'pink-above-shadow-1xl':
-          '0px 0px 32px rgba(112, 96, 92, 0.1), 0px 0px 18.46px rgba(112, 96, 92, 0.0675), 0px 0px 11.9px rgba(112, 96, 92, 0.05), 0px 0px 9.39px rgba(112, 96, 92, 0.0325)',
-        'pink-above-shadow-2xl':
-          '0px 0px 40px rgba(112, 96, 92, 0.1), 0px 0px 26.46px rgba(112, 96, 92, 0.0675), 0px 0px 19.9px rgba(112, 96, 92, 0.05), 0px 0px 17.39px rgba(112, 96, 92, 0.0325)',
-        'pink-above-shadow-3xl':
-          '0px 0px 48px rgba(112, 96, 92, 0.1), 0px 0px 34.46px rgba(112, 96, 92, 0.0675), 0px 0px 27.9px rgba(112, 96, 92, 0.05), 0px 0px 25.39px rgba(112, 96, 92, 0.0325)',
-        'wizard-step':
-          '1px 1px 8px #FFFFFF, inset 1px 1px 4px rgba(0, 0, 0, 0.16)',
-        'wizard-line': 'inset 0px 0px 2px rgba(0, 0, 0, 0.14)',
-      },
-      fontSize: {
-        6: '6px',
-        8: '8px',
-        10: '10px',
-        12: '12px',
-        13: '13px',
-        14: '14px',
-        16: '16px',
-        17: '17px',
-        20: '20px',
-        21: '21px',
-        24: '24px',
-        26: '26px',
-        32: '32px',
-        40: '40px',
-        44: '44px',
-        48: '48px',
-      },
-      fontWeight: {
-        100: '100',
-        200: '200',
-        300: '300',
-        400: '400',
-        500: '500',
-        600: '600',
-        700: '700',
-        800: '800',
-        900: '900',
-      },
-      lineHeight: {
-        10: '10px',
-        12: '12px',
-        14: '14px',
-        15: '15px',
-        17: '17px',
-        19: '19px',
-        20: '20px',
-        22: '22px',
-        24: '24px',
-        26: '26px',
-        28: '28px',
-        31: '31px',
-        32: '32px',
-        38: '38px',
-        40: '40px',
-        48: '48px',
-        58: '58px',
-      },
+      boxShadow: boxShadows,
+      fontSize: fontSizes,
+      fontWeight: fontWeights,
+      lineHeight: lineHeights,
       transitionDuration: {
         25: '25ms',
         250: '250ms',
@@ -181,12 +82,8 @@ module.exports = {
         width: 'width',
         height: 'height',
       },
-      scale: {
-        98: '.98',
-      },
-      height: {
-        78: '78px',
-      },
+      scale: scales,
+      height: heights,
       animation: {
         'pulse-resize': 'pulse-resize 1s ease-in-out infinite',
         'resize-in': 'resize-in 0.5s ease-in-out',
@@ -261,14 +158,7 @@ module.exports = {
         backwards: 'backwards',
         both: 'both',
       },
-      borderRadius: {
-        0: '0',
-        4: '4px',
-        8: '8px',
-        12: '12px',
-        16: '16px',
-        24: '24px',
-      },
+      borderRadius: borderRadius,
       spacing: {
         22: '5.5rem', // 88px
       }