@enki-tek/fms-web-components 0.0.72 → 0.0.74

package/components/Button/Button.svelte

@@ -12,9 +12,9 @@
 	export let id='';
 	export let  actived={state:false,color:'danger'};
 
-	let buttonStyles = [className];
+	let buttonStyles = [className,`ebg-active-${actived.state === true ?  actived.color : ''}`];
 	if (buttonConfig.hasOwnProperty(config)) {
-		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`,`ebg-${actived.state === true ?  actived.color : ''}`, `eoutline-${outlineShade}`, `ebtn-${size}`,`ebtn-${shade}:hover`,`ebtn-${shade}:focus` ,`disabled`,className];
+		buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`,`ebtn-${shade}:hover`,`ebtn-${shade}:focus` ,`disabled`,className];
 	}
 
 	// icon button
@@ -47,6 +47,9 @@
 @import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
 .ebtn {
   background-color: #ffffff;
   color: black;
@@ -1332,4 +1335,77 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+.ebg-active-secondary {
+  background-color: #3AC82E;
+  color: #ffffff;
+}
+.ebg-active-secondaryDark {
+  background-color: #00A855;
+  color: #ffffff;
+}
+.ebg-active-secondaryLight {
+  background-color: #CBFFC7;
+  color: #ffffff;
+}
+.ebg-active-primary {
+  background-color: #00AEE5;
+  color: #ffffff;
+}
+.ebg-active-primaryDark {
+  background-color: #007FD8;
+  color: #ffffff;
+}
+.ebg-active-primaryLight {
+  background-color: #CEF3FF;
+  color: #ffffff;
+}
+.ebg-active-danger {
+  background-color: #FE4747;
+  color: #ffffff;
+}
+.ebg-active-dangerDark {
+  background-color: #B02A37;
+  color: #ffffff;
+}
+.ebg-active-dangerLight {
+  background-color: #f8d7da;
+  color: #ffffff;
+}
+.ebg-active-warning {
+  background-color: #FFBA3A;
+  color: #ffffff;
+}
+.ebg-active-warningDark {
+  background-color: #997404;
+  color: #ffffff;
+  color: #ffffff !important;
+}
+.ebg-active-warningLight {
+  background-color: #FFF3CD;
+  color: #ffffff;
+}
+.ebg-active-info {
+  background-color: #0DCAF0;
+  color: #ffffff;
+}
+.ebg-active-infoDark {
+  background-color: #087990;
+  color: #ffffff;
+}
+.ebg-active-infoLight {
+  background-color: #9EEAF9;
+  color: #ffffff;
+}
+.ebg-active-success {
+  background-color: #00A96B;
+  color: #ffffff;
+}
+.ebg-active-successDark {
+  background-color: #146C43;
+  color: #ffffff;
+}
+.ebg-active-successLight {
+  background-color: #D1E7DD;
+  color: #ffffff;
 }</style>

package/components/Button/ButtoonActiveClass.scss

@@ -0,0 +1,81 @@
+@import './../variable.scss';
+
+
+
+  .ebg-active-secondary{
+    background-color: $secondary;
+    color: $white;
+  }
+
+  .ebg-active-secondaryDark{
+    background-color: $secondary-dark;
+    color: $white;
+  }
+
+  .ebg-active-secondaryLight{
+    background-color: $secondary-light;
+    color: $white;
+  }
+
+  .ebg-active-primary {
+    background-color: $primary;
+    color: $white;
+  }
+
+  .ebg-active-primaryDark {
+    background-color: $primary-dark;
+    color: $white;
+  }
+  .ebg-active-primaryLight {
+    background-color: $primary-light;
+    color: $white;
+  }
+  .ebg-active-danger {
+    background-color: $danger ;
+    color: $white;
+  }
+  .ebg-active-dangerDark {
+    background-color: $danger-dark;
+    color: $white;
+  }
+  .ebg-active-dangerLight {
+    background-color: $danger-light;
+    color: $white;
+  }
+  .ebg-active-warning {
+    background-color: $warning;
+    color: $white;
+  }
+  .ebg-active-warningDark {
+    background-color: $warning-dark;
+    color: $white;
+    color: $white !important;
+  }
+  .ebg-active-warningLight {
+    background-color: $warning-light;
+    color: $white;
+  }
+  .ebg-active-info {
+    background-color: $info;
+    color: $white;
+  }
+  .ebg-active-infoDark {
+    background-color: $info-dark;
+    color: $white;
+  }
+  .ebg-active-infoLight {
+    background-color: $info-light;
+    color: $white;
+  }
+  .ebg-active-success {
+    background-color: $success;
+    color: $white;
+  }
+  .ebg-active-successDark {
+    background-color: $success-dark;
+    color: $white;
+  }
+  .ebg-active-successLight {
+    background-color: $success-light;
+    color: $white;
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.72",
+  "version": "0.0.74",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -60,6 +60,7 @@
     "./components/Button/Button.scss": "./components/Button/Button.scss",
     "./components/Button/Button.stories": "./components/Button/Button.stories.js",
     "./components/Button/Button.svelte": "./components/Button/Button.svelte",
+    "./components/Button/ButtoonActiveClass.scss": "./components/Button/ButtoonActiveClass.scss",
     "./components/Button/buttonConfig": "./components/Button/buttonConfig.js",
     "./components/Card/Card.scss": "./components/Card/Card.scss",
     "./components/Card/Card.stories": "./components/Card/Card.stories.js",