@lukso/web-components 1.173.0 → 1.173.1

package/dist/styles/typography-v4.css

@@ -0,0 +1,373 @@
+/**
+  * @file Typography v4
+  *
+  * This file contains all typography classes for Tailwind v4.
+  * Uses pure CSS properties instead of @apply to avoid Tailwind v4 conflicts.
+  *
+  * Wrapped in @layer components so Tailwind utility classes can override properties.
+  * This matches v3 behavior where @apply classes had lower priority than utilities.
+  *
+  * You can use them same as the normal Tailwind classes, e.g.: class="heading-inter-26-semi-bold"
+  */
+
+@layer components {
+  /* Headers */
+
+  .heading-inter-48-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-48);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-58);
+  }
+
+  .heading-inter-48-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-48);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-58);
+  }
+
+  .heading-inter-44-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-44);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-40);
+  }
+
+  .heading-inter-44-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-44);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-40);
+  }
+
+  .heading-inter-40-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-40);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-48);
+  }
+
+  .heading-inter-40-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-40);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-48);
+  }
+
+  .heading-inter-32-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-32);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-38);
+  }
+
+  .heading-inter-32-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-32);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-38);
+  }
+
+  .heading-inter-24-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-28);
+  }
+
+  .heading-inter-26-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-26);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-31);
+  }
+
+  .heading-inter-21-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-21);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .heading-inter-17-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-17);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .heading-inter-12-bold-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-15);
+    text-transform: uppercase;
+    letter-spacing: 0.02em;
+  }
+
+  .heading-inter-14-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-17);
+  }
+
+  /* Navbar */
+
+  .nav-inter-14-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-17);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .nav-inter-12-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-14);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .nav-inter-10-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .nav-inter-8-medium-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-8);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-10);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  /* Paragraph */
+
+  .paragraph-inter-20-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-20);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-32);
+  }
+
+  .paragraph-inter-16-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-24);
+  }
+
+  .paragraph-inter-16-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-24);
+  }
+
+  .paragraph-inter-16-semi-bold-underlined {
+    font-family: var(--font-inter);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-24);
+    text-decoration: underline;
+  }
+
+  .paragraph-inter-14-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-14-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-14-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-inter-13-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-13);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-10-regular {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .paragraph-inter-12-medium {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-500);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-12-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-inter-10-semi-bold {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-600);
+    font-style: normal;
+    line-height: var(--leading-12);
+  }
+
+  .paragraph-inter-10-bold-uppercase {
+    font-family: var(--font-inter);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-12);
+    text-transform: uppercase;
+  }
+
+  .paragraph-ptmono-24-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .paragraph-ptmono-24-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-24);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-26);
+  }
+
+  .paragraph-ptmono-16-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-ptmono-16-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-16);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-22);
+  }
+
+  .paragraph-ptmono-14-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-ptmono-14-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-14);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-20);
+  }
+
+  .paragraph-ptmono-12-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-12-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-12);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-10-bold {
+    font-family: var(--font-mono);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-700);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+
+  .paragraph-ptmono-10-regular {
+    font-family: var(--font-mono);
+    font-size: var(--text-10);
+    font-weight: var(--font-weight-400);
+    font-style: normal;
+    line-height: var(--leading-14);
+  }
+} /* end @layer components */

