1mpacto-react-ui 0.2.0-beta.2 → 0.2.0-beta.20

package/dist/assets/_colors.scss

@@ -1,3 +1,4 @@
+$transparent: transparent;
 $black: #212121;
 $white: #FFFFFF;
 $primary-50: #E3F2FD;
@@ -238,4 +239,289 @@ $laba-red-08: #ED0019;
 $laba-red-06: #FB004E;
 $laba-red-05: #FF5378;
 $laba-red-02: #FFAEBF;
-$laba-red-01: #FFEBEF;
+$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,
+"black": #212121,
+"white": #FFFFFF,
+"primary-50": #E3F2FD,
+"primary-100": #BBDEFB,
+"primary-200": #90CAF9,
+"primary-300": #64B5F6,
+"primary-400": #42A5F5,
+"primary-500": #2196F3,
+"primary-600": #1E88E5,
+"primary-700": #1976D2,
+"primary-800": #1565C0,
+"primary-900": #0D47A1,
+"blue-gray-50": #ECEFF1,
+"blue-gray-100": #CFD8DC,
+"blue-gray-200": #B0BEC5,
+"blue-gray-300": #90A4AE,
+"blue-gray-400": #78909C,
+"blue-gray-500": #607D8B,
+"blue-gray-600": #546E7A,
+"blue-gray-700": #455A64,
+"blue-gray-800": #37474F,
+"blue-gray-900": #263238,
+"gray-50": #FAFAFA,
+"gray-100": #F5F5F5,
+"gray-200": #EEEEEE,
+"gray-300": #E0E0E0,
+"gray-400": #BDBDBD,
+"gray-500": #9E9E9E,
+"gray-600": #757575,
+"gray-700": #616161,
+"gray-800": #424242,
+"gray-900": #212121,
+"brown-50": #EFEBE9,
+"brown-100": #D7CCC8,
+"brown-200": #BCAAA4,
+"brown-300": #A1887F,
+"brown-400": #8D6E63,
+"brown-500": #795548,
+"brown-600": #6D4C41,
+"brown-700": #5D4037,
+"brown-800": #4E342E,
+"brown-900": #3E2723,
+"deep-orange-50": #FBE9E7,
+"deep-orange-100": #FFCCBC,
+"deep-orange-200": #FFAB91,
+"deep-orange-300": #FF8A65,
+"deep-orange-400": #FF7043,
+"deep-orange-500": #FF5722,
+"deep-orange-600": #F4511E,
+"deep-orange-700": #E64A19,
+"deep-orange-800": #D84315,
+"deep-orange-900": #BF360C,
+"orange-50": #FFF3E0,
+"orange-100": #FFE0B2,
+"orange-200": #FFCC80,
+"orange-300": #FFB74D,
+"orange-400": #FFA726,
+"orange-500": #FF9800,
+"orange-600": #FB8C00,
+"orange-700": #F57C00,
+"orange-800": #EF6C00,
+"orange-900": #E65100,
+"amber-50": #FFF8E1,
+"amber-100": #FFECB3,
+"amber-200": #FFE082,
+"amber-300": #FFD54F,
+"amber-400": #FFCA28,
+"amber-500": #FFC107,
+"amber-600": #FFB300,
+"amber-700": #FFA000,
+"amber-800": #FF8F00,
+"amber-900": #FF6F00,
+"yellow-50": #FFFDE7,
+"yellow-100": #FFF9C4,
+"yellow-200": #FFF59D,
+"yellow-300": #FFF176,
+"yellow-400": #FFEE58,
+"yellow-500": #FFEB3B,
+"yellow-600": #FDD835,
+"yellow-700": #FBC02D,
+"yellow-800": #F9A825,
+"yellow-900": #F57F17,
+"lime-50": #F9FBE7,
+"lime-100": #F0F4C3,
+"lime-200": #E6EE9C,
+"lime-300": #DCE775,
+"lime-400": #D4E157,
+"lime-500": #CDDC39,
+"lime-600": #C0CA33,
+"lime-700": #AFB42B,
+"lime-800": #9E9D24,
+"lime-900": #827717,
+"light-green-50": #F1F8E9,
+"light-green-100": #DCEDC8,
+"light-green-200": #C5E1A5,
+"light-green-300": #AED581,
+"light-green-400": #9CCC65,
+"light-green-500": #8BC34A,
+"light-green-600": #7CB342,
+"light-green-700": #689F38,
+"light-green-800": #558B2F,
+"light-green-900": #33691E,
+"green-50": #E8F5E9,
+"green-100": #C8E6C9,
+"green-200": #A5D6A7,
+"green-300": #81C784,
+"green-400": #66BB6A,
+"green-500": #4CAF50,
+"green-600": #43A047,
+"green-700": #388E3C,
+"green-800": #2E7D32,
+"green-900": #1B5E20,
+"teal-50": #E0F2F1,
+"teal-100": #B2DFDB,
+"teal-200": #80CBC4,
+"teal-300": #4DB6AC,
+"teal-400": #26A69A,
+"teal-500": #009688,
+"teal-600": #00897B,
+"teal-700": #00796B,
+"teal-800": #00695C,
+"teal-900": #004D40,
+"cyan-50": #E0F7FA,
+"cyan-100": #B2EBF2,
+"cyan-200": #80DEEA,
+"cyan-300": #4DD0E1,
+"cyan-400": #26C6DA,
+"cyan-500": #00BCD4,
+"cyan-600": #00ACC1,
+"cyan-700": #0097A7,
+"cyan-800": #00838F,
+"cyan-900": #006064,
+"light-blue-50": #E1F5FE,
+"light-blue-100": #B3E5FC,
+"light-blue-200": #81D4FA,
+"light-blue-300": #4FC3F7,
+"light-blue-400": #29B6F6,
+"light-blue-500": #03A9F4,
+"light-blue-600": #039BE5,
+"light-blue-700": #0288D1,
+"light-blue-800": #0277BD,
+"light-blue-900": #01579B,
+"blue-50": #E3F2FD,
+"blue-100": #BBDEFB,
+"blue-200": #90CAF9,
+"blue-300": #64B5F6,
+"blue-400": #42A5F5,
+"blue-500": #2196F3,
+"blue-600": #1E88E5,
+"blue-700": #1976D2,
+"blue-800": #1565C0,
+"blue-900": #0D47A1,
+"indigo-50": #E8EAF6,
+"indigo-100": #C5CAE9,
+"indigo-200": #9FA8DA,
+"indigo-300": #7986CB,
+"indigo-400": #5C6BC0,
+"indigo-500": #3F51B5,
+"indigo-600": #3949AB,
+"indigo-700": #303F9F,
+"indigo-800": #283593,
+"indigo-900": #1A237E,
+"deep-purple-50": #EDE7F6,
+"deep-purple-100": #D1C4E9,
+"deep-purple-200": #B39DDB,
+"deep-purple-300": #9575CD,
+"deep-purple-400": #7E57C2,
+"deep-purple-500": #673AB7,
+"deep-purple-600": #5E35B1,
+"deep-purple-700": #512DA8,
+"deep-purple-800": #4527A0,
+"deep-purple-900": #311B92,
+"purple-50": #F3E5F5,
+"purple-100": #E1BEE7,
+"purple-200": #CE93D8,
+"purple-300": #BA68C8,
+"purple-400": #AB47BC,
+"purple-500": #9C27B0,
+"purple-600": #8E24AA,
+"purple-700": #7B1FA2,
+"purple-800": #6A1B9A,
+"purple-900": #4A148C,
+"pink-50": #FCE4EC,
+"pink-100": #F8BBD0,
+"pink-200": #F48FB1,
+"pink-300": #F06292,
+"pink-400": #EC407A,
+"pink-500": #E91E63,
+"pink-600": #D81B60,
+"pink-700": #C2185B,
+"pink-800": #AD1457,
+"pink-900": #880E4F,
+"red-50": #FFEBEE,
+"red-100": #FFCDD2,
+"red-200": #EF9A9A,
+"red-300": #E57373,
+"red-400": #EF5350,
+"red-500": #F44336,
+"red-600": #E53935,
+"red-700": #D32F2F,
+"red-800": #C62828,
+"red-900": #B71C1C,
+"payhere-brand-base": #102A4D,
+"payhere-brand-10": #CFD4DB,
+"payhere-brand-20": #AFB8C4,
+"payhere-brand-30": #8794A6,
+"payhere-brand-40": #607188,
+"payhere-brand-50": #384E6B,
+"payhere-brand-60": #0D2340,
+"laba-black": #212529,
+"laba-white": #FFFFFF,
+"laba-blue-10": #0163C8,
+"laba-blue-08": #006DFF,
+"laba-blue-06": #2899FF,
+"laba-blue-05": #73A4D6,
+"laba-blue-02": #DBECFF,
+"laba-blue-01": #F0F7FF,
+"laba-green-10": #038C67,
+"laba-green-08": #04BA27,
+"laba-green-06": #78D798,
+"laba-green-05": #ABF3CC,
+"laba-green-02": #CAEEE5,
+"laba-green-01": #DFF6F6,
+"laba-grey-10": #898989,
+"laba-grey-08": #AEAEAE,
+"laba-grey-06": #D6D6D6,
+"laba-grey-05": #EEEEEE,
+"laba-grey-02": #F2F2F2,
+"laba-grey-01": #FDFDFD,
+"laba-orange-10": #C05000,
+"laba-orange-08": #FF7200,
+"laba-orange-06": #FF9300,
+"laba-orange-05": #FFBD78,
+"laba-orange-02": #FFDDBB,
+"laba-orange-01": #FFF5EB,
+"laba-red-10": #9E101F,
+"laba-red-08": #ED0019,
+"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,
+);

