@lukso/web-components 1.6.0 → 1.6.1

package/src/docs/animations.stories.mdx

@@ -0,0 +1,83 @@
+import { Meta, IconGallery, IconItem } from '@storybook/addon-docs'
+import '../components/lukso-icon/index'
+
+<h1>Animations</h1>
+
+Animations can be applied to any element through special CSS classes. For animatingicons you pass animation name.
+
+<Meta title="Design System/Animations" />
+
+### **Example usage**
+
+```html
+<div class="w-[12px] h-[12px] bg-green-54 animate-spin"></div>
+```
+
+### **Animation list**
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-spin`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 animate-spin"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-ping`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-ping"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-pulse`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-bounce`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-bounce"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-pulse-resize`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-pulse-resize"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-resize-in`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full animate-resize-in animation-iteration-infinite animation-duration-1000"></div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `animate-fade-in`
+  <div class="mt-6 w-[12px] h-[12px] bg-green-54 rounded-full opacity-0 animate-fade-in animation-iteration-infinite animation-duration-1000"></div>
+</div>
+
+### **Delay animation**
+
+You can delay animation by adding `animation-delay-[value]` class.
+
+```html
+<div class="animate-spin animation-delay-100"></div>
+```
+
+### **Animation count**
+
+You can set animation count by adding `animation-iteration-[value]` class.
+
+```html
+<div class="animate-spin animation-iteration-infinite"></div>
+```
+
+### **Animation duration**
+
+You can set animation duration by adding `animation-duration-[value]` class.
+
+```html
+<div class="animate-spin animation-duration-1000"></div>
+```
+
+### **Animation fill mode**
+
+You can set animation fill mode by adding `animation-fill-[value]` class.
+
+```html
+<div class="animate-spin animation-fill-forwards"></div>
+```

package/src/docs/colors.stories.mdx

@@ -0,0 +1,77 @@
+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/utils/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} />
+  ### **Pinks**
+  <br />
+  <br />
+  <ColorItem title="pink" colors={colorPalette.pink} />
+  ### **Gradients**
+  <br />
+  <br />
+  <ColorItem title="gradient-1" colors={colorPalette['gradient-1']} />
+  <ColorItem title="gradient-2" colors={colorPalette['gradient-2']} />
+  <ColorItem title="gradient-3" colors={colorPalette['gradient-3']} />
+</ColorPalette>

package/src/docs/drop-shadows.stories.mdx

@@ -0,0 +1,108 @@
+import { Meta } from '@storybook/addon-docs'
+
+<h1 id="typography">Drop Shadows</h1>
+
+Set of drop shadows for use in the design system.
+
+<Meta title="Design System/Drop Shadows" />
+
+### **Example Usage**
+
+Apply shadow class like any other Tailwind shadow using `shadow-{name}` pattern, for example:
+
+```html
+<span class="shadow-neutral-drop-shadow">Text</span>
+```
+
+### **Object Drop Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    1xl
+  </div>
+  <div class="shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    2xl
+  </div>
+  <div class="shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow
+  </div>
+  <div class="shadow-neutral-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-1xl
+  </div>
+  <div class="shadow-neutral-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-2xl
+  </div>
+  <div class="shadow-neutral-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-drop-shadow-3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-pink-drop-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow
+  </div>
+  <div class="shadow-pink-drop-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-1xl
+  </div>
+  <div class="shadow-pink-drop-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-2xl
+  </div>
+  <div class="shadow-pink-drop-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-drop-shadow-3xl
+  </div>
+</div>
+
+### **Object Inner Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-inner-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow
+  </div>
+  <div class="shadow-neutral-inner-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-1xl
+  </div>
+  <div class="shadow-neutral-inner-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-2xl
+  </div>
+  <div class="shadow-neutral-inner-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-inner-shadow-3xl
+  </div>
+</div>
+
+### **Object Above Shadows**
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-neutral-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow
+  </div>
+  <div class="shadow-neutral-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-1xl
+  </div>
+  <div class="shadow-neutral-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-2xl
+  </div>
+  <div class="shadow-neutral-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    neutral-above-shadow-3xl
+  </div>
+</div>
+
+<div class="flex gap-16 py-12">
+  <div class="shadow-pink-above-shadow px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow
+  </div>
+  <div class="shadow-pink-above-shadow-1xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-1xl
+  </div>
+  <div class="shadow-pink-above-shadow-2xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-2xl
+  </div>
+  <div class="shadow-pink-above-shadow-3xl px-9 py-6 rounded-xl inline-flex heading-h5 sb-unstyled">
+    pink-above-shadow-3xl
+  </div>
+</div>