@enki-tek/fms-web-components 0.0.59 → 0.0.60

package/components/Accordion/Accordion.svelte

@@ -53,7 +53,7 @@ export let stayOpen = true;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -249,7 +249,7 @@ export let stayOpen = true;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -438,7 +438,7 @@ export let stayOpen = true;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Accordion/AccordionItem.svelte

@@ -54,7 +54,7 @@ export let header;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -250,7 +250,7 @@ export let header;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -439,7 +439,7 @@ export let header;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Badge/Badge.svelte

@@ -59,7 +59,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -255,7 +255,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -444,7 +444,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Breadcrumb/Breadcrumb.svelte

@@ -69,7 +69,7 @@ let length = newBreadcrumbs.length;
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -265,7 +265,7 @@ let length = newBreadcrumbs.length;
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -454,7 +454,7 @@ let length = newBreadcrumbs.length;
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/Button.scss

@@ -106,10 +106,10 @@
 
 // secondary color hover and acitve
 .ebg-secondary{
-  background-color: $secondary !important;
+  background-color: $secondary;
 }
 .ebg-secondary:hover,.ebg-secondary:focus {
-  background-color: $secondary-light;
+  background-color: $secondary-dark;
   transition: all $transitionTimeHover;
 }
 
@@ -726,45 +726,156 @@
 }
 
 
