@assecosolutions/fox-button - npm Package Compare versions

Comparing version 1.11.0-next.29 to 1.11.0-next.30

index.js

@@ -1559,168 +1559,3 @@ import { css, LitElement, html as html$2 } from 'lit';
     _t$1;
-const styles = css(_t$1 || (_t$1 = _$1`
-  :host {
-    display: inline-flex;
-    outline: none;
-    white-space: nowrap;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    vertical-align: top;
-    box-sizing: border-box;
-  }
-  :host {
-    --fox-button-font-weight: var(--fox-font-weight-medium, 600);
-    --fox-button-font-size: var(--fox-font-size-base, 14px);
-    --fox-button-font-family-fallback: Nunito, Roboto, sans-serif;
-    --fox-button-font-family: var(
-      --fox-font-family,
-      var(--fox-button-font-family-fallback)
-    );
-    --fox-button-text-color-rgb: 15, 19, 16;
-    --fox-button-primary-color-rgb: 231, 236, 240;
-    --fox-button-text-on-primary-color-rgb: 15, 19, 16;
-  }
-  :host([primary]) {
-    --fox-button-primary-color-rgb-fallback: 69, 153, 255;
-    --fox-button-primary-color-rgb: var(
-      --fox-client-base-rgb-color,
-      var(--fox-button-primary-color-rgb-fallback)
-    );
-    --fox-button-text-color-rgb: 69, 153, 255;
-    --fox-button-text-on-primary-color-rgb: 255, 255, 255;
-  }
-  :host([danger]) {
-    --fox-button-primary-color-rgb: 250, 190, 58;
-    --fox-button-text-color-rgb: 250, 190, 58;
-    --fox-button-text-on-primary-color-rgb: 255, 255, 255;
-  }
-  :host([small]) {
-    --fox-button-font-size: 12px;
-    --fox-button-height: 26px;
-    --fox-button-horizontal-spacing: 8px;
-  }
-  :host([fullwidth]) {
-    width: 100%;
-  }
-  :host([justifystart]) .fox-button {
-    justify-content: flex-start;
-  }
-  :host([disabled]) {
-    pointer-events: none;
-  }
-  .fox-button {
-    transition: var(--fox-base-transition-all);
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    font-family: var(--fox-button-font-family);
-    font-size: var(--fox-button-font-size);
-    font-weight: var(--fox-button-font-weight);
-    text-decoration: none;
-    color: rgba(
-      var(--fox-button-text-color-rgb),
-      var(--fox-button-color-alpha, 1)
-    );
-    background: rgba(
-      var(--fox-button-primary-color-rgb),
-      var(--fox-button-background-alpha, 0)
-    );
-    border-radius: var(--fox-button-border-radius, 4px);
-    height: var(--fox-button-height, 32px);
-    padding: 0 var(--fox-button-horizontal-spacing, 16px);
-    flex: auto;
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    box-sizing: border-box;
-    border: none;
-    outline: none;
-    line-height: inherit;
-    user-select: none;
-    -webkit-appearance: none;
-    overflow: visible;
-    vertical-align: middle;
-  }
-  .fox-button__outlined {
-    border: 2px solid rgba(var(--fox-button-primary-color-rgb), 1);
-  }
-  .fox-button__raised {
-    --fox-button-background-alpha: 1;
-    --fox-button-text-color-rgb: var(--fox-button-text-on-primary-color-rgb);
-  }
-  .fox-button__icon-button {
-    padding: 0 var(--fox-button-horizontal-spacing, 7px);
-  }
-  .fox-button:focus {
-    --fox-button-background-alpha: 0.1;
-  }
-  .fox-button:focus.fox-button__raised {
-    --fox-button-background-alpha: 0.7;
-  }
-  .fox-button:hover {
-    cursor: pointer;
-  }
-  .fox-button:hover:not(.fox-button:hover.fox-button__raised) {
-    background: rgba(148, 168, 188, 0.1);
-  }
-  .fox-button:hover.fox-button__raised {
-    --fox-button-background-alpha: 0.7;
-  }
-  .fox-button:active {
-    --fox-button-background-alpha: 0.2;
-    outline: none;
-  }
-  .fox-button:active.fox-button__raised {
-    transition: none;
-    --fox-button-background-alpha: 0.9;
-    box-shadow: 0 3px 6px rgba(15, 19, 16, 0.1607843137);
-  }
-  .fox-button:disabled {
-    --fox-button-background-alpha: 0;
-    --fox-button-color-alpha: 0.3;
-    cursor: default;
-    pointer-events: none;
-  }
-  .fox-button:disabled.fox-button__raised {
-    --fox-button-color-alpha: 0.3;
-    --fox-button-background-alpha: 0.3;
-  }
-  .fox-button:disabled.fox-button__outlined {
-    border: 2px solid rgba(var(--fox-button-primary-color-rgb), 0.1);
-  }
-  .fox-button__progress {
-    bottom: 0;
-    right: 0;
-    left: 0;
-    position: absolute;
-    --mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);
-    --mdc-theme-primary: rgba(var(--fox-button-primary-color-rgb), 1);
-  }
-  .trailing-icon ::slotted(*),
-  .trailing-icon .fox-button__icon,
-  .leading-icon ::slotted(*),
-  .leading-icon .fox-button__icon {
-    margin-left: 0;
-    margin-right: 5px;
-    display: block;
-    width: 18px;
-    height: 18px;
-    font-size: 18px;
-    vertical-align: top;
-  }
-  .fox-button__icon-button .trailing-icon ::slotted(*),
-  .fox-button__icon-button .trailing-icon .fox-button__icon,
-  .fox-button__icon-button .leading-icon ::slotted(*),
-  .fox-button__icon-button .leading-icon .fox-button__icon {
-    margin: 0;
-  }
-  .trailing-icon ::slotted(*),
-  .trailing-icon .fox-button__icon {
-    margin-left: 5px;
-    margin-right: 0;
-  }
-  .slot-container {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-`));
+const styles = css(_t$1 || (_t$1 = _$1`:host{display:inline-flex;outline:none;white-space:nowrap;-webkit-tap-highlight-color:rgba(0,0,0,0);vertical-align:top;box-sizing:border-box}:host{--fox-button-font-weight: var(--fox-font-weight-medium, 600);--fox-button-font-size: var(--fox-font-size-base, 14px);--fox-button-font-family-fallback: Nunito, Roboto, sans-serif;--fox-button-font-family: var( --fox-font-family, var(--fox-button-font-family-fallback) );--fox-button-text-color: var(--fox-base-grey-100-color, #0f1310);--fox-button-primary-color: var(--fox-base-grey-30-color, #e7ecf0);--fox-button-text-on-primary-color: var(--fox-base-grey-100-color, #0f1310)}:host([primary]){--fox-button-primary-color-fallback: var(--fox-client-base-color, #4599ff);--fox-button-primary-color: var(--fox-client-base-color, #4599ff);--fox-button-text-color: var(--fox-client-base-color, #4599ff);--fox-button-text-on-primary-color: var(--fox-feedback-white-color, #ffffff)}:host([danger]){--fox-button-primary-color: var(--fox-brand-base-color, #fabe3a);--fox-button-text-color: var(--fox-brand-base-color, #fabe3a);--fox-button-text-on-primary-color: var(--fox-feedback-white-color, #ffffff)}:host([small]){--fox-button-font-size: 12px;--fox-button-height: 26px;--fox-button-horizontal-spacing: 8px}:host([fullwidth]){width:100%}:host([justifystart]) .fox-button{justify-content:flex-start}:host([disabled]){pointer-events:none}.fox-button{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-family:var(--fox-button-font-family);font-size:var(--fox-button-font-size);font-weight:var(--fox-button-font-weight);text-decoration:none;color:var(--fox-button-text-color);background:none;border-radius:var(--fox-button-border-radius, 4px);height:var(--fox-button-height, 32px);padding:0 var(--fox-button-horizontal-spacing, 16px);flex:auto;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;border:none;outline:none;line-height:inherit;user-select:none;-webkit-appearance:none;overflow:visible;vertical-align:middle;--fox-button-outline-width: 0px}.fox-button__outlined{--fox-button-background-alpha: 0;--fox-button-outline-width: 2px}.fox-button__raised{--fox-button-background-alpha: 1;--fox-button-text-color: var(--fox-button-text-on-primary-color)}.fox-button__icon-button{padding:0 var(--fox-button-horizontal-spacing, 7px)}.fox-button__label,.fox-button .leading-icon,.fox-button .trailing-icon{opacity:var(--fox-button-color-alpha, 1);z-index:2}.fox-button:focus{--fox-button-background-alpha: 0.1}.fox-button:focus.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:hover{cursor:pointer}.fox-button:hover:not(.fox-button:hover.fox-button__raised){--fox-button-background-color: var(--fox-base-grey-60-color, #94a8bc);--fox-button-background-alpha: 0.1}.fox-button:hover.fox-button__raised{--fox-button-background-alpha: 0.7}.fox-button:active{--fox-button-background-alpha: 0.2;outline:none}.fox-button:active.fox-button__raised{transition:none;--fox-button-background-alpha: 0.9;box-shadow:0 3px 6px rgba(15,19,16,.1607843137)}.fox-button:disabled{--fox-button-background-alpha: 0;--fox-button-color-alpha: 0.3;cursor:default;pointer-events:none}.fox-button:disabled.fox-button__raised{--fox-button-color-alpha: 0.3;--fox-button-background-alpha: 0.3}.fox-button__progress{width:100%;height:3px;position:absolute;bottom:0;left:0;overflow:hidden;border-radius:0 0 20px 20px;z-index:2;--mdc-linear-progress-buffer-color: rgba(255, 255, 255, 0.6);--mdc-theme-primary: var(--fox-button-primary-color)}.fox-button::after{transition:var(--fox-base-transition-all);content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;background:var(--fox-button-background-color, var(--fox-button-primary-color));opacity:var(--fox-button-background-alpha, 0)}.fox-button::before{content:"";position:absolute;inset:0;border-radius:inherit;border:var(--fox-button-outline-width) solid var(--fox-button-primary-color);opacity:var(--fox-button-color-alpha, 1);z-index:2}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon,.leading-icon ::slotted(*),.leading-icon .fox-button__icon{margin-left:0;margin-right:5px;display:block;width:18px;height:18px;font-size:18px;vertical-align:top}.fox-button__icon-button .trailing-icon ::slotted(*),.fox-button__icon-button .trailing-icon .fox-button__icon,.fox-button__icon-button .leading-icon ::slotted(*),.fox-button__icon-button .leading-icon .fox-button__icon{margin:0}.trailing-icon ::slotted(*),.trailing-icon .fox-button__icon{margin-left:5px;margin-right:0}.slot-container{display:inline-flex;align-items:center;justify-content:center}`));
 
