1mpacto-react-ui 0.1.7 → 0.1.9

package/dist/assets/_colors.scss

@@ -240,6 +240,26 @@ $laba-red-06: #FB004E;
 $laba-red-05: #FF5378;
 $laba-red-02: #FFAEBF;
 $laba-red-01: #FFEBEF;
+$lpd-primary-50: #CEDBFE;
+$lpd-primary-100: #B6CAFE;
+$lpd-primary-200: #9DB8FE;
+$lpd-primary-300: #6C94FD;
+$lpd-primary-400: #3B71FD;
+$lpd-primary-500: #0A4DFC;
+$lpd-primary-600: #083ECA;
+$lpd-primary-700: #062E97;
+$lpd-primary-800: #041F65;
+$lpd-primary-900: #03174C;
+$lpd-secondary-50: #FEF5CE;
+$lpd-secondary-100: #FEEFB5;
+$lpd-secondary-200: #FDEA9D;
+$lpd-secondary-300: #FDE06B;
+$lpd-secondary-400: #FCD53A;
+$lpd-secondary-500: #FBCB09;
+$lpd-secondary-600: #C9A207;
+$lpd-secondary-700: #977A05;
+$lpd-secondary-800: #645104;
+$lpd-secondary-900: #4B3D03;
 
 $color-map:(
 "transparent": transparent,
@@ -484,4 +504,24 @@ $color-map:(
 "laba-red-05": #FF5378,
 "laba-red-02": #FFAEBF,
 "laba-red-01": #FFEBEF,
+"lpd-primary-50": #CEDBFE,
+"lpd-primary-100": #B6CAFE,
+"lpd-primary-200": #9DB8FE,
+"lpd-primary-300": #6C94FD,
+"lpd-primary-400": #3B71FD,
+"lpd-primary-500": #0A4DFC,
+"lpd-primary-600": #083ECA,
+"lpd-primary-700": #062E97,
+"lpd-primary-800": #041F65,
+"lpd-primary-900": #03174C,
+"lpd-secondary-50": #FEF5CE,
+"lpd-secondary-100": #FEEFB5,
+"lpd-secondary-200": #FDEA9D,
+"lpd-secondary-300": #FDE06B,
+"lpd-secondary-400": #FCD53A,
+"lpd-secondary-500": #FBCB09,
+"lpd-secondary-600": #C9A207,
+"lpd-secondary-700": #977A05,
+"lpd-secondary-800": #645104,
+"lpd-secondary-900": #4B3D03,
 );

package/dist/assets/_mixins.scss

@@ -1,17 +1,17 @@
-@use 'sass:map';
-
-@mixin ring($width: 1px, $color: 'transparent', $inset: 0, $important: 0) {
-    $ring-style: 0 0 0 $width $color;
-    $shadow: if($inset == 1, inset $ring-style, $ring-style);
-
-    box-shadow: if($important == 1, $shadow !important , $shadow);
-}
-
-@function getColor($color-map, $color) {
-    @if map.has-key($color-map, $color) {
-        @return map.get($color-map, $color);
-    }
-    
-    @return $color;
-}
-
+@use 'sass:map';
+
+@mixin ring($width: 1px, $color: 'transparent', $inset: 0, $important: 0) {
+    $ring-style: 0 0 0 $width $color;
+    $shadow: if($inset == 1, inset $ring-style, $ring-style);
+
+    box-shadow: if($important == 1, $shadow !important , $shadow);
+}
+
+@function getColor($color-map, $color) {
+    @if map.has-key($color-map, $color) {
+        @return map.get($color-map, $color);
+    }
+    
+    @return $color;
+}
+

package/dist/assets/_typography.scss

@@ -3,273 +3,503 @@
   line-height: 72px;
   font-weight: 700;
 }
+@mixin text-payhere-h1() {
+  font-size: 60px;
+  line-height: 72px;
+  font-weight: 700;
+}
 
 .text-payhere-h2 {
   font-size: 48px;
   line-height: 58px;
   font-weight: 700;
 }
+@mixin text-payhere-h2() {
+  font-size: 48px;
+  line-height: 58px;
+  font-weight: 700;
+}
 
 .text-payhere-h3 {
   font-size: 40px;
   line-height: 48px;
   font-weight: 700;
 }
+@mixin text-payhere-h3() {
+  font-size: 40px;
+  line-height: 48px;
+  font-weight: 700;
+}
 
 .text-payhere-h4 {
   font-size: 30px;
   line-height: 38px;
   font-weight: 700;
 }
