@lukso/web-components 1.6.2 → 1.7.3

package/src/shared/styles/typography.scss

@@ -1,142 +0,0 @@
-/**
-  * @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-medium-apax {
-    @apply text-44 not-italic font-500 leading-40 font-apax;
-  }
-
-  .heading-h1-regular-apax {
-    @apply text-44 not-italic font-400 leading-40 font-apax;
-  }
-
-  .heading-h2-medium-apax {
-    @apply text-24 not-italic font-500 leading-28 font-apax;
-  }
-
-  .heading-h3-medium-apax {
-    @apply text-16 not-italic font-500 leading-19 font-apax;
-  }
-
-  .heading-h4-medium-apax {
-    @apply text-14 not-italic font-500 leading-20 font-apax;
-  }
-
-  .heading-h4-medium-uppercase-apax {
-    @apply text-14 not-italic font-500 leading-20 font-apax uppercase tracking-[.08em];
-  }
-
-  .heading-h5-medium-apax {
-    @apply text-8 not-italic font-500 leading-10 font-apax;
-  }
-
-  .heading-h5-medium-uppercase-apax {
-    @apply text-8 not-italic font-500 leading-10 font-apax uppercase tracking-[.08em];
-  }
-
-  // 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
-
-  .monospaced-16-regular {
-    @apply text-16 not-italic font-400 leading-22 font-mono;
-  }
-
-  .monospaced-16-bold {
-    @apply text-16 not-italic font-700 leading-22 font-mono;
-  }
-
-  .monospaced-12-bold {
-    @apply text-12 not-italic font-700 leading-14 font-mono;
-  }
-
-  .monospaced-10-bold {
-    @apply text-10 not-italic font-700 leading-14 font-mono;
-  }
-}

package/src/shared/styles/variables.scss

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

package/src/shared/tailwind-element/index.ts

@@ -1,16 +0,0 @@
-import { LitElement, unsafeCSS } from 'lit'
-
-import style from '@/shared/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/__tests__/slice-address.spec.ts

@@ -1,15 +0,0 @@
-import { sliceAddress } from '../slice-address'
-
-test('sliceAddress', () => {
-  expect(sliceAddress()).toEqual('')
-  expect(sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5')).toEqual(
-    '0xA60DDd...8775B5'
-  )
-  expect(sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5', 3)).toEqual(
-    '0xA60...5B5'
-  )
-  expect(
-    sliceAddress('0xA60DDd4eB501bd5bfeC3d50187C3889B658775B5', 3, 6)
-  ).toEqual('0xA60...8775B5')
-  expect(sliceAddress('0xA60DDd4eB51', 10)).toEqual('0xA60DDd4eB51')
-})

package/src/shared/utils/color-palette.ts

@@ -1,76 +0,0 @@
-import tinycolor from 'tinycolor2'
-
-import { hslColorMap } from './hsl-color-map'
-
-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]),
-  pink: hslColorMap(11, 73, [97, 96, 95, 94, 93, 92, 91, 90]),
-  'gradient-1': {
-    start: '#D39B9D',
-    end: '#9071D1',
-  },
-  'gradient-2': {
-    start: '#F8DAD3',
-    end: '#CC99AE',
-  },
-  'gradient-3': {
-    start: tinycolor({ h: 230, s: 20, l: 28 }).toHexString(),
-    end: tinycolor({ h: 230, s: 24, l: 51 }).toHexString(),
-  },
-}
-
-/**
- * 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/src/shared/utils/copy-assets.ts

@@ -1,80 +0,0 @@
-import fs from 'fs'
-import path from 'path'
-
-/**
- * List of allowed file extensions
- */
-const fileExtensionWhitelist = [
-  '.woff2',
-  '.svg',
-  '.img',
-  '.jpg',
-  '.jpeg',
-  '.png',
-]
-
-/**
- * Copy file from source to destination
- *
- * @param source - Source path
- * @param target - Destination path
- * @returns
- */
-function copyFileSync(source, target) {
-  let targetFile = target
-
-  // If target is a directory, a new file with the same name will be created
-  if (fs.existsSync(target)) {
-    if (fs.lstatSync(target).isDirectory()) {
-      targetFile = path.join(target, path.basename(source))
-    }
-  }
-
-  if (!fileExtensionWhitelist.includes(path.extname(source))) {
-    return
-  }
-
-  fs.writeFileSync(targetFile, fs.readFileSync(source))
-}
-
-/**
- * Recursively copy directory from source to destination
- *
- * @param source - source directory
- * @param target - destination directory
- */
-function copyFolderRecursiveSync(source, target) {
-  let files = []
-
-  // Check if folder needs to be created or integrated
-  const targetFolder = path.join(target, path.basename(source))
-  if (!fs.existsSync(targetFolder)) {
-    fs.mkdirSync(targetFolder)
-  }
-
-  // Copy
-  if (fs.lstatSync(source).isDirectory()) {
-    files = fs.readdirSync(source)
-    files.forEach(function (file) {
-      const curSource = path.join(source, file)
-      if (fs.lstatSync(curSource).isDirectory()) {
-        copyFolderRecursiveSync(curSource, targetFolder)
-      } else {
-        copyFileSync(curSource, targetFolder)
-      }
-    })
-  }
-}
-
-/**
- * Copy asset directory from source to destination
- *
- * @param assetDir - destination directory
- * @param assets - source directory
- */
-export const copyAssets = (assetDir: string, assets: any) => {
-  if (!fs.existsSync(assetDir)) {
-    fs.mkdirSync(assetDir, { recursive: true })
-  }
-  copyFolderRecursiveSync(assets, assetDir)
-}

package/src/shared/utils/hsl-color-map.ts

@@ -1,20 +0,0 @@
-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/shared/utils/slice-address.ts

@@ -1,30 +0,0 @@
-/**
- * Shorten address by removing middle part, i.e: 0x123...789
- *
- * @param address - the address
- * @param sliceBy - slice by amount from top and end, it doesn't include 0x
- * @returns sliced address
- */
-export const sliceAddress = (
-  address?: string,
-  startSliceBy = 6,
-  endSliceBy?: number
-): string => {
-  if (!address) {
-    return ''
-  }
-
-  let sliceAddress = ''
-  endSliceBy = endSliceBy || startSliceBy
-
-  if (address.length < startSliceBy + endSliceBy) {
-    return address
-  }
-
-  sliceAddress =
-    address.length > startSliceBy + 2
-      ? `${address.slice(0, startSliceBy + 2)}...${address.slice(-endSliceBy)}`
-      : address
-
-  return sliceAddress
-}