@lukso/web-components 1.6.0 → 1.6.1

package/src/docs/typography.stories.mdx

@@ -0,0 +1,253 @@
+import { Meta } from '@storybook/addon-docs'
+
+<Meta title="Design System/Typography" />
+
+<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.
+
+```html
+<div class="mt-6 sb-unstyled heading-h1 text-neutral-20">Lorem ipsum</div>
+```
+
+### **Table of contents**
+
+- [Headings](#headings)
+- [Paragraph](#paragraph)
+- [Currency](#currency)
+- [Utility](#utility)
+- [Monospaced](#monospaced)
+
+<h3 id="headings">**Headings**</h3>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h1`
+  <div class="mt-6 sb-unstyled heading-h1">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h2`
+  <div class="mt-6 sb-unstyled heading-h2">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h3`
+  <div class="mt-6 sb-unstyled heading-h3">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h4`
+  <div class="mt-6 sb-unstyled heading-h4">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h5`
+  <div class="mt-6 sb-unstyled heading-h5">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h1-medium-apax`
+  <div class="mt-6 sb-unstyled heading-h1-medium-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h1-regular-apax`
+  <div class="mt-6 sb-unstyled heading-h1-regular-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h2-medium-apax`
+  <div class="mt-6 sb-unstyled heading-h2-medium-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h3-medium-apax`
+  <div class="mt-6 sb-unstyled heading-h3-medium-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h4-medium-apax`
+  <div class="mt-6 sb-unstyled heading-h4-medium-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h4-medium-uppercase-apax`
+  <div class="mt-6 sb-unstyled heading-h4-medium-uppercase-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h5-medium-apax`
+  <div class="mt-6 sb-unstyled heading-h5-medium-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `heading-h5-medium-uppercase-apax`
+  <div class="mt-6 sb-unstyled heading-h5-medium-uppercase-apax">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<h3 id="paragraph">**Paragraph** [↑](#typography)</h3>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-16-regular`
+  <div class="mt-6 sb-unstyled paragraph-16-regular">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-16-semi-bold`
+  <div class="mt-6 sb-unstyled paragraph-16-semi-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-14-regular`
+  <div class="mt-6 sb-unstyled paragraph-14-regular">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-14-medium`
+  <div class="mt-6 sb-unstyled paragraph-14-medium">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-14-semi-bold`
+  <div class="mt-6 sb-unstyled paragraph-14-semi-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-12-regular`
+  <div class="mt-6 sb-unstyled paragraph-12-regular">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-12-medium`
+  <div class="mt-6 sb-unstyled paragraph-12-medium">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `paragraph-12-semi-bold`
+  <div class="mt-6 sb-unstyled paragraph-12-semi-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<h3 id="currency">**Currency** [↑](#typography)</h3>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `currency-10-semi-bold`
+  <div class="mt-6 sb-unstyled currency-10-semi-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `currency-10-bold-uppercase`
+  <div class="mt-6 sb-unstyled currency-10-bold-uppercase">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `currency-14-semi-bold`
+  <div class="mt-6 sb-unstyled currency-14-semi-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<h3 id="utility">**Utility** [↑](#typography)</h3>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `link`
+  <div class="mt-6 sb-unstyled link">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `button-text`
+  <div class="mt-6 sb-unstyled button-text">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `caption`
+  <div class="mt-6 sb-unstyled caption">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<h3 id="monospaced">**Monospaced** [↑](#typography)</h3>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `monospaced-16-regular`
+  <div class="mt-6 sb-unstyled monospaced-16-regular">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `monospaced-16-bold`
+  <div class="mt-6 sb-unstyled monospaced-16-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `monospaced-12-bold`
+  <div class="mt-6 sb-unstyled monospaced-12-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>
+
+<div class="p-5 my-6 shadow-neutral-above-shadow rounded sb-unstyled">
+  #### `monospaced-10-bold`
+  <div class="mt-6 sb-unstyled monospaced-10-bold">
+    The quick brown fox jumps over the lazy dog.
+  </div>
+</div>

package/src/shared/assets/images/lukso-logo.svg

@@ -0,0 +1,3 @@
+<svg width="112" height="26" viewBox="0 0 112 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.4216 15.3911L53.9643 25.4427H59.7004L50.5652 13.4718C50.0696 12.8091 49.8567 12.3195 49.8567 11.8311C49.8567 11.3427 50.1755 10.8887 50.7769 10.2259L59.5235 0.48843H53.7514L46.3157 8.79506C45.1827 10.0861 44.6511 10.9941 44.6511 11.8666C44.6511 12.9833 45.2886 13.8903 46.4216 15.3911ZM86.2568 13.0178C86.2568 5.75903 91.3914 0 99.04 0C106.688 0 112 5.44488 112 13.0178C112 20.5906 106.547 25.9312 99.076 25.9312C91.0738 25.9312 86.2579 20.4175 86.2579 13.0178H86.2568ZM107.042 12.9833C107.042 7.88814 103.891 4.11835 99.0749 4.11835C94.2589 4.11835 91.2135 7.8182 91.2135 12.9833C91.2135 18.1485 94.4707 21.8828 99.0749 21.8828C103.926 21.8828 107.042 18.0441 107.042 12.9833ZM72.3405 25.4427H63.3822V21.3244H73.2258C76.0584 21.3244 77.5101 20.5918 77.5101 18.6369C77.5101 16.8919 76.3771 16.3335 73.2967 15.4954L70.3583 14.6929C64.87 13.192 63.0285 11.447 63.0285 7.32866C63.0285 3.21031 65.5074 0.48843 71.4913 0.48843H80.4497V4.67671H71.4204C68.9065 4.67671 67.6665 5.23508 67.6665 7.01452C67.6665 8.68961 68.7995 9.49219 71.7031 10.2248L74.7485 10.993C79.8471 12.284 82.2551 14.099 82.2551 18.1474C82.2551 22.8241 79.6343 25.4416 72.3405 25.4416V25.4427ZM28.185 26.0011C21.7055 26.0011 17.8098 22.581 17.8098 15.8806V0.523952H22.5547V15.5998C22.5547 19.2297 23.7238 21.8816 28.185 21.8816C32.6462 21.8816 33.8152 19.404 33.8152 15.5643V0.48843H38.5602V15.8451C38.5602 22.4766 34.6656 26.0011 28.185 26.0011ZM4.7799 0.523952H0V20.6961C0 24.0463 1.41685 25.4427 4.28434 25.4427H13.5265V21.3599H6.58645C5.20564 21.3599 4.78103 20.9414 4.78103 19.6149V0.523952H4.7799Z" fill="#243542"/>
+</svg>