sling-web-component-button - npm Package Compare versions

Comparing version 1.11.6 to 1.11.7

dist/cjs/es5/component/Button.js

@@ -6,3 +6,3 @@ "use strict";
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-btn {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  padding: calc(16px - var(--sling-button-border-width, 1px)) calc(24px - var(--sling-button-border-width, 1px));\n  width: 100%;\n  height: 100%;\n  outline: none;\n  border-width: var(--sling-button-border-width, 1px);\n  border-style: solid;\n  border-radius: var(--sling-button-border-radius, 2px);\n  background-color: transparent;\n  color: #fff;\n  fill: #fff;\n  font-size: 14px;\n  line-height: 21px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.emd-btn_layout_text {\n  padding: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_slim {\n  padding-top: calc(8px - var(--sling-button-border-width, 1px));\n  padding-bottom: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_disabled {\n  cursor: not-allowed;\n}\n\n.emd-btn_size_small {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.emd-btn_size_big {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n/* default */\n\n.emd-btn {\n  border-color: #2d3844;\n  background-color: #2d3844;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\n.emd-btn:active {\n  border-color: #0c1219;\n}\n\n.emd-btn:active {\n  background-color: #0c1219;\n}\n\n.emd-btn.emd-btn_layout_outline,\n.emd-btn.emd-btn_layout_text {\n  color: #2d3844;\n  fill: #2d3844;\n}\n\n.emd-btn.emd-btn_layout_outline:hover,\n.emd-btn.emd-btn_layout_outline:focus,\n.emd-btn.emd-btn_layout_outline:active,\n.emd-btn.emd-btn_layout_text:hover,\n.emd-btn.emd-btn_layout_text:focus,\n.emd-btn.emd-btn_layout_text:active {\n  color: #0c1219;\n  fill: #0c1219;\n}\n\n.emd-btn.emd-btn_layout_outline:active {\n  background-color: rgba(150, 160, 175, 0.2);\n}\n\n/* primary */\n\n.emd-btn_color_primary {\n  border-color: var(--sling-button-primary-color, #95c93d);\n  background-color: var(--sling-button-primary-color, #95c93d);\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_primary:hover,\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:active {\n  border-color: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary:active {\n  background-color: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline,\n.emd-btn_color_primary.emd-btn_layout_text {\n  color: var(--sling-button-primary-color, #95c93d);\n  fill: var(--sling-button-primary-color, #95c93d);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:hover,\n.emd-btn_color_primary.emd-btn_layout_outline:focus,\n.emd-btn_color_primary.emd-btn_layout_outline:active,\n.emd-btn_color_primary.emd-btn_layout_text:hover,\n.emd-btn_color_primary.emd-btn_layout_text:focus,\n.emd-btn_color_primary.emd-btn_layout_text:active {\n  color: var(--sling-button-primary-highlight-color, #7aa436);\n  fill: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:active {\n  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));\n}\n\n/* success */\n\n.emd-btn_color_success {\n  border-color: #2ecc71;\n  background-color: #2ecc71;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_success:hover,\n.emd-btn_color_success:focus,\n.emd-btn_color_success:active {\n  border-color: #27a75f;\n}\n\n.emd-btn_color_success:active {\n  background-color: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline,\n.emd-btn_color_success.emd-btn_layout_text {\n  color: #2ecc71;\n  fill: #2ecc71;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:hover,\n.emd-btn_color_success.emd-btn_layout_outline:focus,\n.emd-btn_color_success.emd-btn_layout_outline:active,\n.emd-btn_color_success.emd-btn_layout_text:hover,\n.emd-btn_color_success.emd-btn_layout_text:focus,\n.emd-btn_color_success.emd-btn_layout_text:active {\n  color: #27a75f;\n  fill: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:active {\n  background-color: rgba(46, 204, 113, 0.2);\n}\n\n/* danger */\n\n.emd-btn_color_danger {\n  border-color: #e74c3c;\n  background-color: #e74c3c;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_danger:hover,\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:active {\n  border-color: #bb4035;\n}\n\n.emd-btn_color_danger:active {\n  background-color: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline,\n.emd-btn_color_danger.emd-btn_layout_text {\n  color: #e74c3c;\n  fill: #e74c3c;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:hover,\n.emd-btn_color_danger.emd-btn_layout_outline:focus,\n.emd-btn_color_danger.emd-btn_layout_outline:active,\n.emd-btn_color_danger.emd-btn_layout_text:hover,\n.emd-btn_color_danger.emd-btn_layout_text:focus,\n.emd-btn_color_danger.emd-btn_layout_text:active {\n  color: #bb4035;\n  fill: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:active {\n  background-color: rgba(231, 76, 60, 0.2);\n}\n\n/* light */\n\n.emd-btn_color_light {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #2d3844;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light:hover,\n.emd-btn_color_light:focus,\n.emd-btn_color_light:active {\n  border-color: #fff;\n}\n\n.emd-btn_color_light:active {\n  background-color: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline,\n.emd-btn_color_light.emd-btn_layout_text {\n  color: #ebebf0;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:hover,\n.emd-btn_color_light.emd-btn_layout_outline:focus,\n.emd-btn_color_light.emd-btn_layout_outline:active,\n.emd-btn_color_light.emd-btn_layout_text:hover,\n.emd-btn_color_light.emd-btn_layout_text:focus,\n.emd-btn_color_light.emd-btn_layout_text:active {\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:active {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n/* disabled */\n\n.emd-btn_disabled,\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline,\n.emd-btn_disabled.emd-btn_layout_text {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n  background-color: transparent;\n}\n\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  border-color: transparent;\n}\n\n/* outline and text */\n\n.emd-btn_layout_outline,\n.emd-btn_layout_text {\n  background-color: transparent;\n}\n\n.emd-btn_layout_text,\n.emd-btn_layout_text:hover,\n.emd-btn_layout_text:focus,\n.emd-btn_layout_text:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n:host {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n:host slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* for compatibility */\n\nsling-button {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nsling-button > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\nsling-button slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n      </style>\n      <button type=\"", "\" className=\"", "\" disabled=", ">\n        <span onclick=\"", "\">\n          <slot></slot>\n        </span>\n      </button>\n    "]);
+  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-btn {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  padding: calc(16px - var(--sling-button-border-width, 1px)) calc(24px - var(--sling-button-border-width, 1px));\n  width: 100%;\n  height: 100%;\n  outline: none;\n  border-width: var(--sling-button-border-width, 1px);\n  border-style: solid;\n  border-radius: var(--sling-button-border-radius, 2px);\n  background-color: transparent;\n  color: #fff;\n  fill: #fff;\n  font-size: 14px;\n  line-height: 21px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.emd-btn_layout_text {\n  padding: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_slim {\n  padding-top: calc(8px - var(--sling-button-border-width, 1px));\n  padding-bottom: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_disabled {\n  cursor: not-allowed;\n}\n\n.emd-btn_size_small {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.emd-btn_size_big {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n/* default */\n\n.emd-btn {\n  border-color: var(--sling-button-border-color,#2d3844);\n  background-color: var(--sling-button-background-color,#2d3844);\n  color: var(--sling-button-text-color,#fff);\n  fill: var(--sling-button-text-color,#fff);\n}\n\n.emd-btn:active {\n  filter: brightness(80%);\n}\n\n.emd-btn:hover,\n.emd-btn:focus {\n  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2);\n}\n\n.emd-btn.emd-btn_layout_outline {\n  color: var(--sling-button-text-color,var(--sling-button-border-color));\n  fill: var(--sling-button-text-color,var(--sling-button-border-color));\n}\n\n.emd-btn.emd-btn_layout_text{\n  color: var(--sling-button-text-color,#2d3844);\n  fill: var(--sling-button-text-color,#2d3844);\n}\n\n.emd-btn.emd-btn_layout_outline:hover,\n.emd-btn.emd-btn_layout_outline:focus,\n.emd-btn.emd-btn_layout_outline:active,\n.emd-btn.emd-btn_layout_text:hover,\n.emd-btn.emd-btn_layout_text:focus,\n.emd-btn.emd-btn_layout_text:active {\n  box-shadow:none;\n  filter: brightness(70%);\n}\n\n.emd-btn.emd-btn_layout_outline:active {\n  background-color: rgba(150, 160, 175, 0.2);\n}\n\n/* primary */\n\n.emd-btn_color_primary {\n  border-color: var(--sling-button-primary-color, #0DB14B);\n  background-color: var(--sling-button-primary-color, #0DB14B);\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_primary:active {\n  background-color: var(--sling-button-primary-highlight-color, #0C9141);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline,\n.emd-btn_color_primary.emd-btn_layout_text {\n  color: var(--sling-button-primary-color, #0DB14B);\n  fill: var(--sling-button-primary-color, #0DB14B);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:hover,\n.emd-btn_color_primary.emd-btn_layout_outline:focus,\n.emd-btn_color_primary.emd-btn_layout_outline:active,\n.emd-btn_color_primary.emd-btn_layout_text:hover,\n.emd-btn_color_primary.emd-btn_layout_text:focus,\n.emd-btn_color_primary.emd-btn_layout_text:active {\n  color: var(--sling-button-primary-highlight-color, #0C9141);\n  fill: var(--sling-button-primary-highlight-color, #0C9141);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:active {\n  background-color: var(--sling-button-primary-active-color, rgba(12, 145, 65, 0.2));\n}\n\n/* success */\n\n.emd-btn_color_success {\n  border-color: #2ecc71;\n  background-color: #2ecc71;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_success:active {\n  background-color: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline,\n.emd-btn_color_success.emd-btn_layout_text {\n  color: #2ecc71;\n  fill: #2ecc71;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:hover,\n.emd-btn_color_success.emd-btn_layout_outline:focus,\n.emd-btn_color_success.emd-btn_layout_outline:active,\n.emd-btn_color_success.emd-btn_layout_text:hover,\n.emd-btn_color_success.emd-btn_layout_text:focus,\n.emd-btn_color_success.emd-btn_layout_text:active {\n  color: #27a75f;\n  fill: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:active {\n  background-color: rgba(46, 204, 113, 0.2);\n}\n\n/* danger */\n\n.emd-btn_color_danger {\n  border-color: #e74c3c;\n  background-color: #e74c3c;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_danger:active {\n  background-color: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline,\n.emd-btn_color_danger.emd-btn_layout_text {\n  color: #e74c3c;\n  fill: #e74c3c;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:hover,\n.emd-btn_color_danger.emd-btn_layout_outline:focus,\n.emd-btn_color_danger.emd-btn_layout_outline:active,\n.emd-btn_color_danger.emd-btn_layout_text:hover,\n.emd-btn_color_danger.emd-btn_layout_text:focus,\n.emd-btn_color_danger.emd-btn_layout_text:active {\n  color: #bb4035;\n  fill: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:active {\n  background-color: rgba(231, 76, 60, 0.2);\n}\n\n/* light */\n\n.emd-btn_color_light {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #2d3844;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light:active {\n  background-color: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline,\n.emd-btn_color_light.emd-btn_layout_text {\n  color: #ebebf0;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:hover,\n.emd-btn_color_light.emd-btn_layout_outline:focus,\n.emd-btn_color_light.emd-btn_layout_outline:active,\n.emd-btn_color_light.emd-btn_layout_text:hover,\n.emd-btn_color_light.emd-btn_layout_text:focus,\n.emd-btn_color_light.emd-btn_layout_text:active {\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:active {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n/* disabled */\n\n.emd-btn_disabled,\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline,\n.emd-btn_disabled.emd-btn_layout_text {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n  background-color: transparent;\n}\n\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active,\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  box-shadow: none;\n  filter: none;\n}\n\n/* outline and text */\n\n.emd-btn_layout_outline,\n.emd-btn_layout_text {\n  background-color: transparent;\n}\n\n.emd-btn_layout_text,\n.emd-btn_layout_text:hover,\n.emd-btn_layout_text:focus,\n.emd-btn_layout_text:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n:host {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n:host slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* for compatibility */\n\nsling-button {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nsling-button > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\nsling-button slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n      </style>\n      <button type=\"", "\" className=\"", "\" disabled=", ">\n        <span onclick=\"", "\">\n          <slot></slot>\n        </span>\n      </button>\n    "]);
 
@@ -9,0 +9,0 @@ _templateObject = function _templateObject() {

dist/cjs/es6/component/Button.js

@@ -110,24 +110,27 @@ "use strict";
 .emd-btn {
-  border-color: #2d3844;
-  background-color: #2d3844;
-  color: #fff;
-  fill: #fff;
+  border-color: var(--sling-button-border-color,#2d3844);
+  background-color: var(--sling-button-background-color,#2d3844);
+  color: var(--sling-button-text-color,#fff);
+  fill: var(--sling-button-text-color,#fff);
 }
 
-.emd-btn:hover,
-.emd-btn:focus,
 .emd-btn:active {
-  border-color: #0c1219;
+  filter: brightness(80%);
 }
 
-.emd-btn:active {
-  background-color: #0c1219;
+.emd-btn:hover,
+.emd-btn:focus {
+  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2);
 }
 
-.emd-btn.emd-btn_layout_outline,
-.emd-btn.emd-btn_layout_text {
-  color: #2d3844;
-  fill: #2d3844;
+.emd-btn.emd-btn_layout_outline {
+  color: var(--sling-button-text-color,var(--sling-button-border-color));
+  fill: var(--sling-button-text-color,var(--sling-button-border-color));
 }
 
+.emd-btn.emd-btn_layout_text{
+  color: var(--sling-button-text-color,#2d3844);
+  fill: var(--sling-button-text-color,#2d3844);
+}
+
 .emd-btn.emd-btn_layout_outline:hover,
@@ -139,4 +142,4 @@ .emd-btn.emd-btn_layout_outline:focus,
 .emd-btn.emd-btn_layout_text:active {
-  color: #0c1219;
-  fill: #0c1219;
+  box-shadow:none;
+  filter: brightness(70%);
 }
@@ -151,4 +154,4 @@
 .emd-btn_color_primary {
-  border-color: var(--sling-button-primary-color, #95c93d);
-  background-color: var(--sling-button-primary-color, #95c93d);
+  border-color: var(--sling-button-primary-color, #0DB14B);
+  background-color: var(--sling-button-primary-color, #0DB14B);
   color: #fff;
@@ -158,16 +161,10 @@ fill: #fff;
 
-.emd-btn_color_primary:hover,
-.emd-btn_color_primary:focus,
 .emd-btn_color_primary:active {
-  border-color: var(--sling-button-primary-highlight-color, #7aa436);
+  background-color: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
-.emd-btn_color_primary:active {
-  background-color: var(--sling-button-primary-highlight-color, #7aa436);
-}
-
 .emd-btn_color_primary.emd-btn_layout_outline,
 .emd-btn_color_primary.emd-btn_layout_text {
-  color: var(--sling-button-primary-color, #95c93d);
-  fill: var(--sling-button-primary-color, #95c93d);
+  color: var(--sling-button-primary-color, #0DB14B);
+  fill: var(--sling-button-primary-color, #0DB14B);
 }
@@ -181,8 +178,8 @@
 .emd-btn_color_primary.emd-btn_layout_text:active {
-  color: var(--sling-button-primary-highlight-color, #7aa436);
-  fill: var(--sling-button-primary-highlight-color, #7aa436);
+  color: var(--sling-button-primary-highlight-color, #0C9141);
+  fill: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
 .emd-btn_color_primary.emd-btn_layout_outline:active {
-  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));
+  background-color: var(--sling-button-primary-active-color, rgba(12, 145, 65, 0.2));
 }
@@ -199,9 +196,3 @@
 
-.emd-btn_color_success:hover,
-.emd-btn_color_success:focus,
 .emd-btn_color_success:active {
-  border-color: #27a75f;
-}
-
-.emd-btn_color_success:active {
   background-color: #27a75f;
@@ -239,9 +230,3 @@ }
 
-.emd-btn_color_danger:hover,
-.emd-btn_color_danger:focus,
 .emd-btn_color_danger:active {
-  border-color: #bb4035;
-}
-
-.emd-btn_color_danger:active {
   background-color: #bb4035;
@@ -279,9 +264,3 @@ }
 
-.emd-btn_color_light:hover,
-.emd-btn_color_light:focus,
 .emd-btn_color_light:active {
-  border-color: #fff;
-}
-
-.emd-btn_color_light:active {
   background-color: #fff;
@@ -339,6 +318,13 @@ }
 
+.emd-btn_disabled:hover,
+.emd-btn_disabled:focus,
+.emd-btn_disabled:active,
+.emd-btn_disabled.emd-btn_layout_outline:hover,
+.emd-btn_disabled.emd-btn_layout_outline:focus,
+.emd-btn_disabled.emd-btn_layout_outline:active,
 .emd-btn_disabled.emd-btn_layout_text:hover,
 .emd-btn_disabled.emd-btn_layout_text:focus,
 .emd-btn_disabled.emd-btn_layout_text:active {
-  border-color: transparent;
+  box-shadow: none;
+  filter: none;
 }
@@ -345,0 +331,0 @@

dist/es/es5/component/Button.js

 function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-btn {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  padding: calc(16px - var(--sling-button-border-width, 1px)) calc(24px - var(--sling-button-border-width, 1px));\n  width: 100%;\n  height: 100%;\n  outline: none;\n  border-width: var(--sling-button-border-width, 1px);\n  border-style: solid;\n  border-radius: var(--sling-button-border-radius, 2px);\n  background-color: transparent;\n  color: #fff;\n  fill: #fff;\n  font-size: 14px;\n  line-height: 21px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.emd-btn_layout_text {\n  padding: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_slim {\n  padding-top: calc(8px - var(--sling-button-border-width, 1px));\n  padding-bottom: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_disabled {\n  cursor: not-allowed;\n}\n\n.emd-btn_size_small {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.emd-btn_size_big {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n/* default */\n\n.emd-btn {\n  border-color: #2d3844;\n  background-color: #2d3844;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn:hover,\n.emd-btn:focus,\n.emd-btn:active {\n  border-color: #0c1219;\n}\n\n.emd-btn:active {\n  background-color: #0c1219;\n}\n\n.emd-btn.emd-btn_layout_outline,\n.emd-btn.emd-btn_layout_text {\n  color: #2d3844;\n  fill: #2d3844;\n}\n\n.emd-btn.emd-btn_layout_outline:hover,\n.emd-btn.emd-btn_layout_outline:focus,\n.emd-btn.emd-btn_layout_outline:active,\n.emd-btn.emd-btn_layout_text:hover,\n.emd-btn.emd-btn_layout_text:focus,\n.emd-btn.emd-btn_layout_text:active {\n  color: #0c1219;\n  fill: #0c1219;\n}\n\n.emd-btn.emd-btn_layout_outline:active {\n  background-color: rgba(150, 160, 175, 0.2);\n}\n\n/* primary */\n\n.emd-btn_color_primary {\n  border-color: var(--sling-button-primary-color, #95c93d);\n  background-color: var(--sling-button-primary-color, #95c93d);\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_primary:hover,\n.emd-btn_color_primary:focus,\n.emd-btn_color_primary:active {\n  border-color: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary:active {\n  background-color: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline,\n.emd-btn_color_primary.emd-btn_layout_text {\n  color: var(--sling-button-primary-color, #95c93d);\n  fill: var(--sling-button-primary-color, #95c93d);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:hover,\n.emd-btn_color_primary.emd-btn_layout_outline:focus,\n.emd-btn_color_primary.emd-btn_layout_outline:active,\n.emd-btn_color_primary.emd-btn_layout_text:hover,\n.emd-btn_color_primary.emd-btn_layout_text:focus,\n.emd-btn_color_primary.emd-btn_layout_text:active {\n  color: var(--sling-button-primary-highlight-color, #7aa436);\n  fill: var(--sling-button-primary-highlight-color, #7aa436);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:active {\n  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));\n}\n\n/* success */\n\n.emd-btn_color_success {\n  border-color: #2ecc71;\n  background-color: #2ecc71;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_success:hover,\n.emd-btn_color_success:focus,\n.emd-btn_color_success:active {\n  border-color: #27a75f;\n}\n\n.emd-btn_color_success:active {\n  background-color: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline,\n.emd-btn_color_success.emd-btn_layout_text {\n  color: #2ecc71;\n  fill: #2ecc71;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:hover,\n.emd-btn_color_success.emd-btn_layout_outline:focus,\n.emd-btn_color_success.emd-btn_layout_outline:active,\n.emd-btn_color_success.emd-btn_layout_text:hover,\n.emd-btn_color_success.emd-btn_layout_text:focus,\n.emd-btn_color_success.emd-btn_layout_text:active {\n  color: #27a75f;\n  fill: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:active {\n  background-color: rgba(46, 204, 113, 0.2);\n}\n\n/* danger */\n\n.emd-btn_color_danger {\n  border-color: #e74c3c;\n  background-color: #e74c3c;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_danger:hover,\n.emd-btn_color_danger:focus,\n.emd-btn_color_danger:active {\n  border-color: #bb4035;\n}\n\n.emd-btn_color_danger:active {\n  background-color: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline,\n.emd-btn_color_danger.emd-btn_layout_text {\n  color: #e74c3c;\n  fill: #e74c3c;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:hover,\n.emd-btn_color_danger.emd-btn_layout_outline:focus,\n.emd-btn_color_danger.emd-btn_layout_outline:active,\n.emd-btn_color_danger.emd-btn_layout_text:hover,\n.emd-btn_color_danger.emd-btn_layout_text:focus,\n.emd-btn_color_danger.emd-btn_layout_text:active {\n  color: #bb4035;\n  fill: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:active {\n  background-color: rgba(231, 76, 60, 0.2);\n}\n\n/* light */\n\n.emd-btn_color_light {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #2d3844;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light:hover,\n.emd-btn_color_light:focus,\n.emd-btn_color_light:active {\n  border-color: #fff;\n}\n\n.emd-btn_color_light:active {\n  background-color: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline,\n.emd-btn_color_light.emd-btn_layout_text {\n  color: #ebebf0;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:hover,\n.emd-btn_color_light.emd-btn_layout_outline:focus,\n.emd-btn_color_light.emd-btn_layout_outline:active,\n.emd-btn_color_light.emd-btn_layout_text:hover,\n.emd-btn_color_light.emd-btn_layout_text:focus,\n.emd-btn_color_light.emd-btn_layout_text:active {\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:active {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n/* disabled */\n\n.emd-btn_disabled,\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline,\n.emd-btn_disabled.emd-btn_layout_text {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n  background-color: transparent;\n}\n\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  border-color: transparent;\n}\n\n/* outline and text */\n\n.emd-btn_layout_outline,\n.emd-btn_layout_text {\n  background-color: transparent;\n}\n\n.emd-btn_layout_text,\n.emd-btn_layout_text:hover,\n.emd-btn_layout_text:focus,\n.emd-btn_layout_text:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n:host {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n:host slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* for compatibility */\n\nsling-button {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nsling-button > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\nsling-button slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n      </style>\n      <button type=\"", "\" className=\"", "\" disabled=", ">\n        <span onclick=\"", "\">\n          <slot></slot>\n        </span>\n      </button>\n    "]);
+  var data = _taggedTemplateLiteral(["\n      <style>\n        .emd-btn {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  padding: calc(16px - var(--sling-button-border-width, 1px)) calc(24px - var(--sling-button-border-width, 1px));\n  width: 100%;\n  height: 100%;\n  outline: none;\n  border-width: var(--sling-button-border-width, 1px);\n  border-style: solid;\n  border-radius: var(--sling-button-border-radius, 2px);\n  background-color: transparent;\n  color: #fff;\n  fill: #fff;\n  font-size: 14px;\n  line-height: 21px;\n  font-weight: 500;\n  cursor: pointer;\n  white-space: nowrap;\n}\n\n.emd-btn_layout_text {\n  padding: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_slim {\n  padding-top: calc(8px - var(--sling-button-border-width, 1px));\n  padding-bottom: calc(8px - var(--sling-button-border-width, 1px));\n}\n\n.emd-btn_disabled {\n  cursor: not-allowed;\n}\n\n.emd-btn_size_small {\n  font-size: 12px;\n  line-height: 18px;\n}\n\n.emd-btn_size_big {\n  font-size: 16px;\n  line-height: 24px;\n}\n\n/* default */\n\n.emd-btn {\n  border-color: var(--sling-button-border-color,#2d3844);\n  background-color: var(--sling-button-background-color,#2d3844);\n  color: var(--sling-button-text-color,#fff);\n  fill: var(--sling-button-text-color,#fff);\n}\n\n.emd-btn:active {\n  filter: brightness(80%);\n}\n\n.emd-btn:hover,\n.emd-btn:focus {\n  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2);\n}\n\n.emd-btn.emd-btn_layout_outline {\n  color: var(--sling-button-text-color,var(--sling-button-border-color));\n  fill: var(--sling-button-text-color,var(--sling-button-border-color));\n}\n\n.emd-btn.emd-btn_layout_text{\n  color: var(--sling-button-text-color,#2d3844);\n  fill: var(--sling-button-text-color,#2d3844);\n}\n\n.emd-btn.emd-btn_layout_outline:hover,\n.emd-btn.emd-btn_layout_outline:focus,\n.emd-btn.emd-btn_layout_outline:active,\n.emd-btn.emd-btn_layout_text:hover,\n.emd-btn.emd-btn_layout_text:focus,\n.emd-btn.emd-btn_layout_text:active {\n  box-shadow:none;\n  filter: brightness(70%);\n}\n\n.emd-btn.emd-btn_layout_outline:active {\n  background-color: rgba(150, 160, 175, 0.2);\n}\n\n/* primary */\n\n.emd-btn_color_primary {\n  border-color: var(--sling-button-primary-color, #0DB14B);\n  background-color: var(--sling-button-primary-color, #0DB14B);\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_primary:active {\n  background-color: var(--sling-button-primary-highlight-color, #0C9141);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline,\n.emd-btn_color_primary.emd-btn_layout_text {\n  color: var(--sling-button-primary-color, #0DB14B);\n  fill: var(--sling-button-primary-color, #0DB14B);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:hover,\n.emd-btn_color_primary.emd-btn_layout_outline:focus,\n.emd-btn_color_primary.emd-btn_layout_outline:active,\n.emd-btn_color_primary.emd-btn_layout_text:hover,\n.emd-btn_color_primary.emd-btn_layout_text:focus,\n.emd-btn_color_primary.emd-btn_layout_text:active {\n  color: var(--sling-button-primary-highlight-color, #0C9141);\n  fill: var(--sling-button-primary-highlight-color, #0C9141);\n}\n\n.emd-btn_color_primary.emd-btn_layout_outline:active {\n  background-color: var(--sling-button-primary-active-color, rgba(12, 145, 65, 0.2));\n}\n\n/* success */\n\n.emd-btn_color_success {\n  border-color: #2ecc71;\n  background-color: #2ecc71;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_success:active {\n  background-color: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline,\n.emd-btn_color_success.emd-btn_layout_text {\n  color: #2ecc71;\n  fill: #2ecc71;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:hover,\n.emd-btn_color_success.emd-btn_layout_outline:focus,\n.emd-btn_color_success.emd-btn_layout_outline:active,\n.emd-btn_color_success.emd-btn_layout_text:hover,\n.emd-btn_color_success.emd-btn_layout_text:focus,\n.emd-btn_color_success.emd-btn_layout_text:active {\n  color: #27a75f;\n  fill: #27a75f;\n}\n\n.emd-btn_color_success.emd-btn_layout_outline:active {\n  background-color: rgba(46, 204, 113, 0.2);\n}\n\n/* danger */\n\n.emd-btn_color_danger {\n  border-color: #e74c3c;\n  background-color: #e74c3c;\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_danger:active {\n  background-color: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline,\n.emd-btn_color_danger.emd-btn_layout_text {\n  color: #e74c3c;\n  fill: #e74c3c;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:hover,\n.emd-btn_color_danger.emd-btn_layout_outline:focus,\n.emd-btn_color_danger.emd-btn_layout_outline:active,\n.emd-btn_color_danger.emd-btn_layout_text:hover,\n.emd-btn_color_danger.emd-btn_layout_text:focus,\n.emd-btn_color_danger.emd-btn_layout_text:active {\n  color: #bb4035;\n  fill: #bb4035;\n}\n\n.emd-btn_color_danger.emd-btn_layout_outline:active {\n  background-color: rgba(231, 76, 60, 0.2);\n}\n\n/* light */\n\n.emd-btn_color_light {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #2d3844;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light:active {\n  background-color: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline,\n.emd-btn_color_light.emd-btn_layout_text {\n  color: #ebebf0;\n  fill: #ebebf0;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:hover,\n.emd-btn_color_light.emd-btn_layout_outline:focus,\n.emd-btn_color_light.emd-btn_layout_outline:active,\n.emd-btn_color_light.emd-btn_layout_text:hover,\n.emd-btn_color_light.emd-btn_layout_text:focus,\n.emd-btn_color_light.emd-btn_layout_text:active {\n  color: #fff;\n  fill: #fff;\n}\n\n.emd-btn_color_light.emd-btn_layout_outline:active {\n  background-color: rgba(255, 255, 255, 0.2);\n}\n\n/* disabled */\n\n.emd-btn_disabled,\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active {\n  border-color: #ebebf0;\n  background-color: #ebebf0;\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline,\n.emd-btn_disabled.emd-btn_layout_text {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n}\n\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  color: #c3c8d1;\n  fill: #c3c8d1;\n  background-color: transparent;\n}\n\n.emd-btn_disabled:hover,\n.emd-btn_disabled:focus,\n.emd-btn_disabled:active,\n.emd-btn_disabled.emd-btn_layout_outline:hover,\n.emd-btn_disabled.emd-btn_layout_outline:focus,\n.emd-btn_disabled.emd-btn_layout_outline:active,\n.emd-btn_disabled.emd-btn_layout_text:hover,\n.emd-btn_disabled.emd-btn_layout_text:focus,\n.emd-btn_disabled.emd-btn_layout_text:active {\n  box-shadow: none;\n  filter: none;\n}\n\n/* outline and text */\n\n.emd-btn_layout_outline,\n.emd-btn_layout_text {\n  background-color: transparent;\n}\n\n.emd-btn_layout_text,\n.emd-btn_layout_text:hover,\n.emd-btn_layout_text:focus,\n.emd-btn_layout_text:active {\n  border-color: transparent;\n  background-color: transparent;\n}\n\n:host {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\n:host > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n:host slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n/* for compatibility */\n\nsling-button {\n  display: inline-block;\n  background: transparent !important;\n  border: none !important;\n  outline: none !important;\n  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n\nsling-button > .emd-btn {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\nsling-button slot {\n  display: flex;\n  flex-flow: row nowrap;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n\n      </style>\n      <button type=\"", "\" className=\"", "\" disabled=", ">\n        <span onclick=\"", "\">\n          <slot></slot>\n        </span>\n      </button>\n    "]);
 
@@ -6,0 +6,0 @@ _templateObject = function _templateObject() {

dist/es/es6/component/Button.js

@@ -101,24 +101,27 @@ import { SlingElement, html } from 'sling-framework';
 .emd-btn {
-  border-color: #2d3844;
-  background-color: #2d3844;
-  color: #fff;
-  fill: #fff;
+  border-color: var(--sling-button-border-color,#2d3844);
+  background-color: var(--sling-button-background-color,#2d3844);
+  color: var(--sling-button-text-color,#fff);
+  fill: var(--sling-button-text-color,#fff);
 }
 
-.emd-btn:hover,
-.emd-btn:focus,
 .emd-btn:active {
-  border-color: #0c1219;
+  filter: brightness(80%);
 }
 
-.emd-btn:active {
-  background-color: #0c1219;
+.emd-btn:hover,
+.emd-btn:focus {
+  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2);
 }
 
-.emd-btn.emd-btn_layout_outline,
-.emd-btn.emd-btn_layout_text {
-  color: #2d3844;
-  fill: #2d3844;
+.emd-btn.emd-btn_layout_outline {
+  color: var(--sling-button-text-color,var(--sling-button-border-color));
+  fill: var(--sling-button-text-color,var(--sling-button-border-color));
 }
 
+.emd-btn.emd-btn_layout_text{
+  color: var(--sling-button-text-color,#2d3844);
+  fill: var(--sling-button-text-color,#2d3844);
+}
+
 .emd-btn.emd-btn_layout_outline:hover,
@@ -130,4 +133,4 @@ .emd-btn.emd-btn_layout_outline:focus,
 .emd-btn.emd-btn_layout_text:active {
-  color: #0c1219;
-  fill: #0c1219;
+  box-shadow:none;
+  filter: brightness(70%);
 }
@@ -142,4 +145,4 @@
 .emd-btn_color_primary {
-  border-color: var(--sling-button-primary-color, #95c93d);
-  background-color: var(--sling-button-primary-color, #95c93d);
+  border-color: var(--sling-button-primary-color, #0DB14B);
+  background-color: var(--sling-button-primary-color, #0DB14B);
   color: #fff;
@@ -149,16 +152,10 @@ fill: #fff;
 
-.emd-btn_color_primary:hover,
-.emd-btn_color_primary:focus,
 .emd-btn_color_primary:active {
-  border-color: var(--sling-button-primary-highlight-color, #7aa436);
+  background-color: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
-.emd-btn_color_primary:active {
-  background-color: var(--sling-button-primary-highlight-color, #7aa436);
-}
-
 .emd-btn_color_primary.emd-btn_layout_outline,
 .emd-btn_color_primary.emd-btn_layout_text {
-  color: var(--sling-button-primary-color, #95c93d);
-  fill: var(--sling-button-primary-color, #95c93d);
+  color: var(--sling-button-primary-color, #0DB14B);
+  fill: var(--sling-button-primary-color, #0DB14B);
 }
@@ -172,8 +169,8 @@
 .emd-btn_color_primary.emd-btn_layout_text:active {
-  color: var(--sling-button-primary-highlight-color, #7aa436);
-  fill: var(--sling-button-primary-highlight-color, #7aa436);
+  color: var(--sling-button-primary-highlight-color, #0C9141);
+  fill: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
 .emd-btn_color_primary.emd-btn_layout_outline:active {
-  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));
+  background-color: var(--sling-button-primary-active-color, rgba(12, 145, 65, 0.2));
 }
@@ -190,9 +187,3 @@
 
-.emd-btn_color_success:hover,
-.emd-btn_color_success:focus,
 .emd-btn_color_success:active {
-  border-color: #27a75f;
-}
-
-.emd-btn_color_success:active {
   background-color: #27a75f;
@@ -230,9 +221,3 @@ }
 
-.emd-btn_color_danger:hover,
-.emd-btn_color_danger:focus,
 .emd-btn_color_danger:active {
-  border-color: #bb4035;
-}
-
-.emd-btn_color_danger:active {
   background-color: #bb4035;
@@ -270,9 +255,3 @@ }
 
-.emd-btn_color_light:hover,
-.emd-btn_color_light:focus,
 .emd-btn_color_light:active {
-  border-color: #fff;
-}
-
-.emd-btn_color_light:active {
   background-color: #fff;
@@ -330,6 +309,13 @@ }
 
+.emd-btn_disabled:hover,
+.emd-btn_disabled:focus,
+.emd-btn_disabled:active,
+.emd-btn_disabled.emd-btn_layout_outline:hover,
+.emd-btn_disabled.emd-btn_layout_outline:focus,
+.emd-btn_disabled.emd-btn_layout_outline:active,
 .emd-btn_disabled.emd-btn_layout_text:hover,
 .emd-btn_disabled.emd-btn_layout_text:focus,
 .emd-btn_disabled.emd-btn_layout_text:active {
-  border-color: transparent;
+  box-shadow: none;
+  filter: none;
 }
@@ -336,0 +322,0 @@

package.json

 {
   "name": "sling-web-component-button",
-  "version": "1.11.6",
+  "version": "1.11.7",
   "description": "Sling Button",
@@ -10,5 +10,5 @@ "module": "src/index.js",
   "dependencies": {
-    "sling-framework": "^1.11.6",
-    "sling-helpers": "^1.11.6"
+    "sling-framework": "^1.11.7",
+    "sling-helpers": "^1.11.7"
   }
 }

src/component/Button.js

@@ -101,24 +101,27 @@ import { SlingElement, html } from 'sling-framework';
 .emd-btn {
-  border-color: #2d3844;
-  background-color: #2d3844;
-  color: #fff;
-  fill: #fff;
+  border-color: var(--sling-button-border-color,#2d3844);
+  background-color: var(--sling-button-background-color,#2d3844);
+  color: var(--sling-button-text-color,#fff);
+  fill: var(--sling-button-text-color,#fff);
 }
 
-.emd-btn:hover,
-.emd-btn:focus,
 .emd-btn:active {
-  border-color: #0c1219;
+  filter: brightness(80%);
 }
 
-.emd-btn:active {
-  background-color: #0c1219;
+.emd-btn:hover,
+.emd-btn:focus {
+  box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.2);
 }
 
-.emd-btn.emd-btn_layout_outline,
-.emd-btn.emd-btn_layout_text {
-  color: #2d3844;
-  fill: #2d3844;
+.emd-btn.emd-btn_layout_outline {
+  color: var(--sling-button-text-color,var(--sling-button-border-color));
+  fill: var(--sling-button-text-color,var(--sling-button-border-color));
 }
 
+.emd-btn.emd-btn_layout_text{
+  color: var(--sling-button-text-color,#2d3844);
+  fill: var(--sling-button-text-color,#2d3844);
+}
+
 .emd-btn.emd-btn_layout_outline:hover,
@@ -130,4 +133,4 @@ .emd-btn.emd-btn_layout_outline:focus,
 .emd-btn.emd-btn_layout_text:active {
-  color: #0c1219;
-  fill: #0c1219;
+  box-shadow:none;
+  filter: brightness(70%);
 }
@@ -142,4 +145,4 @@
 .emd-btn_color_primary {
-  border-color: var(--sling-button-primary-color, #95c93d);
-  background-color: var(--sling-button-primary-color, #95c93d);
+  border-color: var(--sling-button-primary-color, #0DB14B);
+  background-color: var(--sling-button-primary-color, #0DB14B);
   color: #fff;
@@ -149,16 +152,10 @@ fill: #fff;
 
-.emd-btn_color_primary:hover,
-.emd-btn_color_primary:focus,
 .emd-btn_color_primary:active {
-  border-color: var(--sling-button-primary-highlight-color, #7aa436);
+  background-color: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
-.emd-btn_color_primary:active {
-  background-color: var(--sling-button-primary-highlight-color, #7aa436);
-}
-
 .emd-btn_color_primary.emd-btn_layout_outline,
 .emd-btn_color_primary.emd-btn_layout_text {
-  color: var(--sling-button-primary-color, #95c93d);
-  fill: var(--sling-button-primary-color, #95c93d);
+  color: var(--sling-button-primary-color, #0DB14B);
+  fill: var(--sling-button-primary-color, #0DB14B);
 }
@@ -172,8 +169,8 @@
 .emd-btn_color_primary.emd-btn_layout_text:active {
-  color: var(--sling-button-primary-highlight-color, #7aa436);
-  fill: var(--sling-button-primary-highlight-color, #7aa436);
+  color: var(--sling-button-primary-highlight-color, #0C9141);
+  fill: var(--sling-button-primary-highlight-color, #0C9141);
 }
 
 .emd-btn_color_primary.emd-btn_layout_outline:active {
-  background-color: var(--sling-button-primary-active-color, rgba(149, 201, 61, 0.2));
+  background-color: var(--sling-button-primary-active-color, rgba(12, 145, 65, 0.2));
 }
@@ -190,9 +187,3 @@
 
-.emd-btn_color_success:hover,
-.emd-btn_color_success:focus,
 .emd-btn_color_success:active {
-  border-color: #27a75f;
-}
-
-.emd-btn_color_success:active {
   background-color: #27a75f;
@@ -230,9 +221,3 @@ }
 
-.emd-btn_color_danger:hover,
-.emd-btn_color_danger:focus,
 .emd-btn_color_danger:active {
-  border-color: #bb4035;
-}
-
-.emd-btn_color_danger:active {
   background-color: #bb4035;
@@ -270,9 +255,3 @@ }
 
-.emd-btn_color_light:hover,
-.emd-btn_color_light:focus,
 .emd-btn_color_light:active {
-  border-color: #fff;
-}
-
-.emd-btn_color_light:active {
   background-color: #fff;
@@ -330,6 +309,13 @@ }
 
+.emd-btn_disabled:hover,
+.emd-btn_disabled:focus,
+.emd-btn_disabled:active,
+.emd-btn_disabled.emd-btn_layout_outline:hover,
+.emd-btn_disabled.emd-btn_layout_outline:focus,
+.emd-btn_disabled.emd-btn_layout_outline:active,
 .emd-btn_disabled.emd-btn_layout_text:hover,
 .emd-btn_disabled.emd-btn_layout_text:focus,
 .emd-btn_disabled.emd-btn_layout_text:active {
-  border-color: transparent;
+  box-shadow: none;
+  filter: none;
 }
@@ -336,0 +322,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

556018

increased by0.1%

Worsened metrics

Lines of code

13405

decreased by-0.41%

Dependency changes

• Updatedsling-framework@^1.11.7

• Updatedsling-helpers@^1.11.7