@@ -1739,8 +1574,8 @@ let _ = t => t,
  *
- * @cssprop [--fox-button-font-weight=600]
  * @cssprop [--fox-button-font-size=14px]
  * @cssprop [--fox-button-font-family="Nunito, Roboto, sans-serif"]
- * @cssprop [--fox-button-text-color-rgb="15, 19, 16"]
- * @cssprop [--fox-button-primary-color-rgb="231, 236, 240"]
- * @cssprop [--fox-button-text-on-primary-color-rgb="15, 19, 16"]
+ * @cssprop [--fox-button-font-weight=600]
+ * @cssprop [--fox-button-text-color="var(--fox-base-grey-100-color, #0f1310)"]
+ * @cssprop [--fox-button-primary-color="var(--fox-base-grey-30-color, #e7ecf0)"]
+ * @cssprop [--fox-button-text-on-primary-color="var(--fox-base-grey-100-color, #0f1310)"]
  */
@@ -1747,0 +1582,0 @@

lib/FoxButton.d.ts

@@ -17,8 +17,8 @@ import { LitElement } from 'lit';
  *
- * @cssprop [--fox-button-font-weight=600]
  * @cssprop [--fox-button-font-size=14px]
  * @cssprop [--fox-button-font-family="Nunito, Roboto, sans-serif"]
