@forter/button - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0-alpha.7

fc-button-shared.css.js

@@ -10,10 +10,9 @@ import { css } from 'lit-element';
   --fc-button-active-color: var(--ftr-dark-1, #7c8180);
-  --fc-button-bg-color: var(--ftr-light-1, #f5f5f5);
+  --fc-button-background-color: var(--ftr-light-1, #f5f5f5);
   --fc-button-icon-color: var(--ftr-dark-1, #7c8180);
-  --fc-button-text-hover-color: var(--ftr-dark-1, #7c8180);
+  --fc-button-hover-color: var(--ftr-dark-1, #7c8180);
 
   /* hover styles */
-  --fc-button-bg-hover-color: var(--ftr-light-2, #e1e1e1);
-  --fc-button-icon-hover-color: var(--ftr-primary-3, #5dcdd5);
-  --fc-button-text-hover-color: var(--ftr-dark-1, #7c8180);
+  --fc-button-hover-background-color: var(--ftr-light-2, #e1e1e1);
+  --fc-button-hover-color: var(--ftr-dark-1, #7c8180);
 
@@ -39,3 +38,3 @@ /* sizes */
   align-items: center;
-  background-color: var(--fc-button-bg-color);
+  background-color: var(--fc-button-background-color);
   border-radius: var(--fc-button-border-radius);
@@ -76,11 +75,11 @@ border: 0;
 
-button:hover:enabled {
-  background-color: var(--fc-button-bg-hover-color);
-  color: var(--fc-button-text-hover-color);
+:host(:hover) button:enabled {
+  background-color: var(--fc-button-hover-background-color);
+  color: var(--fc-button-hover-color, currentColor);
 
-  --fc-icon-fill: var(--fc-button-icon-hover-color);
+  --fc-icon-fill: var(--fc-button-hover-icon-color, currentColor);
 }
 
 button.active {
-  color: var(--fc-button-active-color);
+  color: var(--fc-button-active-color, currentColor);
 
@@ -87,0 +86,0 @@ --fc-icon-fill: var(--ftr-primary-3);

fc-button.css.js

 import { css } from 'lit-element';
 
 var style = css`:host([intent="apply"]) {
-  --fc-button-bg-color: var(--ftr-primary-3);
+  --fc-button-background-color: var(--ftr-primary-3);
   --fc-button-icon-color: white;
   --fc-button-color: white;
-  --fc-button-bg-hover-color: var(--ftr-primary-6);
-  --fc-button-icon-hover-color: white;
-  --fc-button-text-hover-color: white;
+  --fc-button-hover-background-color: var(--ftr-primary-6);
+  --fc-button-hover-icon-color: white;
+  --fc-button-hover-color: white;
 }
 
 :host([intent="cancel"]) {
-  --fc-button-bg-color: var(--ftr-light-1);
+  --fc-button-background-color: var(--ftr-light-1);
   --fc-button-icon-color: var(--ftr-dark-1);
   --fc-button-color: black;
-  --fc-button-bg-hover-color: var(--ftr-light-2);
-  --fc-button-icon-hover-color: black;
-  --fc-button-text-hover-color: black;
+  --fc-button-hover-background-color: var(--ftr-light-2);
+  --fc-button-hover-icon-color: black;
+  --fc-button-hover-color: black;
 }
 
 :host([intent="success"]) {
-  --fc-button-bg-color: var(--ftr-success-1);
+  --fc-button-background-color: var(--ftr-success-1);
   --fc-button-icon-color: white;
   --fc-button-color: white;
-  --fc-button-bg-hover-color: var(--ftr-success-2);
-  --fc-button-icon-hover-color: white;
-  --fc-button-text-hover-color: white;
+  --fc-button-hover-background-color: var(--ftr-success-2);
+  --fc-button-hover-icon-color: white;
+  --fc-button-hover-color: white;
 }
 
 :host([intent="warn"]) {
-  --fc-button-bg-color: var(--ftr-warning-1);
+  --fc-button-background-color: var(--ftr-warning-1);
   --fc-button-icon-color: white;
   --fc-button-color: white;
-  --fc-button-bg-hover-color: var(--ftr-warning-4);
-  --fc-button-icon-hover-color: white;
-  --fc-button-text-hover-color: white;
+  --fc-button-hover-background-color: var(--ftr-warning-4);
+  --fc-button-hover-icon-color: white;
+  --fc-button-hover-color: white;
 }
 
 :host([intent="danger"]) {
-  --fc-button-bg-color: var(--ftr-danger-1);
+  --fc-button-background-color: var(--ftr-danger-1);
   --fc-button-icon-color: white;
   --fc-button-color: white;
-  --fc-button-bg-hover-color: var(--ftr-danger-4);
-  --fc-button-icon-hover-color: white;
-  --fc-button-text-hover-color: white;
+  --fc-button-hover-background-color: var(--ftr-danger-4);
+  --fc-button-hover-icon-color: white;
+  --fc-button-hover-color: white;
 }
@@ -47,0 +47,0 @@

package.json

 {
   "name": "@forter/button",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.7",
   "description": "Button from Forter Components",
@@ -54,7 +54,7 @@ "main": "index.js",
     "@forter/helpers": "^1.0.0-alpha.1",
-    "@forter/icon": "^1.0.0-alpha.3",
+    "@forter/icon": "^1.0.0-alpha.4",
     "@forter/styles": "^1.0.0-alpha.2",
     "@polymer/paper-tooltip": "^3.0.1"
   },
-  "gitHead": "f85a341f66b657ab4742fd1f86d9b9798768f983"
+  "gitHead": "8dc7c33ac2984e1da896d024b646ac2ecd5a8e44"
 }

stories/button.stories.js

@@ -89,10 +89,10 @@ import { capitalize } from '@forter/helpers';
       --fc-button-active-color: ${color('--fc-button-active-color', '#7c8180', 'Colors')};
-      --fc-button-bg-color: ${color('--fc-button-bg-color', '#f5f5f5', 'Colors')};
+      --fc-button-background-color: ${color('--fc-button-background-color', '#f5f5f5', 'Colors')};
       --fc-button-icon-color: ${color('--fc-button-icon-color', '#7c8180', 'Colors')};
-      --fc-button-text-hover-color: ${color('--fc-button-text-hover-color', '#7c8180', 'Colors')};
+      --fc-button-hover-color: ${color('--fc-button-hover-color', '#7c8180', 'Colors')};
 
       /* hover styles */
-      --fc-button-bg-hover-color: ${color('--fc-button-bg-hover-color', '#e1e1e1', 'Colors')};
-      --fc-button-icon-hover-color: ${color('--fc-button-icon-hover-color', '#5dcdd5', 'Colors')};
-      --fc-button-text-hover-color: ${color('--fc-button-text-hover-color', '#7c8180', 'Colors')};
+      --fc-button-hover-background-color: ${color('--fc-button-hover-background-color', '#e1e1e1', 'Colors')};
+      --fc-button-hover-icon-color: ${color('--fc-button-hover-icon-color', '#5dcdd5', 'Colors')};
+      --fc-button-hover-color: ${color('--fc-button-hover-color', '#7c8180', 'Colors')};
 
@@ -99,0 +99,0 @@ /* sizes */

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

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

Improved metrics

Total package byte prevSize

67861

increased by0.19%

Worsened metrics

Lines of code

1621

decreased by-0.12%

Dependency changes

• Updated@forter/icon@^1.0.0-alpha.4