@lukso/web-components 1.3.0 → 1.4.0

package/dist/sass/color-palette.ts

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

package/dist/sass/colors.scss

@@ -0,0 +1,91 @@
+// DO NOT MODIFY MANUALLY. This file is auto generated by Vite build process.
+:root {
+  --neutral-10: #121b21;
+  --neutral-15: #1b2832;
+  --neutral-20: #243542;
+  --neutral-25: #2d4253;
+  --neutral-30: #365063;
+  --neutral-35: #3e5d74;
+  --neutral-40: #476a85;
+  --neutral-45: #507795;
+  --neutral-50: #5985a6;
+  --neutral-55: #6a91af;
+  --neutral-60: #7a9db8;
+  --neutral-65: #8ba9c1;
+  --neutral-70: #9cb6c9;
+  --neutral-75: #acc2d2;
+  --neutral-80: #bdcedb;
+  --neutral-85: #cddae4;
+  --neutral-90: #dee7ed;
+  --neutral-95: #eef3f6;
+  --neutral-97: #f5f8fa;
+  --neutral-98: #f8fafb;
+  --neutral-100: #ffffff;
+  --honey-72: #fad275;
+  --honey-75: #fbd784;
+  --honey-82: #fce2a6;
+  --honey-85: #fce7b5;
+  --honey-92: #fef2d8;
+  --coral-65: #f37c58;
+  --coral-74: #f69e83;
+  --coral-75: #f7a288;
+  --coral-84: #fac3b3;
+  --coral-85: #fac7b7;
+  --coral-94: #fde9e2;
+  --warm-77: #ffbb8a;
+  --warm-87: #ffd8bd;
+  --warm-97: #fff6f0;
+  --sea-salt-57: #7fa4a4;
+  --sea-salt-67: #9db9b9;
+  --sea-salt-88: #dbe6e6;
+  --cloud-43: #447c97;
+  --cloud-75: #a7c7d7;
+  --cloud-88: #d5e4ec;
+  --ocean-38: #3c6286;
+  --ocean-75: #a7c0d7;
+  --ocean-88: #d5e1ec;
+  --sky-64: #68a5de;
+  --sky-75: #96c1e8;
+  --sky-85: #c0daf1;
+  --lukso-70: #cc99ae;
+  --lukso-80: #ddbbc9;
+  --lukso-90: #eedde4;
+  --yellow-55: #ffa31a;
+  --yellow-65: #ffb84d;
+  --yellow-75: #ffcc80;
+  --yellow-85: #ffe0b3;
+  --green-45: #31b452;
+  --green-54: #47cd68;
+  --green-75: #9be4ad;
+  --green-85: #c3efce;
+  --blue-50: #0567fa;
+  --blue-60: #3785fb;
+  --blue-75: #82b3fc;
+  --blue-85: #b4d1fd;
+  --red-55: #e23636;
+  --red-65: #e96363;
+  --red-75: #ef8f8f;
+  --red-85: #f5bcbc;
+  --purple-15: #1d202f;
+  --purple-31: #3c4262;
+  --purple-41: #4f5882;
+  --purple-51: #646ea0;
+  --purple-58: #7a83ae;
+  --purple-63: #8a92b7;
+  --purple-82: #c6cadc;
+  --purple-94: #ecedf3;
+  --pink-90: #f8dad3;
+  --pink-91: #f9ddd7;
+  --pink-92: #f9e1dc;
+  --pink-93: #fae5e0;
+  --pink-94: #fbe9e5;
+  --pink-95: #fcece9;
+  --pink-96: #fcf0ed;
+  --pink-97: #fdf4f2;
+  --gradient-1-start: #D39B9D;
+  --gradient-1-end: #9071D1;
+  --gradient-2-start: #F8DAD3;
+  --gradient-2-end: #CC99AE;
+  --gradient-3-start: #393e56;
+  --gradient-3-end: #646ea0;
+}

package/dist/sass/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/dist/sass/typography.scss

@@ -33,11 +33,11 @@
   }
 
   .heading-h4-apax {
-    @apply text-14 not-italic font-500 leading-20 font-apax;
+    @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
   }
 
   .heading-h5-apax {
-    @apply text-8 not-italic font-500 leading-10 font-apax;
+    @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
   }
 
   // Paragraph

package/dist/shared/directives/custom-class-map/index.d.ts

@@ -22,5 +22,5 @@ export declare class CustomClassMapDirective extends Directive {
  *
  * @param classInfoList
  */
-export declare const customClassMap: (classInfoList: ClassInfoList) => import("lit-html/directive.js").DirectiveResult<typeof CustomClassMapDirective>;
+export declare const customClassMap: (classInfoList: ClassInfoList) => import("lit-html/directive").DirectiveResult<typeof CustomClassMapDirective>;
 //# sourceMappingURL=index.d.ts.map

package/dist/shared/styles/color-palette.d.ts

@@ -0,0 +1,43 @@
+declare 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;
+export {};
+//# sourceMappingURL=color-palette.d.ts.map

package/dist/shared/styles/hslColorMap.d.ts

@@ -0,0 +1,10 @@
+/**
+ * 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 declare const hslColorMap: (h: any, s: any, l: any) => {};
+//# sourceMappingURL=hslColorMap.d.ts.map