+
 //outline classess
 .eoutline-secondary {
   outline: 1px solid $secondary;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-secondaryDark {
   outline: 1px solid $secondary-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-secondaryLight {
   outline: 1px solid $secondary-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $secondary-light;
+    color: $secondary-dark;
+  }
 }
 
 .eoutline-primary {
   outline: 1px solid $primary;
+    background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-primaryDark {
   outline: 1px solid $primary-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-primaryLight {
   outline: 1px solid $primary-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $primary-light;
+    color: $primary-dark;
+  }
 }
 
 .eoutline-danger {
   outline: 1px solid $danger;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-dangerDark {
   outline: 1px solid $danger-dark;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-dangerLight {
   outline: 1px solid $danger-light;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $danger-light;
+    color: $danger-dark;
+  }
 }
 
 .eoutline-success {
   outline: 1px solid $success;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $success-light;
+    color: $success-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $success-light;
+    color: $success-dark;
+  }
 }
 
 .eoutline-successDark {
@@ -777,6 +888,17 @@
 
 .eoutline-info {
   outline: 1px solid $info;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $info-light;
+    color: $info-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $info-light;
+    color: $info-dark;
+  }
 }
 
 .eoutline-infoDark {
@@ -789,6 +911,17 @@
 
 .eoutline-warning {
   outline: 1px solid $warning;
+  background-color: $white;
+  &:hover{
+    transition: all $transitionTimeHover;
+    background-color: $warning-light;
+    color: $warning-dark;
+  }
+  &:focus{
+    transition: all $transitionTimeHover;
+    background-color: $warning-light;
+    color: $warning-dark;
+  }
 }
 
 .eoutline-warningDark {

package/components/Button/Button.svelte

@@ -126,10 +126,10 @@
   color: #000000 !important;
 }
 .ebg-secondary {
-  background-color: #3AC82E !important;
+  background-color: #3AC82E;
 }
 .ebg-secondary:hover, .ebg-secondary:focus {
-  background-color: #CBFFC7;
+  background-color: #00A855;
   transition: all 0.3s;
 }
 .ebg-secondaryDark {
@@ -183,7 +183,7 @@
   background-color: #FE4747;
 }
 .ebg-dangerLight {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 .ebg-dangerLight:hover, .ebg-dangerLight:focus {
   transition: all 0.3s;
@@ -420,7 +420,7 @@
   color: #B02A37;
 }
 .etext-dangerLight {
-  color: #FE4747;
+  color: #f8d7da;
 }
 .etext-info {
   color: #0DCAF0;
@@ -586,33 +586,143 @@
 }
 .eoutline-secondary {
   outline: 1px solid #3AC82E;
+  background-color: #ffffff;
+}
+.eoutline-secondary:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondary:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-secondaryDark {
   outline: 1px solid #00A855;
+  background-color: #ffffff;
+}
+.eoutline-secondaryDark:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondaryDark:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-secondaryLight {
   outline: 1px solid #CBFFC7;
+  background-color: #ffffff;
+}
+.eoutline-secondaryLight:hover {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
+}
+.eoutline-secondaryLight:focus {
+  transition: all 0.3s;
+  background-color: #CBFFC7;
+  color: #00A855;
 }
 .eoutline-primary {
   outline: 1px solid #00AEE5;
+  background-color: #ffffff;
+}
+.eoutline-primary:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primary:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-primaryDark {
   outline: 1px solid #007FD8;
+  background-color: #ffffff;
+}
+.eoutline-primaryDark:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primaryDark:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-primaryLight {
   outline: 1px solid #CEF3FF;
+  background-color: #ffffff;
+}
+.eoutline-primaryLight:hover {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
+}
+.eoutline-primaryLight:focus {
+  transition: all 0.3s;
+  background-color: #CEF3FF;
+  color: #007FD8;
 }
 .eoutline-danger {
   outline: 1px solid #FE4747;
+  background-color: #ffffff;
+}
+.eoutline-danger:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-danger:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-dangerDark {
   outline: 1px solid #B02A37;
+  background-color: #ffffff;
+}
+.eoutline-dangerDark:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-dangerDark:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-dangerLight {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
+  background-color: #ffffff;
+}
+.eoutline-dangerLight:hover {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
+}
+.eoutline-dangerLight:focus {
+  transition: all 0.3s;
+  background-color: #f8d7da;
+  color: #B02A37;
 }
 .eoutline-success {
   outline: 1px solid #00A96B;
+  background-color: #ffffff;
+}
+.eoutline-success:hover {
+  transition: all 0.3s;
+  background-color: #D1E7DD;
+  color: #146C43;
+}
+.eoutline-success:focus {
+  transition: all 0.3s;
+  background-color: #D1E7DD;
+  color: #146C43;
 }
 .eoutline-successDark {
   outline: 1px solid #146C43;
@@ -622,6 +732,17 @@
 }
 .eoutline-info {
   outline: 1px solid #0DCAF0;
+  background-color: #ffffff;
+}
+.eoutline-info:hover {
+  transition: all 0.3s;
+  background-color: #9EEAF9;
+  color: #087990;
+}
+.eoutline-info:focus {
+  transition: all 0.3s;
+  background-color: #9EEAF9;
+  color: #087990;
 }
 .eoutline-infoDark {
   outline: 1px solid #087990;
@@ -631,6 +752,17 @@
 }
 .eoutline-warning {
   outline: 1px solid #FFBA3A;
+  background-color: #ffffff;
+}
+.eoutline-warning:hover {
+  transition: all 0.3s;
+  background-color: #FFF3CD;
+  color: #997404;
+}
+.eoutline-warning:focus {
+  transition: all 0.3s;
+  background-color: #FFF3CD;
+  color: #997404;
 }
 .eoutline-warningDark {
   outline: 1px solid #997404;
@@ -669,7 +801,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -865,7 +997,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -1054,7 +1186,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/ButtonFilter.svelte

@@ -118,7 +118,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -314,7 +314,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -503,7 +503,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/FilterOption.svelte

@@ -104,7 +104,7 @@
   background-color: #B02A37;
 }
 :global(.ebg-dangerLight) {
-  background-color: #FE4747;
+  background-color: #f8d7da;
 }
 :global(.ebg-warning) {
   background-color: #FFBA3A;
@@ -300,7 +300,7 @@
   color: #B02A37;
 }
 :global(.etext-dangerLight) {
-  color: #FE4747;
+  color: #f8d7da;
 }
 :global(.etext-info) {
   color: #0DCAF0;
@@ -489,7 +489,7 @@
   outline: 1px solid #B02A37;
 }
 :global(.eoutline-dangerLight) {
-  outline: 1px solid #FE4747;
+  outline: 1px solid #f8d7da;
 }
 :global(.eoutline-success) {
   outline: 1px solid #00A96B;

package/components/Button/buttonConfig.js

@@ -94,109 +94,91 @@ export const buttonConfig = {
 
     "secondaryOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary",
     ],
     "secondaryOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary"
     ],
     "secondaryOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-secondary",
       "eoutline-secondary"
     ],
     "primaryOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "primaryOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "primaryOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-primary",
       "eoutline-primary"
     ],
     "infoOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "infoOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "infoOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-info",
       "eoutline-info"
     ],
     "warningOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "warningOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "warningOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-warning",
       "eoutline-warning"
     ],
     "dangerOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "dangerOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "dangerOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-danger",
       "eoutline-danger"
     ],
     "successOutlineBtnLarge" :[
       "ebtn-large",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],
     "successOutlineBtnMedium" :[
       "ebtn-medium",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],
     "successOutlineBtnSmall" :[
       "ebtn-small",
-      "ebg-none",
       "etext-success",
       "eoutline-success"
     ],