@lukso/web-components 1.0.1 → 1.0.4

package/dist/sass/color-palette.ts

@@ -0,0 +1,69 @@
+import { hslColorMap } from '../utils/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]),
+  '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
+ */
+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/dist/sass/component.scss

@@ -0,0 +1,13 @@
+/**
+  * @file Component styles
+  *
+  * This file contain general styles that should be applied to any component.
+  * Since Web Components styles are encapsulated within the Shadow DOM, we need
+  * to pass all styles.
+  */
+
+@import './typography';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/dist/sass/fonts.scss

@@ -0,0 +1,97 @@
+/**
+  * @file Fonts
+  *
+  * This file contains all fonts used in designs.
+  */
+
+$font-file-path: '/assets/fonts' !default;
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-Thin.woff2') format('woff2');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: Inter;
+  src: url('#{$font-file-path}/Inter-ExtraBold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('#{$font-file-path}/PT-Mono-Regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'PT Mono';
+  src: url('#{$font-file-path}/PT-Mono-Bold.woff2') format('woff2');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Light.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Apax;
+  src: url('#{$font-file-path}/Apax-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}

package/dist/sass/index.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("../styles/index.cjs");module.exports=e;

package/dist/sass/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "../styles/index.js";
+export {
+  o as default
+};

package/dist/sass/index.ts

@@ -0,0 +1 @@
+export default __dirname

package/dist/sass/main.scss

@@ -0,0 +1,12 @@
+/**
+  * @file Main styles
+  *
+  * This file contain general styles that should be applied to host page.
+  */
+
+@import './fonts';
+@import './typography';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

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

package/dist/styles/index.cjs

@@ -0,0 +1 @@
+"use strict";const e=__dirname;module.exports=e;

package/dist/styles/index.js

@@ -0,0 +1,4 @@
+const a = __dirname;
+export {
+  a as default
+};

package/dist/styles/main.css

@@ -0,0 +1,181 @@
+/**
+  * @file Main styles
+  *
+  * This file contain general styles that should be applied to host page.
+  */
+/**
+  * @file Fonts
+  *
+  * This file contains all fonts used in designs.
+  */
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: Inter;
+  src: url("/assets/fonts/Inter-ExtraBold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "PT Mono";
+  src: url("/assets/fonts/PT-Mono-Regular.woff2") format("woff2");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "PT Mono";
+  src: url("/assets/fonts/PT-Mono-Bold.woff2") format("woff2");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: Apax;
+  src: url("/assets/fonts/Apax-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: Apax;
+  src: url("/assets/fonts/Apax-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: Apax;
+  src: url("/assets/fonts/Apax-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: Apax;
+  src: url("/assets/fonts/Apax-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+/**
+  * @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-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-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;
+  }
+  .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;
+  }
+  .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;
+  }
+}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/*# sourceMappingURL=main.css.map */

package/dist/styles/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/shared/styles/main.scss","../../src/shared/styles/fonts.scss","../../src/shared/styles/typography.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AAQA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AC/FF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAKF;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AF9GJ;AACA;AACA","file":"main.css"}