+@mixin text-payhere-h4() {
+  font-size: 30px;
+  line-height: 38px;
+  font-weight: 700;
+}
 
 .text-payhere-h5 {
   font-size: 28px;
   line-height: 40px;
   font-weight: 600;
 }
+@mixin text-payhere-h5() {
+  font-size: 28px;
+  line-height: 40px;
+  font-weight: 600;
+}
 
 .text-payhere-h6 {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
 }
+@mixin text-payhere-h6() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
 
 .text-payhere-body-lr {
   font-size: 18px;
   line-height: 26px;
   font-weight: 400;
 }
+@mixin text-payhere-body-lr() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-payhere-body-lm {
   font-size: 18px;
   line-height: 26px;
   font-weight: 500;
 }
+@mixin text-payhere-body-lm() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 500;
+}
 
 .text-payhere-body-ls {
   font-size: 18px;
   line-height: 26px;
   font-weight: 600;
 }
+@mixin text-payhere-body-ls() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
 
 .text-payhere-body-lb {
   font-size: 18px;
   line-height: 26px;
   font-weight: 700;
 }
+@mixin text-payhere-body-lb() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
 
 .text-payhere-body-mr {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 }
+@mixin text-payhere-body-mr() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
 
 .text-payhere-body-mm {
   font-size: 16px;
   line-height: 24px;
   font-weight: 500;
 }
+@mixin text-payhere-body-mm() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 500;
+}
 
 .text-payhere-body-ms {
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
 }
+@mixin text-payhere-body-ms() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
 
 .text-payhere-body-mb {
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
 }
+@mixin text-payhere-body-mb() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
 
 .text-payhere-label-r {
   font-size: 15px;
   line-height: 26px;
   font-weight: 400;
 }
+@mixin text-payhere-label-r() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-payhere-label-m {
   font-size: 15px;
   line-height: 26px;
   font-weight: 500;
 }
+@mixin text-payhere-label-m() {
+  font-size: 15px;
+  line-height: 26px;
+  font-weight: 500;
+}
 
 .text-payhere-body-sr {
   font-size: 14px;
   line-height: 22px;
   font-weight: 400;
 }
+@mixin text-payhere-body-sr() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 400;
+}
 
 .text-payhere-body-sm {
   font-size: 14px;
   line-height: 22px;
   font-weight: 500;
 }
+@mixin text-payhere-body-sm() {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 500;
+}
 
 .text-payhere-body-esr {
   font-size: 12px;
   line-height: 20px;
   font-weight: 400;
 }
+@mixin text-payhere-body-esr() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 400;
+}
 
 .text-payhere-body-esm {
   font-size: 12px;
   line-height: 20px;
   font-weight: 500;
 }
+@mixin text-payhere-body-esm() {
+  font-size: 12px;
+  line-height: 20px;
+  font-weight: 500;
+}
 
 .text-laba-title-lb {
   font-size: 36px;
   line-height: 44px;
   font-weight: 700;
 }
+@mixin text-laba-title-lb() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 700;
+}
 
 .text-laba-title-ls {
   font-size: 36px;
   line-height: 44px;
   font-weight: 600;
 }
+@mixin text-laba-title-ls() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 600;
+}
 
 .text-laba-title-lr {
   font-size: 36px;
   line-height: 44px;
   font-weight: 400;
 }
+@mixin text-laba-title-lr() {
+  font-size: 36px;
+  line-height: 44px;
+  font-weight: 400;
+}
 
 .text-laba-title-mb {
   font-size: 32px;
   line-height: 40px;
   font-weight: 700;
 }
+@mixin text-laba-title-mb() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 700;
+}
 
 .text-laba-title-ms {
   font-size: 32px;
   line-height: 40px;
   font-weight: 600;
 }
+@mixin text-laba-title-ms() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 600;
+}
 
 .text-laba-title-mr {
   font-size: 32px;
   line-height: 40px;
   font-weight: 400;
 }
+@mixin text-laba-title-mr() {
+  font-size: 32px;
+  line-height: 40px;
+  font-weight: 400;
+}
 
 .text-laba-h1 {
   font-size: 24px;
   line-height: 30px;
   font-weight: 700;
 }
+@mixin text-laba-h1() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
+}
 
 .text-laba-h1-b {
   font-size: 24px;
   line-height: 30px;
   font-weight: 700;
 }
+@mixin text-laba-h1-b() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 700;
+}
 
 .text-laba-h1-sb {
   font-size: 24px;
   line-height: 30px;
   font-weight: 600;
 }