package/dist/assets/_mixins.scss

@@ -0,0 +1,44 @@
+@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);
+}
+
+@mixin ring-left($width: 1px, $color: 'currentColor', $inset: 0, $important: 0) {
+    $ring-style: (-$width) 0 0 $color;
+    $shadow: if($inset==1, inset $ring-style, $ring-style);
+
+    box-shadow: if($important==1, $shadow !important, $shadow);
+}
+
+@mixin ring-top($width: 1px, $color: 'currentColor', $inset: 0, $important: 0) {
+    $ring-style: 0 (-$width) 0 $color;
+    $shadow: if($inset==1, inset $ring-style, $ring-style);
+
+    box-shadow: if($important==1, $shadow !important, $shadow);
+}
+
+@mixin ring-right($width: 1px, $color: 'currentColor', $inset: 0, $important: 0) {
+    $ring-style: $width 0 0 $color;
+    $shadow: if($inset==1, inset $ring-style, $ring-style);
+
+    box-shadow: if($important==1, $shadow !important, $shadow);
+}
+
+@mixin ring-bottom($width: 1px, $color: 'currentColor', $inset: 0, $important: 0) {
+    $ring-style: 0 $width 0 $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/_screen.scss

@@ -0,0 +1,6 @@
+$screen-sm-default: 640px;
+$screen-sm: 576px;
+$screen-md: 768px;
+$screen-lg: 1024px;
+$screen-xl: 1280px;
+$screen-2xl: 1536px;