@zap-wunschlachen/wl-shared-components 1.0.25 → 1.0.26

package/src/assets/css/base.css

@@ -1,235 +1,235 @@
-/* Outfit Thin (Weight 100) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Thin.ttf') format('truetype');
-  font-weight: 100;
-  font-style: normal;
-}
-
-/* Outfit ExtraLight (Weight 200) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
-  font-weight: 200;
-  font-style: normal;
-}
-
-/* Outfit Light (Weight 300) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Light.ttf') format('truetype');
-  font-weight: 300;
-  font-style: normal;
-}
-
-/* Outfit Regular (Weight 400) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
-  font-weight: 400;
-  font-style: normal;
-}
-
-/* Outfit Medium (Weight 500) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
-  font-weight: 500;
-  font-style: normal;
-}
-
-/* Outfit SemiBold (Weight 600) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
-  font-weight: 600;
-  font-style: normal;
-}
-
-/* Outfit Bold (Weight 700) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
-  font-weight: 700;
-  font-style: normal;
-}
-
-/* Outfit ExtraBold (Weight 800) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
-  font-weight: 800;
-  font-style: normal;
-}
-
-/* Outfit Black (Weight 900) */
-@font-face {
-  font-family: 'Outfit';
-  src: url('../fonts/Outfit-Black.ttf') format('truetype');
-  font-weight: 900;
-  font-style: normal;
-}
-
-body {
-  background: rgba(151, 169, 192, 0.151);
-  font-family: Outfit;
-  color: var(--Dental-Blue-0);
-}
-
-/* Base Heading Styles */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-style: normal;
-  font-weight: 600;
-  line-height: 120%;
-  color: var(--Dental-Blue-0);
-}
-
-h1 {
-  font-size: 65px;
-  line-height: normal;
-}
-
-h2 {
-  font-size: 32px;
-}
-
-h3 {
-  font-size: 16px;
-}
-
-h4 {
-  font-weight: 600;
-  font-size: 16px;
-}
-
-h5 {
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 105%;
-  letter-spacing: 0.24px;
-}
-
-h6 {
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 105%;
-  letter-spacing: 0.22px;
-}
-
-/* Base Paragraph Styles */
-p,
-.p-medium,
-.p-small,
-.p-large,
-.p-regular {
-  font-style: normal;
-  font-weight: 300;
-  line-height: 120%;
-  color: var(--Dental-Blue-0);
-}
-
-.p-medium {
-  font-size: 14px;
-  letter-spacing: 0.42px;
-}
-
-.p-small {
-  font-size: 11px;
-  letter-spacing: 0.22px;
-}
-
-.p-large {
-  font-size: 18px;
-  letter-spacing: 0.9px;
-}
-
-.p-regular {
-  font-size: 12px;
-  letter-spacing: 0.24px;
-}
-
-/* Responsive Media Queries */
-
-/* Tablet Styles (768px to 1200px) */
-@media (min-width: 768px) {
-  /* Headings */
-  h1 {
-    font-size: 45px;
-    line-height: 120%; /* 54px */
-    letter-spacing: -0.9px;
-  }
-
-  h2 {
-    font-size: 32px;
-    letter-spacing: -0.64px;
-  }
-
-  h3 {
-    font-size: 18px;
-    line-height: 120%; /* 21.6px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 18px;
-    letter-spacing: 0.9px;
-  }
-}
-
-/* Mobile Styles (up to 767px) */
-@media (max-width: 767px) {
-  /* Headings */
-  h1 {
-    font-size: 45px;
-    line-height: 120%; /* 54px */
-    letter-spacing: -0.9px;
-  }
-
-  h2 {
-    font-size: 25px;
-    line-height: 120%; /* 30px */
-    letter-spacing: -0.5px;
-  }
-
-  h3 {
-    font-size: 16px;
-    line-height: 120%; /* 19.2px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 16px;
-    line-height: 120%; /* 19.2px */
-  }
-}
-
-/* Large Screens (1200px and above) */
-@media (min-width: 1200px) {
-  /* Headings */
-  h1 {
-    font-size: 65px;
-    line-height: 120%; /* 78px */
-    letter-spacing: -1.3px;
-  }
-
-  h2 {
-    font-size: 32px;
-    line-height: 120%; /* 38.4px */
-  }
-
-  h3 {
-    font-size: 20px;
-    line-height: 120%; /* 24px */
-  }
-
-  /* Paragraphs */
-  .p-large {
-    font-size: 20px;
-    letter-spacing: 1px;
-  }
-}
+/* Outfit Thin (Weight 100) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/* Outfit ExtraLight (Weight 200) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-ExtraLight.ttf') format('truetype');
+  font-weight: 200;
+  font-style: normal;
+}
+
+/* Outfit Light (Weight 300) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/* Outfit Regular (Weight 400) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/* Outfit Medium (Weight 500) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+/* Outfit SemiBold (Weight 600) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}
+
+/* Outfit Bold (Weight 700) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+/* Outfit ExtraBold (Weight 800) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+}
+
+/* Outfit Black (Weight 900) */
+@font-face {
+  font-family: 'Outfit';
+  src: url('../fonts/Outfit-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+body {
+  background: rgba(151, 169, 192, 0.151);
+  font-family: Outfit;
+  color: var(--Dental-Blue-0);
+}
+
+/* Base Heading Styles */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-style: normal;
+  font-weight: 600;
+  line-height: 120%;
+  color: var(--Dental-Blue-0);
+}
+
+h1 {
+  font-size: 65px;
+  line-height: normal;
+}
+
+h2 {
+  font-size: 32px;
+}
+
+h3 {
+  font-size: 16px;
+}
+
+h4 {
+  font-weight: 600;
+  font-size: 16px;
+}
+
+h5 {
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 105%;
+  letter-spacing: 0.24px;
+}
+
+h6 {
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 105%;
+  letter-spacing: 0.22px;
+}
+
+/* Base Paragraph Styles */
+p,
+.p-medium,
+.p-small,
+.p-large,
+.p-regular {
+  font-style: normal;
+  font-weight: 300;
+  line-height: 120%;
+  color: var(--Dental-Blue-0);
+}
+
+.p-medium {
+  font-size: 14px;
+  letter-spacing: 0.42px;
+}
+
+.p-small {
+  font-size: 11px;
+  letter-spacing: 0.22px;
+}
+
+.p-large {
+  font-size: 18px;
+  letter-spacing: 0.9px;
+}
+
+.p-regular {
+  font-size: 12px;
+  letter-spacing: 0.24px;
+}
+
+/* Responsive Media Queries */
+
+/* Tablet Styles (768px to 1200px) */
+@media (min-width: 768px) {
+  /* Headings */
+  h1 {
+    font-size: 45px;
+    line-height: 120%; /* 54px */
+    letter-spacing: -0.9px;
+  }
+
+  h2 {
+    font-size: 32px;
+    letter-spacing: -0.64px;
+  }
+
+  h3 {
+    font-size: 18px;
+    line-height: 120%; /* 21.6px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 18px;
+    letter-spacing: 0.9px;
+  }
+}
+
+/* Mobile Styles (up to 767px) */
+@media (max-width: 767px) {
+  /* Headings */
+  h1 {
+    font-size: 45px;
+    line-height: 120%; /* 54px */
+    letter-spacing: -0.9px;
+  }
+
+  h2 {
+    font-size: 25px;
+    line-height: 120%; /* 30px */
+    letter-spacing: -0.5px;
+  }
+
+  h3 {
+    font-size: 16px;
+    line-height: 120%; /* 19.2px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 16px;
+    line-height: 120%; /* 19.2px */
+  }
+}
+
+/* Large Screens (1200px and above) */
+@media (min-width: 1200px) {
+  /* Headings */
+  h1 {
+    font-size: 65px;
+    line-height: 120%; /* 78px */
+    letter-spacing: -1.3px;
+  }
+
+  h2 {
+    font-size: 32px;
+    line-height: 120%; /* 38.4px */
+  }
+
+  h3 {
+    font-size: 20px;
+    line-height: 120%; /* 24px */
+  }
+
+  /* Paragraphs */
+  .p-large {
+    font-size: 20px;
+    letter-spacing: 1px;
+  }
+}

package/src/assets/css/variables.css

@@ -1,96 +1,107 @@
-:root {
-  /* Primary Dental Blue */
-  --Dental-Blue-0: #172774;
-  --Dental-Blue-1: #111c54;
-  --Dental-Blue--1: #4f5b95;
-  --Dental-Blue--2: #7079a8;
-  --Dental-Blue--3: #9198bc;
-  --Dental-Blue--4: #cacdde;
-  --Dental-Blue--5: #e5e6ee;
-  --Dental-Blue--6: #f6f6f8;
-
-  /* Primary Dental Light Blue */
-  --Dental-Light-Blue-4: #293e52;
-  --Dental-Light-Blue-3: #69849e;
-  --Dental-Light-Blue-2: #93b1cf;
-  --Dental-Light-Blue-1: #adcbe9;
-  --Dental-Light-Blue-0: #c5e1fc;
-  --Dental-Light-Blue--1: #dcecfc;
-  --Dental-Light-Blue--2: #edf5fc;
-  --Dental-Light-Blue--3: #f8fafd;
-
-  /* Primary Dental Air */
-  --Dental-Air-5: #2e3133;
-  --Dental-Air-4: #70767b;
-  --Dental-Air-3: #99a2a9;
-  --Dental-Air-2: #c5d1d9;
-  --Dental-Air-1: #dbe8f1;
-  --Dental-Air-0: #e4f2fb;
-  --Dental-Air--1: #f4f9fd;
-  --Dental-Air--2: #f9fbfd;
-
-  /* CTA */
-  --Power-Red-3: #1e050f;
-  --Power-Red-2: #4a0d26;
-  --Power-Red-1: #891747;
-  --Power-Red-0: #f4297e;
-  --Power-Red--1: #f769a5;
-  --Power-Red--2: #fa9fc5;
-  --Power-Red--3: #fcc9df;
-  --Power-Red--4: #feeaf2;
-
-  /* Tertiary Light Gum */
-  --Light-Gum-4: #1f1c1b;
-  --Light-Gum-3: #4c4444;
-  --Light-Gum-2: #b6a3a2;
-  --Light-Gum-1: #edd4d2;
-  --Light-Gum-0: #fce2df;
-  --Light-Gum--1: #fdeeec;
-  --Light-Gum--2: #fef3f2;
-  --Light-Gum--3: #fef9f9;
-
-  /* Tertiary Warm Light */
-  --Warm-Light-5: #10100e;
-  --Warm-Light-4: #34322e;
-  --Warm-Light-3: #5c5952;
-  --Warm-Light-2: #cec7b8;
-  --Warm-Light-1: #f0e8d6;
-  --Warm-Light-0: #fff6e4;
-  --Warm-Light--1: #fff8eb;
-  --Warm-Light--2: #fffbf4;
-
-  /* Tertiary Warm Light */
-  --Soft-Concrete-5: #1e1e1e;
-
-  --Soft-Concrete-4: #4a4a4b;
-  --Soft-Concrete-3: #676769;
-  --Soft-Concrete-2: #c1c1c2;
-  --Soft-Concrete-1: #dddddf;
-  --Soft-Concrete-0: #f5f5f7;
-  --Soft-Concrete--1: #f9f9fb;
-  --Soft-Concrete--2: #fbfbfc;
-
-  /* Error Red */
-  --Error-Red-1: #630112;
-  --Error-Red-0: #b00020;
-  --Error-Red--1: #e3a6b1;
-
-  /* Success Green */
-  --Success-Green-1: #037a72;
-  --Success-Green-0: #03dac6;
-  --Success-Green--1: #f3fdfc;
-
-  /* Warning */
-  --Warning-1: #4f4700;
-  --Warning-0: #ffe600;
-  --Warning--1: #fff8db;
-
-  /* Check */
-  --Check-1: #037a2c; /* Text color */
-  --Check-0: #01d449; /* Unused, but ready */
-  --Check--1: #d8fde4; /* Unused, but ready */
-
-  --Trkis: #bae6ea;
-  --Treatment-SkyBlue: #cce8fd;
-  --Treatment-Yellow: #fefdbd;
-}
+:root {
+  /* Primary Dental Blue */
+  --Dental-Blue-0: #172774;
+  --Dental-Blue-1: #111c54;
+  --Dental-Blue--1: #4f5b95;
+  --Dental-Blue--2: #7079a8;
+  --Dental-Blue--3: #9198bc;
+  --Dental-Blue--4: #cacdde;
+  --Dental-Blue--5: #e5e6ee;
+  --Dental-Blue--6: #f6f6f8;
+
+  /* Primary Dental Light Blue */
+  --Dental-Light-Blue-4: #293e52;
+  --Dental-Light-Blue-3: #69849e;
+  --Dental-Light-Blue-2: #93b1cf;
+  --Dental-Light-Blue-1: #adcbe9;
+  --Dental-Light-Blue-0: #c5e1fc;
+  --Dental-Light-Blue--1: #dcecfc;
+  --Dental-Light-Blue--2: #edf5fc;
+  --Dental-Light-Blue--3: #f8fafd;
+
+  /* Primary Dental Air */
+  --Dental-Air-5: #2e3133;
+  --Dental-Air-4: #70767b;
+  --Dental-Air-3: #99a2a9;
+  --Dental-Air-2: #c5d1d9;
+  --Dental-Air-1: #dbe8f1;
+  --Dental-Air-0: #e4f2fb;
+  --Dental-Air--1: #f4f9fd;
+  --Dental-Air--2: #f9fbfd;
+
+  /* CTA */
+  --Power-Red-3: #1e050f;
+  --Power-Red-2: #4a0d26;
+  --Power-Red-1: #891747;
+  --Power-Red-0: #f4297e;
+  --Power-Red--1: #f769a5;
+  --Power-Red--2: #fa9fc5;
+  --Power-Red--3: #fcc9df;
+  --Power-Red--4: #feeaf2;
+
+  /* Tertiary Light Gum */
+  --Light-Gum-4: #1f1c1b;
+  --Light-Gum-3: #4c4444;
+  --Light-Gum-2: #b6a3a2;
+  --Light-Gum-1: #edd4d2;
+  --Light-Gum-0: #fce2df;
+  --Light-Gum--1: #fdeeec;
+  --Light-Gum--2: #fef3f2;
+  --Light-Gum--3: #fef9f9;
+
+  /* Tertiary Warm Light */
+  --Warm-Light-5: #10100e;
+  --Warm-Light-4: #34322e;
+  --Warm-Light-3: #5c5952;
+  --Warm-Light-2: #cec7b8;
+  --Warm-Light-1: #f0e8d6;
+  --Warm-Light-0: #fff6e4;
+  --Warm-Light--1: #fff8eb;
+  --Warm-Light--2: #fffbf4;
+
+  /* Tertiary Warm Air */
+  --Warm-Air--3: #fffbf4;
+  --Warm-Air--4: #fffdfa;
+
+  /* Tertiary Soft Concrete */
+  --Soft-Concrete-5: #1e1e1e;
+
+  --Soft-Concrete-4: #4a4a4b;
+  --Soft-Concrete-3: #676769;
+  --Soft-Concrete-2: #c1c1c2;
+  --Soft-Concrete-1: #dddddf;
+  --Soft-Concrete-0: #f5f5f7;
+  --Soft-Concrete--1: #f9f9fb;
+  --Soft-Concrete--2: #fbfbfc;
+
+  /* Error Red */
+  --Error-Red-1: #630112;
+  --Error-Red-0: #b00020;
+  --Error-Red--1: #e3a6b1;
+
+  /* Success Green */
+  --Success-Green-1: #037a72;
+  --Success-Green-0: #03dac6;
+  --Success-Green--1: #f3fdfc;
+
+  /* Warning */
+  --Warning-1: #4f4700;
+  --Warning-0: #ffe600;
+  --Warning--1: #fff8db;
+
+  /* Check */
+  --Check-1: #037a2c; /* Text color */
+  --Check-0: #01d449; /* Unused, but ready */
+  --Check--1: #d8fde4; /* Unused, but ready */
+
+  --Trkis: #bae6ea;
+  --Treatment-SkyBlue: #cce8fd;
+  --Treatment-Yellow: #fefdbd;
+
+  /*White Cocoon*/
+  --Light-Nude-3: #fffcf8;
+  --Dark-Nude-0: #c4aea1;
+  --Night-Nude-0: #a1978f;
+  --Dark-Nude-2: #7F7168;
+  --Dark-Nude-3: #453D39;
+}