- * @cssprop [--fox-button-text-color-rgb="15, 19, 16"]
- * @cssprop [--fox-button-primary-color-rgb="231, 236, 240"]
- * @cssprop [--fox-button-text-on-primary-color-rgb="15, 19, 16"]
+ * @cssprop [--fox-button-font-weight=600]
+ * @cssprop [--fox-button-text-color="var(--fox-base-grey-100-color, #0f1310)"]
+ * @cssprop [--fox-button-primary-color="var(--fox-base-grey-30-color, #e7ecf0)"]
+ * @cssprop [--fox-button-text-on-primary-color="var(--fox-base-grey-100-color, #0f1310)"]
  */
@@ -25,0 +25,0 @@ export declare class FoxButton extends LitElement {

lib/FoxButton.stories.d.ts

@@ -5,3 +5,10 @@ import './FoxButton';
     title: string;
-    component: string;
+    parameters: {
+        component: string;
+        controls: {
+            matchers: {
+                color: RegExp;
+            };
+        };
+    };
 };
@@ -28,1 +35,9 @@ export default _default;
 export declare const Icon: () => import("lit-html").TemplateResult<1>;
+export declare const CustomColor: {
+    (args: Record<string, string>): import("lit-html").TemplateResult<1>;
+    args: {
+        '--fox-button-primary-color': string;
+        '--fox-button-text-on-primary-color': string;
+        '--fox-button-text-color': string;
+    };
+};

package.json

 {
   "name": "@assecosolutions/fox-button",
-  "version": "1.11.0-next.29",
+  "version": "1.11.0-next.30",
   "public": true,
@@ -20,5 +20,5 @@ "publishConfig": {
   "dependencies": {
-    "@assecosolutions/fox-common-utils": "~1.11.0-next.29",
-    "@assecosolutions/fox-icon": "~1.11.0-next.29",
-    "@assecosolutions/fox-progress": "~1.11.0-next.29"
+    "@assecosolutions/fox-common-utils": "~1.11.0-next.30",
+    "@assecosolutions/fox-icon": "~1.11.0-next.30",
+    "@assecosolutions/fox-progress": "~1.11.0-next.30"
   },
@@ -25,0 +25,0 @@ "peerDependencies": {

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

68738

increased by0.53%

Worsened metrics

Lines of code

1546

decreased by-7.92%

Dependency changes

• Updated@assecosolutions/fox-common-utils@~1.11.0-next.30

• Updated@assecosolutions/fox-icon@~1.11.0-next.30

• Updated@assecosolutions/fox-progress@~1.11.0-next.30