+@mixin text-laba-h1-sb() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 600;
+}
 
 .text-laba-h1-r {
   font-size: 24px;
   line-height: 30px;
   font-weight: 400;
 }
+@mixin text-laba-h1-r() {
+  font-size: 24px;
+  line-height: 30px;
+  font-weight: 400;
+}
 
 .text-laba-h2 {
   font-size: 18px;
   line-height: 26px;
   font-weight: 700;
 }
+@mixin text-laba-h2() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
 
 .text-laba-h2-b {
   font-size: 18px;
   line-height: 26px;
   font-weight: 700;
 }
+@mixin text-laba-h2-b() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 700;
+}
 
 .text-laba-h2-sb {
   font-size: 18px;
   line-height: 26px;
   font-weight: 600;
 }
+@mixin text-laba-h2-sb() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 600;
+}
 
 .text-laba-h2-r {
   font-size: 18px;
   line-height: 26px;
   font-weight: 400;
 }
+@mixin text-laba-h2-r() {
+  font-size: 18px;
+  line-height: 26px;
+  font-weight: 400;
+}
 
 .text-laba-base-rb {
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
 }
+@mixin text-laba-base-rb() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 700;
+}
 
 .text-laba-base-rs {
   font-size: 16px;
   line-height: 24px;
   font-weight: 600;
 }
+@mixin text-laba-base-rs() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+}
 
 .text-laba-base-rr {
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
 }
+@mixin text-laba-base-rr() {
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+}
 
 .text-laba-base-sb {
   font-size: 14px;
   line-height: 20px;
   font-weight: 700;
 }
+@mixin text-laba-base-sb() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 700;
+}
 
 .text-laba-base-ss {
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
 }
+@mixin text-laba-base-ss() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+}
 
 .text-laba-base-sr {
   font-size: 14px;
   line-height: 20px;
   font-weight: 400;
 }
+@mixin text-laba-base-sr() {
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 400;
+}
 
 .text-laba-subtitle-rb {
   font-size: 12px;
   line-height: 16px;
   font-weight: 700;
 }
+@mixin text-laba-subtitle-rb() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 700;
+}
 
 .text-laba-subtitle-rs {
   font-size: 12px;
   line-height: 16px;
   font-weight: 600;
 }
+@mixin text-laba-subtitle-rs() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 600;
+}
 
 .text-laba-subtitle-rr {
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
 }
+@mixin text-laba-subtitle-rr() {
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 400;
+}
 
 .text-laba-subtitle-sb {
   font-size: 10px;
   line-height: 12px;
   font-weight: 700;
 }
+@mixin text-laba-subtitle-sb() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 700;
+}
 
 .text-laba-subtitle-ss {
   font-size: 10px;
   line-height: 12px;
   font-weight: 600;
 }
+@mixin text-laba-subtitle-ss() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 600;
+}
 
 .text-laba-subtitle-sr {
   font-size: 10px;
   line-height: 12px;
   font-weight: 400;
+}
+@mixin text-laba-subtitle-sr() {
+  font-size: 10px;
+  line-height: 12px;
+  font-weight: 400;
 }

package/dist/assets/colors.css

@@ -241,4 +241,24 @@
   --color-laba-red-05: #FF5378;
   --color-laba-red-02: #FFAEBF;
   --color-laba-red-01: #FFEBEF;
+  --color-lpd-primary-50: #CEDBFE;
+  --color-lpd-primary-100: #B6CAFE;
+  --color-lpd-primary-200: #9DB8FE;
+  --color-lpd-primary-300: #6C94FD;
+  --color-lpd-primary-400: #3B71FD;
+  --color-lpd-primary-500: #0A4DFC;
+  --color-lpd-primary-600: #083ECA;
+  --color-lpd-primary-700: #062E97;
+  --color-lpd-primary-800: #041F65;
+  --color-lpd-primary-900: #03174C;
+  --color-lpd-secondary-50: #FEF5CE;
+  --color-lpd-secondary-100: #FEEFB5;
+  --color-lpd-secondary-200: #FDEA9D;
+  --color-lpd-secondary-300: #FDE06B;
+  --color-lpd-secondary-400: #FCD53A;
+  --color-lpd-secondary-500: #FBCB09;
+  --color-lpd-secondary-600: #C9A207;
+  --color-lpd-secondary-700: #977A05;
+  --color-lpd-secondary-800: #645104;
+  --color-lpd-secondary-900: #4B3D03;
 }