@lukso/web-components 1.172.19 → 1.173.0

package/tools/sass/colors.scss

@@ -1,5 +1,5 @@
 // DO NOT MODIFY MANUALLY. This file is auto generated by Vite build process.
-:root {
+@theme {
   --neutral-10: #121b21;
   --neutral-15: #1b2832;
   --neutral-20: #243542;

package/tools/sass/component-v4.scss

@@ -0,0 +1,18 @@
+/**
+  * @file Component styles (Tailwind CSS v4)
+  *
+  * This is the base stylesheet that all web components inherit.
+  * Since Web Components styles are encapsulated within the Shadow DOM,
+  * we need to include all necessary styles.
+  * This version uses Tailwind CSS v4 syntax.
+  */
+
+@use './colors';
+@use './fonts-v4';
+@use './typography';
+@use './utilities';
+@use './variables-v4';
+
+strong {
+  @apply font-600;
+}

package/tools/sass/fonts-v4.scss

@@ -0,0 +1,70 @@
+/**
+  * @file Fonts (Tailwind CSS v4)
+  *
+  * This file contains all fonts used in designs.
+  * Consumers can override $font-file-path before importing if using Sass.
+  */
+
+$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-ExtraBold.woff2') format('woff2');
+  font-weight: 800;
+  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: '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;
+}

package/tools/sass/main-v4.scss

@@ -0,0 +1,19 @@
+/**
+  * @file Main styles (Tailwind CSS v4)
+  *
+  * This file contains theme configuration for Tailwind v4 applications.
+  * Import this to get the same typography scale and design tokens as the web components.
+  *
+  * This version uses Tailwind CSS v4 syntax and does NOT include @apply directives.
+  * Consumers should use utility classes directly (e.g., text-48, font-400, leading-58).
+  *
+  * Usage:
+  * - Import the compiled main-v4.css directly in your Tailwind v4 project (recommended)
+  * - Or import this .scss file in your Sass/Vite build (e.g., in Storybook)
+  */
+
+@use './variables-v4';
+@use './colors';
+@use './fonts-v4';
+
+@import 'tailwindcss';

package/tools/sass/tippy-v4.scss

@@ -0,0 +1,340 @@
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}
+
+.tippy-arrow::before {
+  content: '';
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.tippy-box[data-placement^='top'] > .tippy-arrow::before {
+  border-top-color: initial;
+  transform-origin: center top;
+}
+
+.tippy-box[data-placement^='bottom'] > .tippy-arrow::before {
+  border-bottom-color: initial;
+  transform-origin: center bottom;
+}
+
+.tippy-box[data-placement^='left'] > .tippy-arrow::before {
+  border-left-color: initial;
+  transform-origin: center left;
+}
+
+.tippy-box[data-placement^='right'] > .tippy-arrow::before {
+  border-right-color: initial;
+  transform-origin: center right;
+}
+
+.tippy-box[data-inertia][data-state='visible'] {
+  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+}
+
+.tippy-arrow {
+  width: 16px;
+  height: 16px;
+}
+
+// sizes
+
+.tippy-size-medium {
+  padding: 0.5rem;
+  border-radius: var(--radius-4);
+  font-size: var(--text-10);
+  font-style: normal;
+  font-weight: var(--font-600);
+  line-height: var(--leading-12);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+
+  &[data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  &[data-placement^='top'] > .tippy-arrow::before {
+    bottom: -6px;
+    left: 2px;
+    border-width: 6px 6px 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow::before {
+    top: -6px;
+    left: 2px;
+    border-width: 0 6px 6px;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow::before {
+    border-width: 6px 0 6px 6px;
+    right: -6px;
+    top: 2px;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow::before {
+    left: -6px;
+    top: 2px;
+    border-width: 6px 6px 6px 0;
+  }
+}
+
+.tippy-size-large {
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--radius-8);
+  font-size: var(--text-12);
+  font-style: normal;
+  font-weight: var(--font-400);
+  line-height: var(--leading-20);
+  font-family: var(--font-inter);
+  box-shadow: var(--shadow-neutral-shadow-round-1xl);
+
+  &[data-placement^='top'] > .tippy-arrow {
+    bottom: 0;
+  }
+
+  &[data-placement^='top'] > .tippy-arrow::before {
+    bottom: -8px;
+    left: 0;
+    border-width: 8px 8px 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow {
+    top: 0;
+  }
+
+  &[data-placement^='bottom'] > .tippy-arrow::before {
+    top: -8px;
+    left: 0;
+    border-width: 0 8px 8px;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow {
+    right: 0;
+  }
+
+  &[data-placement^='left'] > .tippy-arrow::before {
+    border-width: 8px 0 8px 8px;
+    right: -8px;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow {
+    left: 0;
+  }
+
+  &[data-placement^='right'] > .tippy-arrow::before {
+    left: -8px;
+    border-width: 8px 8px 8px 0;
+  }
+}
+
+// variants
+
+.tippy-variant-dark {
+  color: var(--neutral-100);
+  background-color: var(--neutral-30);
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    border-top-color: var(--neutral-30);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    border-bottom-color: var(--neutral-30);
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    border-left-color: var(--neutral-30);
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    border-right-color: var(--neutral-30);
+  }
+
+  & > .tippy-backdrop {
+    background-color: var(--neutral-30);
+  }
+
+  & > .tippy-svg-arrow {
+    fill: var(--neutral-30);
+  }
+}
+
+.tippy-variant-light {
+  color: var(--neutral-20);
+  background-color: var(--neutral-97);
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    border-top-color: var(--neutral-97);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    border-bottom-color: var(--neutral-97);
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    border-left-color: var(--neutral-97);
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    border-right-color: var(--neutral-97);
+  }
+
+  & > .tippy-backdrop {
+    background-color: var(--neutral-97);
+  }
+
+  & > .tippy-svg-arrow {
+    fill: var(--neutral-97);
+  }
+}
+
+.tippy-variant-white {
+  color: var(--neutral-20);
+  background-color: var(--neutral-100);
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    border-top-color: var(--neutral-100);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    border-bottom-color: var(--neutral-100);
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    border-left-color: var(--neutral-100);
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    border-right-color: var(--neutral-100);
+  }
+
+  & > .tippy-backdrop {
+    background-color: var(--neutral-100);
+  }
+
+  & > .tippy-svg-arrow {
+    fill: var(--neutral-100);
+  }
+}
+
+.tippy-variant-success {
+  color: var(--neutral-100);
+  background-color: var(--green-54);
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    border-top-color: var(--green-54);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    border-bottom-color: var(--green-54);
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    border-left-color: var(--green-54);
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    border-right-color: var(--green-54);
+  }
+
+  & > .tippy-backdrop {
+    background-color: var(--green-54);
+  }
+
+  & > .tippy-svg-arrow {
+    fill: var(--green-54);
+  }
+}
+
+.tippy-variant-danger {
+  color: var(--neutral-100);
+  background-color: var(--red-65);
+
+  &[data-placement^='top'] .tippy-arrow::before {
+    border-top-color: var(--red-65);
+  }
+
+  &[data-placement^='bottom'] .tippy-arrow::before {
+    border-bottom-color: var(--red-65);
+  }
+
+  &[data-placement^='left'] .tippy-arrow::before {
+    border-left-color: var(--red-65);
+  }
+
+  &[data-placement^='right'] .tippy-arrow::before {
+    border-right-color: var(--red-65);
+  }
+
+  & > .tippy-backdrop {
+    background-color: var(--red-65);
+  }
+
+  & > .tippy-svg-arrow {
+    fill: var(--red-65);
+  }
+}
+
+// themes
+
+.tippy-box[data-theme~='dark-medium'] {
+  @extend .tippy-variant-dark;
+  @extend .tippy-size-medium;
+}
+
+.tippy-box[data-theme~='dark-large'] {
+  @extend .tippy-variant-dark;
+  @extend .tippy-size-large;
+}
+
+.tippy-box[data-theme~='light-medium'] {
+  @extend .tippy-variant-light;
+  @extend .tippy-size-medium;
+}
+
+.tippy-box[data-theme~='light-large'] {
+  @extend .tippy-variant-light;
+  @extend .tippy-size-large;
+}
+
+.tippy-box[data-theme~='white-medium'] {
+  @extend .tippy-variant-white;
+  @extend .tippy-size-medium;
+}
+
+.tippy-box[data-theme~='white-large'] {
+  @extend .tippy-variant-white;
+  @extend .tippy-size-large;
+}
+
+.tippy-box[data-theme~='success-medium'] {
+  @extend .tippy-variant-success;
+  @extend .tippy-size-medium;
+}
+
+.tippy-box[data-theme~='success-large'] {
+  @extend .tippy-variant-success;
+  @extend .tippy-size-large;
+}
+
+.tippy-box[data-theme~='danger-medium'] {
+  @extend .tippy-variant-danger;
+  @extend .tippy-size-medium;
+}
+
+.tippy-box[data-theme~='danger-large'] {
+  @extend .tippy-variant-danger;
+  @extend .tippy-size-large;
+}

package/tools/sass/variables-v4.scss

@@ -0,0 +1,172 @@
+/**
+  * @file Variables (Tailwind CSS v4)
+  *
+  * This file contains Tailwind v4 theme configuration using @theme directive.
+  */
+
+@theme {
+  /* Font families */
+  --font-inter: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: 'PT Mono', ui-monospace, monospace;
+
+  /* Font sizes (text-*) */
+  --text-6: 6px;
+  --text-8: 8px;
+  --text-10: 10px;
+  --text-12: 12px;
+  --text-13: 13px;
+  --text-14: 14px;
+  --text-16: 16px;
+  --text-17: 17px;
+  --text-20: 20px;
+  --text-21: 21px;
+  --text-24: 24px;
+  --text-26: 26px;
+  --text-32: 32px;
+  --text-40: 40px;
+  --text-44: 44px;
+  --text-48: 48px;
+
+  /* Font weights (font-*) */
+  --font-100: 100;
+  --font-200: 200;
+  --font-300: 300;
+  --font-400: 400;
+  --font-500: 500;
+  --font-600: 600;
+  --font-700: 700;
+  --font-800: 800;
+  --font-900: 900;
+
+  /* Line heights (leading-*) */
+  --leading-10: 10px;
+  --leading-12: 12px;
+  --leading-14: 14px;
+  --leading-15: 15px;
+  --leading-17: 17px;
+  --leading-19: 19px;
+  --leading-20: 20px;
+  --leading-22: 22px;
+  --leading-24: 24px;
+  --leading-26: 26px;
+  --leading-28: 28px;
+  --leading-31: 31px;
+  --leading-32: 32px;
+  --leading-38: 38px;
+  --leading-40: 40px;
+  --leading-48: 48px;
+  --leading-58: 58px;
+
+  /* Border radius (rounded-*) */
+  --radius-0: 0;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-10: 10px;
+  --radius-12: 12px;
+  --radius-14: 14px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+
+  /* Scales */
+  --scale-98: 0.98;
+
+  /* Heights */
+  --height-78: 78px;
+
+  /* Spacing */
+  --spacing-17: 4.25rem;
+  --spacing-18: 4.5rem;
+  --spacing-22: 5.5rem;
+  --spacing-30: 7.5rem;
+
+  /* Box Shadows (shadow-*) */
+  --shadow-neutral-shadow-round:
+    0px 7px 5px 0px rgb(63 93 116 / 0%), 0px 0px 10px 0px rgb(63 93 116 / 2%),
+    0px 3px 10px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 3px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-1xl:
+    0px 27px 12px 0px rgb(63 93 116 / 0%), 0px 18px 7px 0px rgb(63 93 116 / 2%),
+    0px 10px 6px 0px rgb(63 93 116 / 8%), 0px 4px 4px 0px rgb(63 93 116 / 13%),
+    0px 1px 2px 0px rgb(63 93 116 / 15%), 0px 0px 14px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-2xl:
+    0px 85px 24px 0px rgb(63 93 116 / 0%),
+    0px 54px 22px 0px rgb(63 93 116 / 2%),
+    0px 30px 18px 0px rgb(63 93 116 / 8%),
+    0px 14px 14px 0px rgb(63 93 116 / 13%),
+    0px 3px 7px 0px rgb(63 93 116 / 15%), 0px 0px 23px 0px rgb(63 93 116 / 16%);
+  --shadow-neutral-shadow-round-3xl:
+    0px 185px 52px 0px rgb(63 93 116 / 0%),
+    0px 118px 47px 0px rgb(63 93 116 / 2%),
+    0px 67px 40px 0px rgb(63 93 116 / 8%),
+    0px 30px 30px 0px rgb(63 93 116 / 13%),
+    0px 7px 16px 0px rgb(63 93 116 / 15%), 0px 0px 30px 0px rgb(63 93 116 / 16%);
+
+  /* Animations (animate-*) */
+  --animate-pulse-resize: pulse-resize 1s ease-in-out infinite;
+  --animate-resize-in: resize-in 0.5s ease-in-out;
+  --animate-fade-in: fade-in 0.5s ease-in-out forwards;
+  --animate-bounce2: bounce2 1s ease-in-out infinite alternate;
+  --animate-fade-in-up: fade-in-up 0.5s ease-out forwards;
+
+  /* Animation Fill Modes (animation-fill-*) */
+  --animation-fill-none: none;
+  --animation-fill-forwards: forwards;
+  --animation-fill-backwards: backwards;
+  --animation-fill-both: both;
+}
+
+/* Keyframes for animations */
+@keyframes pulse-resize {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(0.7);
+  }
+}
+
+@keyframes resize-in {
+  0% {
+    transform: scale(0.5);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes bounce2 {
+  0% {
+    transform: translateY(-6px);
+  }
+
+  100% {
+    transform: translateY(10);
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}