package/dist/vite.full.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vite.full.config.d.ts","sourceRoot":"","sources":["../../vite.full.config.ts"],"names":[],"mappings":"AAeA,wBAAsB,QAAQ,CAAC,GAAG,KAAA,EAAE,MAAM,GAAE,MAAM,EAAO;;;;;;;;KA8ExD;AA6KD,wBAAsB,GAAG,CAAC,IAAI,KAAA,iBA6H7B"}
+{"version":3,"file":"vite.full.config.d.ts","sourceRoot":"","sources":["../../vite.full.config.ts"],"names":[],"mappings":"AAaA,wBAAsB,QAAQ,CAAC,GAAG,KAAA,EAAE,MAAM,GAAE,MAAM,EAAO;;;;;;;;KA8ExD;AAiJD,wBAAsB,GAAG,CAAC,IAAI,KAAA,iBAgI7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@lukso/web-components",
-	"version": "1.173.0",
+	"version": "1.173.1",
 	"type": "module",
 	"files": [
 		"dist",

package/tools/sass/colors.scss

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

package/tools/sass/main.scss

@@ -4,7 +4,7 @@
   * This file contain general styles that should be applied to host page.
   */
 
-@use './colors';
+@use './generated/colors';
 @use './fonts';
 @use './typography';
 @use './utilities';

package/tools/styles/colors-v4.css

@@ -0,0 +1,120 @@
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+@theme {
+  --color-neutral-10: #121b21;
+  --color-neutral-15: #1b2832;
+  --color-neutral-20: #243542;
+  --color-neutral-25: #2d4253;
+  --color-neutral-30: #365063;
+  --color-neutral-35: #3e5d74;
+  --color-neutral-40: #476a85;
+  --color-neutral-45: #507795;
+  --color-neutral-50: #5985a6;
+  --color-neutral-55: #6a91af;
+  --color-neutral-60: #7a9db8;
+  --color-neutral-65: #8ba9c1;
+  --color-neutral-70: #9cb6c9;
+  --color-neutral-75: #acc2d2;
+  --color-neutral-80: #bdcedb;
+  --color-neutral-85: #cddae4;
+  --color-neutral-90: #dee7ed;
+  --color-neutral-95: #eef3f6;
+  --color-neutral-97: #f5f8fa;
+  --color-neutral-98: #f8fafb;
+  --color-neutral-100: #ffffff;
+  --color-honey-72: #fad275;
+  --color-honey-75: #fbd784;
+  --color-honey-82: #fce2a6;
+  --color-honey-85: #fce7b5;
+  --color-honey-92: #fef2d8;
+  --color-coral-65: #f37c58;
+  --color-coral-74: #f69e83;
+  --color-coral-75: #f7a288;
+  --color-coral-84: #fac3b3;
+  --color-coral-85: #fac7b7;
+  --color-coral-94: #fde9e2;
+  --color-warm-77: #ffbb8a;
+  --color-warm-87: #ffd8bd;
+  --color-warm-97: #fff6f0;
+  --color-sea-salt-57: #7fa4a4;
+  --color-sea-salt-67: #9db9b9;
+  --color-sea-salt-88: #dbe6e6;
+  --color-cloud-43: #447c97;
+  --color-cloud-75: #a7c7d7;
+  --color-cloud-88: #d5e4ec;
+  --color-ocean-38: #3c6286;
+  --color-ocean-75: #a7c0d7;
+  --color-ocean-88: #d5e1ec;
+  --color-sky-64: #68a5de;
+  --color-sky-75: #96c1e8;
+  --color-sky-85: #c0daf1;
+  --color-lukso-50: #aa5578;
+  --color-lukso-60: #bb7793;
+  --color-lukso-70: #cc99ae;
+  --color-lukso-80: #ddbbc9;
+  --color-lukso-90: #eedde4;
+  --color-yellow-25: #804d00;
+  --color-yellow-55: #ffa31a;
+  --color-yellow-65: #ffb84d;
+  --color-yellow-75: #ffcc80;
+  --color-yellow-85: #ffe0b3;
+  --color-yellow-95: #fff5e5;
+  --color-green-45: #31b452;
+  --color-green-54: #47cd68;
+  --color-green-63: #6bd686;
+  --color-green-75: #9be4ad;
+  --color-green-85: #c3efce;
+  --color-green-95: #ebfaef;
+  --color-blue-40: #0452c8;
+  --color-blue-50: #0567fa;
+  --color-blue-60: #3785fb;
+  --color-blue-75: #82b3fc;
+  --color-blue-85: #b4d1fd;
+  --color-blue-95: #e6f0fe;
+  --color-red-55: #e23636;
+  --color-red-65: #e96363;
+  --color-red-75: #ef8f8f;
+  --color-red-85: #f5bcbc;
+  --color-red-95: #fce9e9;
+  --color-purple-15: #1d202f;
+  --color-purple-18: #232739;
+  --color-purple-31: #3c4262;
+  --color-purple-41: #4f5882;
+  --color-purple-51: #646ea0;
+  --color-purple-58: #7a83ae;
+  --color-purple-63: #8a92b7;
+  --color-purple-82: #c6cadc;
+  --color-purple-94: #ecedf3;
+  --color-pink-90: #f8dad3;
+  --color-pink-91: #f9ddd7;
+  --color-pink-92: #f9e1dc;
+  --color-pink-93: #fae5e0;
+  --color-pink-94: #fbe9e5;
+  --color-pink-95: #fcece9;
+  --color-pink-96: #fcf0ed;
+  --color-pink-97: #fdf4f2;
+  --color-measure-50: #e8178a;
+  --color-measure-70: #f174b9;
+  --color-measure-80: #f6a2d0;
+  --color-measure-97: #fef1f8;
+  --color-grey-10: #1a1a1a;
+  --color-grey-15: #262626;
+  --color-grey-20: #333333;
+  --color-grey-25: #404040;
+  --color-grey-30: #4d4d4d;
+  --color-grey-35: #595959;
+  --color-grey-40: #666666;
+  --color-grey-45: #737373;
+  --color-grey-50: #808080;
+  --color-grey-55: #8c8c8c;
+  --color-grey-60: #999999;
+  --color-grey-65: #a6a6a6;
+  --color-grey-70: #b3b3b3;
+  --color-grey-75: #bfbfbf;
+  --color-grey-80: #cccccc;
+  --color-gradient-1-start: #D39B9D;
+  --color-gradient-1-end: #9071D1;
+  --color-gradient-2-start: #F8DAD3;
+  --color-gradient-2-end: #CC99AE;
+  --color-gradient-3-start: #393e56;
+  --color-gradient-3-end: #646ea0;
+}

package/tools/styles/colors.css

@@ -0,0 +1,120 @@
+/* DO NOT MODIFY MANUALLY. This file is auto generated by scripts/generate-styles.js */
+:root {
+  --neutral-10: #121b21;
+  --neutral-15: #1b2832;
+  --neutral-20: #243542;
+  --neutral-25: #2d4253;
+  --neutral-30: #365063;
+  --neutral-35: #3e5d74;
+  --neutral-40: #476a85;
+  --neutral-45: #507795;
+  --neutral-50: #5985a6;
+  --neutral-55: #6a91af;
+  --neutral-60: #7a9db8;
+  --neutral-65: #8ba9c1;
+  --neutral-70: #9cb6c9;
+  --neutral-75: #acc2d2;
+  --neutral-80: #bdcedb;
+  --neutral-85: #cddae4;
+  --neutral-90: #dee7ed;
+  --neutral-95: #eef3f6;
+  --neutral-97: #f5f8fa;
+  --neutral-98: #f8fafb;
+  --neutral-100: #ffffff;
+  --honey-72: #fad275;
+  --honey-75: #fbd784;
+  --honey-82: #fce2a6;
+  --honey-85: #fce7b5;
+  --honey-92: #fef2d8;
+  --coral-65: #f37c58;
+  --coral-74: #f69e83;
+  --coral-75: #f7a288;
+  --coral-84: #fac3b3;
+  --coral-85: #fac7b7;
+  --coral-94: #fde9e2;
+  --warm-77: #ffbb8a;
+  --warm-87: #ffd8bd;
+  --warm-97: #fff6f0;
+  --sea-salt-57: #7fa4a4;
+  --sea-salt-67: #9db9b9;
+  --sea-salt-88: #dbe6e6;
+  --cloud-43: #447c97;
+  --cloud-75: #a7c7d7;
+  --cloud-88: #d5e4ec;
+  --ocean-38: #3c6286;
+  --ocean-75: #a7c0d7;
+  --ocean-88: #d5e1ec;
+  --sky-64: #68a5de;
+  --sky-75: #96c1e8;
+  --sky-85: #c0daf1;
+  --lukso-50: #aa5578;
+  --lukso-60: #bb7793;
+  --lukso-70: #cc99ae;
+  --lukso-80: #ddbbc9;
+  --lukso-90: #eedde4;
+  --yellow-25: #804d00;
+  --yellow-55: #ffa31a;
+  --yellow-65: #ffb84d;
+  --yellow-75: #ffcc80;
+  --yellow-85: #ffe0b3;
+  --yellow-95: #fff5e5;
+  --green-45: #31b452;
+  --green-54: #47cd68;
+  --green-63: #6bd686;
+  --green-75: #9be4ad;
+  --green-85: #c3efce;
+  --green-95: #ebfaef;
+  --blue-40: #0452c8;
+  --blue-50: #0567fa;
+  --blue-60: #3785fb;
+  --blue-75: #82b3fc;
+  --blue-85: #b4d1fd;
+  --blue-95: #e6f0fe;
+  --red-55: #e23636;
+  --red-65: #e96363;
+  --red-75: #ef8f8f;
+  --red-85: #f5bcbc;
+  --red-95: #fce9e9;
+  --purple-15: #1d202f;
+  --purple-18: #232739;
+  --purple-31: #3c4262;
+  --purple-41: #4f5882;
+  --purple-51: #646ea0;
+  --purple-58: #7a83ae;
+  --purple-63: #8a92b7;
+  --purple-82: #c6cadc;
+  --purple-94: #ecedf3;
+  --pink-90: #f8dad3;
+  --pink-91: #f9ddd7;
+  --pink-92: #f9e1dc;
+  --pink-93: #fae5e0;
+  --pink-94: #fbe9e5;
+  --pink-95: #fcece9;
+  --pink-96: #fcf0ed;
+  --pink-97: #fdf4f2;
+  --measure-50: #e8178a;
+  --measure-70: #f174b9;
+  --measure-80: #f6a2d0;
+  --measure-97: #fef1f8;
+  --grey-10: #1a1a1a;
+  --grey-15: #262626;
+  --grey-20: #333333;
+  --grey-25: #404040;
+  --grey-30: #4d4d4d;
+  --grey-35: #595959;
+  --grey-40: #666666;
+  --grey-45: #737373;
+  --grey-50: #808080;
+  --grey-55: #8c8c8c;
+  --grey-60: #999999;
+  --grey-65: #a6a6a6;
+  --grey-70: #b3b3b3;
+  --grey-75: #bfbfbf;
+  --grey-80: #cccccc;
+  --gradient-1-start: #D39B9D;
+  --gradient-1-end: #9071D1;
+  --gradient-2-start: #F8DAD3;
+  --gradient-2-end: #CC99AE;
+  --gradient-3-start: #393e56;
+  --gradient-3-end: #646ea0;
+}