@lukso/web-components 1.0.6 → 1.2.0

package/dist/sass/index.cjs

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

package/dist/styles/index.cjs

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

package/dist/styles/main.css.map

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

package/src/components/lukso-button/lukso-button.ts

@@ -1,55 +0,0 @@
-import { html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-
-import { TailwindElement } from '../../shared/tailwind.element'
-import { customClassMap } from '../../shared/directives/custom-class-map'
-
-export type ButtonVariants = 'primary' | 'secondary' | 'landing'
-
-@customElement('lukso-button')
-export class LuksoButton extends TailwindElement {
-  @property({ type: String })
-  variant: ButtonVariants = 'primary'
-
-  @property({ type: Boolean })
-  disabled = false
-
-  private defaultStyles = `flex justify-center items-center relative gap-2 py-3 px-6 rounded-xl
-    border border-solid cursor-pointer paragraph-16-semi-bold`
-
-  private secondaryStyles = `bg-neutral-100 border-neutral-90 text-neutral-20 disabled:bg-neutral-90
-    disabled:border-neutral-90 disabled:text-neutral-100 hover:shadow-button-hover-secondary`
-
-  private primaryStyles = `bg-neutral-20 border-neutral-20 text-neutral-100
-    disabled:bg-neutral-90
-    disabled:border-neutral-90
-    hover:shadow-button-hover-primary
-  `
-
-  private landingStyles = `bg-purple-51 border-purple-51 text-neutral-100
-    disabled:bg-neutral-90 disabled:border-neutral-90
-    hover:shadow-button-hover-primary hover:bg-purple-58 hover:border-purple-58`
-
-  render() {
-    return html`
-      <button
-        data-testid="button"
-        ?disabled=${this.disabled}
-        class=${customClassMap({
-          [this.defaultStyles]: true,
-          [this.primaryStyles]: this.variant === 'primary',
-          [this.secondaryStyles]: this.variant === 'secondary',
-          [this.landingStyles]: this.variant === 'landing',
-        })}
-      >
-        <slot></slot>
-      </button>
-    `
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'lukso-button': LuksoButton
-  }
-}

package/src/docs/buttons.stories.mdx

@@ -1,35 +0,0 @@
-import { Meta } from '@storybook/addon-docs'
-import { html } from 'lit-html'
-
-<Meta title="Design System/Atoms/Button" />
-
-# Button component
-
-This file is a documentation-only `MDX`file to customize Storybook's [DocsPage](https://storybook.js.org/docs/react/writing-docs/docs-page#replacing-docspage).
-
-It can be further expanded with your own code snippets and include specific information related to your stories.
-
-For example:
-
-import { Story } from '@storybook/addon-docs'
-
-## Button
-
-Button is the primary component. It has four possible states.
-
-- [Primary](?path=/docs/design-system-typography--currency-10-semi-bold)
-- [Secondary](#design-system-atoms-button--secondary)
-- [Large](#large)
-- [Small](#small)
-
-## With the story title defined
-
-If you included the title in the story's default export, use this approach.
-
-### Primary
-
-<Story id="design-system-atoms-button--primary" />
-
-### Secondary
-
-<Story id="design-system-atoms-button--secondary" />

package/src/docs/colors.stories.mdx

@@ -1,72 +0,0 @@
-import {
-  Meta,
-  ColorPalette,
-  ColorItem,
-  Story,
-  Canvas,
-  Source,
-} from '@storybook/addon-docs'
-import { html } from 'lit-html'
-import dedent from 'ts-dedent'
-
-import {
-  colorPalette,
-  neutral1,
-  neutral2,
-  neutral3,
-} from '../shared/styles/color-palette'
-
-<Meta title="Design System/Colors" />
-
-<h1 id="typography">Colors</h1>
-
-We use colors that has fixed `hue` and `saturation` and operate over `lightness` values.
-For instance in `neutral-20` the lightness value is `20`.
-
-### **Example Usage**
-
-Apply color class like any other Tailwind color, for example:
-
-```html
-<span class="bg-neutral-20 text-honey-72">Text</span>
-```
-
-### **Color Palette**
-
-<br />
-
-<ColorPalette>
-  #### **Neutral Colors**
-  <br />
-  <br />
-  <ColorItem title="neutral" colors={neutral1} />
-  <ColorItem colors={neutral2} />
-  <ColorItem colors={neutral3} />
-  ### **Accent Colors**
-  <br />
-  <br />
-  <ColorItem title="honey" colors={colorPalette.honey} />
-  <ColorItem title="coral" colors={colorPalette.coral} />
-  <ColorItem title="warm" colors={colorPalette.warm} />
-  <ColorItem title="sea salt" colors={colorPalette['sea-salt']} />
-  <ColorItem title="cloud" colors={colorPalette.cloud} />
-  <ColorItem title="ocean" colors={colorPalette.ocean} />
-  <ColorItem title="sky" colors={colorPalette.sky} />
-  <ColorItem title="lukso" colors={colorPalette.lukso} />
-  ### **Utility Colors**
-  <br />
-  <br />
-  <ColorItem title="yellow" colors={colorPalette.yellow} />
-  <ColorItem title="green" colors={colorPalette.green} />
-  <ColorItem title="blue" colors={colorPalette.blue} />
-  <ColorItem title="red" colors={colorPalette.red} />
-  ### **Purples**
-  <br />
-  <br />
-  <ColorItem title="purple" colors={colorPalette.purple} />
-  ### **Gradients**
-  <br />
-  <br />
-  <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
-  <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
-</ColorPalette>

package/src/docs/typography.stories.mdx

@@ -1,360 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { html } from 'lit-html'
-import dedent from 'ts-dedent'
-
-<Meta title="Design System/Typography" />
-
-export const Template = ({ name, font }) =>
-  html`<span class="${font}"
-    >The quick brown fox jumps over the lazy dog.</span
-  >`
-
-<h1 id="typography">Typography</h1>
-
-In order to maintain a consistent look and feel woth design in terms of the typography,
-we have a set of CSS classes that we use. Using `font-family`,
-`font-weight` and `font-size` directly in your code should be avoided and instead use this set
-of classes.
-
-### **Font colors**
-
-Colors for the text should be added independently using proper color classes. See example below.
-
-<Source
-  language="html"
-  dark
-  format={false}
-  code={dedent`
-     <span class="heading-h1 text-neutral-20">The quick brown fox jumps over the lazy dog.</span>
-  `}
-/>
-
-### **Table of contents**
-
-- [Headings](#headings)
-- [Paragraph](#paragraph)
-- [Currency](#currency)
-- [Utility](#utility)
-- [Monospaced](#monospaced)
-
-<h3 id="headings">**Headings**</h3>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h1`
-  <Story
-    name="heading-h1"
-    args={{
-      font: 'heading-h1',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h2`
-  <Story
-    name="heading-h2"
-    args={{
-      font: 'heading-h2',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h3`
-  <Story
-    name="heading-h3"
-    args={{
-      font: 'heading-h3',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h4`
-  <Story
-    name="heading-h4"
-    args={{
-      font: 'heading-h4',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h5`
-  <Story
-    name="heading-h5"
-    args={{
-      font: 'heading-h5',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h1-apax`
-  <Story
-    name="heading-h1-apax"
-    args={{
-      font: 'heading-h1-apax',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h4-apax`
-  <Story
-    name="heading-h4-apax"
-    args={{
-      font: 'heading-h4-apax',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `heading-h5-apax`
-  <Story
-    name="heading-h5-apax"
-    args={{
-      font: 'heading-h5-apax',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<h3 id="paragraph">**Paragraph** [↑](#typography)</h3>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-16-regular`
-  <Story
-    name="paragraph-16-regular"
-    args={{
-      font: 'paragraph-16-regular',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-16-semi-bold`
-  <Story
-    name="paragraph-16-semi-bold"
-    args={{
-      font: 'paragraph-16-semi-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-14-regular`
-  <Story
-    name="paragraph-14-regular"
-    args={{
-      font: 'paragraph-14-regular',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-14-medium`
-  <Story
-    name="paragraph-14-medium"
-    args={{
-      font: 'paragraph-14-medium',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-14-semi-bold`
-  <Story
-    name="paragraph-14-semi-bold"
-    args={{
-      font: 'paragraph-14-semi-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-12-regular`
-  <Story
-    name="paragraph-12-regular"
-    args={{
-      font: 'paragraph-12-regular',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-12-medium`
-  <Story
-    name="paragraph-12-medium"
-    args={{
-      font: 'paragraph-12-medium',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `paragraph-12-semi-bold`
-  <Story
-    name="paragraph-12-semi-bold"
-    args={{
-      font: 'paragraph-12-semi-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<h3 id="currency">**Currency** [↑](#typography)</h3>
-
-<Canvas isColumn withSource="open">
-  #### `currency-10-semi-bold`
-  <Story
-    name="currency-10-semi-bold"
-    args={{
-      font: 'currency-10-semi-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `currency-10-bold-uppercase`
-  <Story
-    name="currency-10-bold-uppercase"
-    args={{
-      font: 'currency-10-bold-uppercase',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `currency-14-semi-bold`
-  <Story
-    name="currency-14-semi-bold"
-    args={{
-      font: 'currency-14-semi-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<h3 id="utility">**Utility** [↑](#typography)</h3>
-
-<Canvas isColumn withSource="open">
-  #### `link`
-  <Story
-    name="link"
-    args={{
-      font: 'link',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `button-text`
-  <Story
-    name="button-text"
-    args={{
-      font: 'button-text',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `caption`
-  <Story
-    name="caption"
-    args={{
-      font: 'caption',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<h3 id="monospaced">**Monospaced** [↑](#typography)</h3>
-
-<Canvas isColumn withSource="open">
-  #### `monospace-16-regular`
-  <Story
-    name="monospace-16-regular"
-    args={{
-      font: 'monospace-16-regular',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `monospace-16-bold`
-  <Story
-    name="monospace-16-bold"
-    args={{
-      font: 'monospace-16-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `monospace-12-bold`
-  <Story
-    name="monospace-12-bold"
-    args={{
-      font: 'monospace-12-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-<Canvas isColumn withSource="open">
-  #### `monospace-10-bold`
-  <Story
-    name="monospace-10-bold"
-    args={{
-      font: 'monospace-10-bold',
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>

package/src/globals.d.ts

@@ -1 +0,0 @@
-declare module '@open-wc/demoing-storybook'

package/src/tailwind.config.ts

@@ -1,60 +0,0 @@
-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: [],
-}