@plcmp/pl-button - npm Package Compare versions

Comparing version 0.1.18 to 0.1.19

package.json

 {
     "name": "@plcmp/pl-button",
-    "version": "0.1.18",
+    "version": "0.1.19",
     "description": "Simple button implementation.",
@@ -5,0 +5,0 @@ "main": "pl-button.js",

pl-button.js

@@ -53,11 +53,11 @@ import { PlElement, html, css } from "polylib";
                 justify-content: center;
-                padding: 0 var(--space-sm);
+                padding: 0 var(--pl-space-sm);
                 box-sizing: border-box;
                 width: fit-content;
-                height: var(--base-size-md);
-                background: var(--primary-base);
-                color: var(--background-color);
-                border: 1px solid var(--primary-base);
-                border-radius: var(--border-radius);
-                font: var(--text-font);
+                height: var(--pl-base-size);
+                background: var(--pl-primary-base);
+                color: var(--pl-background-color);
+                border: 1px solid var(--pl-primary-base);
+                border-radius: var(--pl-border-radius);
+                font: var(--pl-text-font);
                 flex-shrink: 0;
@@ -77,3 +77,3 @@ overflow: hidden;
                 cursor: not-allowed;
-                color: var(--grey-dark);
+                color: var(--pl-grey-dark);
             }
@@ -85,20 +85,20 @@
 
-            :host ::slotted(*[slot="prefix"]) { padding-inline-end: var(--space-sm) }
-            :host ::slotted(*[slot="suffix"]) { padding-inline-start: var(--space-sm) }
+            :host ::slotted(*[slot="prefix"]) { padding-inline-end: var(--pl-space-sm) }
+            :host ::slotted(*[slot="suffix"]) { padding-inline-start: var(--pl-space-sm) }
 
             :host([variant=primary]:hover:not([loading],[disabled])),
             :host([variant=primary]:focus-visible:not([loading],[disabled])){
-                background: var(--primary-dark);
-                border: 1px solid var(--primary-darkest);
+                background: var(--pl-primary-dark);
+                border: 1px solid var(--pl-primary-darkest);
             }
 
             :host([variant=primary]:active:not([loading],[disabled])){
-                background: var(--primary-darkest);
-                border: 1px solid var(--primary-darkest);
+                background: var(--pl-primary-darkest);
+                border: 1px solid var(--pl-primary-darkest);
             }
             
             :host([variant=secondary]){
-                background: var(--primary-lightest);
-                color: var(--primary-base);
-                border: 1px solid var(--primary-light);
+                background: var(--pl-primary-lightest);
+                color: var(--pl-primary-base);
+                border: 1px solid var(--pl-primary-light);
             }
@@ -108,11 +108,11 @@
             :host([variant=secondary]:focus-visible:not([loading],[disabled])){
-                background: var(--primary-light);
-                color: var(--primary-dark);
-                border: 1px solid var(--primary-light);
+                background: var(--pl-primary-light);
+                color: var(--pl-primary-dark);
+                border: 1px solid var(--pl-primary-light);
             }
 
             :host([variant=secondary]:active:not([loading],[disabled])){
-                background: var(--primary-light);
-                color: var(--primary-darkest);
-                border: 1px solid var(--primary-darkest);
+                background: var(--pl-primary-light);
+                color: var(--pl-primary-darkest);
+                border: 1px solid var(--pl-primary-darkest);
             }
@@ -123,4 +123,4 @@
                 background: transparent;
-                color: var(--primary-base);
-                border: 1px solid var(--primary-base);
+                color: var(--pl-primary-base);
+                border: 1px solid var(--pl-primary-base);
             }
@@ -130,11 +130,11 @@
             :host([variant=ghost]:focus-visible:not([loading],[disabled])){
-                background: var(--primary-light);
-                color: var(--primary-dark);
-                border: 1px solid var(--primary-light);
+                background: var(--pl-primary-light);
+                color: var(--pl-primary-dark);
+                border: 1px solid var(--pl-primary-light);
             }
 
             :host([variant=ghost]:active:not([loading],[disabled])){
-                background: var(--primary-light);
-                color: var(--primary-dark);
-                border: 1px solid var(--primary-dark);
+                background: var(--pl-primary-light);
+                color: var(--pl-primary-dark);
+                border: 1px solid var(--pl-primary-dark);
             }
@@ -145,3 +145,3 @@
                 background: transparent;
-                color: var(--primary-base);
+                color: var(--pl-primary-base);
                 border: 1px solid transparent;
@@ -152,3 +152,3 @@ }
                 background: transparent;
-                color: var(--primary-dark);
+                color: var(--pl-primary-dark);
                 text-decoration: underline;
@@ -164,3 +164,3 @@ }
                 background: transparent;
-                color:  var(--primary-darkest);
+                color:  var(--pl-primary-darkest);
                 text-decoration: underline;
@@ -174,5 +174,5 @@ }
             :host([variant="primary"][disabled]), :host([variant="secondary"][disabled]){
-                background: var(--grey-light);
-                border: 1px solid var(--grey-light);
-                color: var(--grey-dark);
+                background: var(--pl-grey-light);
+                border: 1px solid var(--pl-grey-light);
+                color: var(--pl-grey-dark);
             }
@@ -182,4 +182,4 @@
                 background: transparent;
-                border: 1px solid var(--grey-light);
-                color: var(--grey-dark);
+                border: 1px solid var(--pl-grey-light);
+                color: var(--pl-grey-dark);
             }
@@ -189,3 +189,3 @@
                 background: transparent;
-                color: var(--grey-dark);
+                color: var(--pl-grey-dark);
                 text-decoration: none;
@@ -198,18 +198,16 @@ }
 
-            /* negative */
             :host([negative]) {
-                --primary-base: var(--negative-base);
-                --primary-light: var(--negative-light);
-                --primary-lightest: var(--negative-lightest);
-                --primary-dark: var(--negative-dark);
-                --primary-darkest: var(--negative-darkest);
+                --pl-primary-base: var(--pl-negative-base);
+                --pl-primary-light: var(--pl-negative-light);
+                --pl-primary-lightest: var(--pl-negative-lightest);
+                --pl-primary-dark: var(--pl-negative-dark);
+                --pl-primary-darkest: var(--pl-negative-darkest);
             }
-
         `;
 
     static template = html`
-        <slot name="prefix"></slot>
+        <slot part="prefix" name="prefix"></slot>
         [[label]]
         <slot></slot>
-        <slot name="suffix"></slot>
+        <slot part="suffix" name="suffix"></slot>
     `;
@@ -216,0 +214,0 @@

New alerts

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

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

9617

1.55%

Worsened metrics

Lines of code

193

-0.52%

No dependency changes