@kickstartds/base - npm Package Compare versions

Comparing version 4.0.5 to 4.0.6-canary.6955.16723f1.0

lib/button/button-tokens.json

@@ -14,16 +14,2 @@ {
   ],
-  "--c-button--font": [
-    {
-      "value": "var(--ks-font-interface-m)",
-      "selector": ".c-button"
-    },
-    {
-      "value": "var(--ks-font-interface-s)",
-      "selector": ".c-button--small"
-    },
-    {
-      "value": "var(--ks-font-interface-l)",
-      "selector": ".c-button--large"
-    }
-  ],
   "--c-button--font-weight": [
@@ -41,16 +27,2 @@ {
   ],
-  "--c-button--padding": [
-    {
-      "value": "0.4rem 1.3rem 0.35rem",
-      "selector": ".c-button"
-    },
-    {
-      "value": "0.4rem 1rem 0.45rem",
-      "selector": ".c-button--small"
-    },
-    {
-      "value": "0.45rem 1.7rem 0.5rem",
-      "selector": ".c-button--large"
-    }
-  ],
   "--c-button--border-radius": [
@@ -66,2 +38,14 @@ {
       "selector": ".c-button"
+    },
+    {
+      "value": "var(--c-button_clear--border-color)",
+      "selector": ".c-button--clear"
+    },
+    {
+      "value": "var(--c-button_solid--border-color)",
+      "selector": ".c-button--solid"
+    },
+    {
+      "value": "var(--c-button_outline--border-color)",
+      "selector": ".c-button--outline"
     }
@@ -75,11 +59,11 @@ ],
     {
-      "value": "var(--ks-background-color-clear-interactive)",
+      "value": "var(--c-button_clear--background-color)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-background-color-primary-interactive)",
+      "value": "var(--c-button_solid--background-color)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-background-color-clear-interactive)",
+      "value": "var(--c-button_outline--background-color)",
       "selector": ".c-button--outline"
@@ -94,2 +78,152 @@ }
   ],
+  "--c-button--border-width": [
+    {
+      "value": "var(--ks-border-width-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_small--font": [
+    {
+      "value": "var(--ks-font-interface-s)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_small--padding": [
+    {
+      "value": "0.4em 1.25em 0.45em",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_medium--font": [
+    {
+      "value": "var(--ks-font-interface-m)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_medium--padding": [
+    {
+      "value": "0.4em 1.25em 0.45em",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_large--font": [
+    {
+      "value": "var(--ks-font-interface-l)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_large--padding": [
+    {
+      "value": "0.4em 1.25em 0.45em",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--color": [
+    {
+      "value": "var(--ks-color-fg-inverted)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--color_hover": [
+    {
+      "value": "var(--ks-color-fg-inverted)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--color_active": [
+    {
+      "value": "var(--ks-color-fg-inverted)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--background-color": [
+    {
+      "value": "var(--ks-background-color-primary-interactive)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--background-color_hover": [
+    {
+      "value": "var(--ks-background-color-primary-interactive-hover)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_solid--background-color_active": [
+    {
+      "value": "var(--ks-background-color-primary-interactive-active)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--color": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--color_hover": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--color_active": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--border-color": [
+    {
+      "value": "var(--ks-border-color-interface-interactive)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--border-color_hover": [
+    {
+      "value": "var(--ks-border-color-interface-interactive-hover)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_outline--border-color_active": [
+    {
+      "value": "var(--ks-border-color-interface-interactive-active)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--color": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--color_hover": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--color_active": [
+    {
+      "value": "var(--ks-text-color-default)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--background-color": [
+    {
+      "value": "var(--ks-background-color-clear-interactive)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--background-color_hover": [
+    {
+      "value": "var(--ks-background-color-clear-interactive-hover)",
+      "selector": ".c-button"
+    }
+  ],
+  "--c-button_clear--background-color_active": [
+    {
+      "value": "var(--ks-background-color-clear-interactive-active)",
+      "selector": ".c-button"
+    }
+  ],
   "--c-button_fill-animation--background-color-hover": [
@@ -101,104 +235,174 @@ {
   ],
+  "--c-button_fill-animation--color-hover": [
+    {
+      "value": "var(--c-button--color-secondary)",
+      "selector": ".c-button--clear"
+    },
+    {
+      "value": "var(--c-button--color-primary)",
+      "selector": ".c-button--clear-inverted , .c-button--solid"
+    },
+    {
+      "value": "var(--c-button--color-secondary)",
+      "selector": ".c-button--outline , .c-button--solid-inverted"
+    },
+    {
+      "value": "var(--c-button--color-primary)",
+      "selector": ".c-button--outline-inverted"
+    }
+  ],
   "--c-button--color": [
     {
-      "value": "var(--ks-text-color-primary-interactive)",
+      "value": "var(--c-button_clear--color)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-text-color-primary-inverted-interactive)",
+      "value": "var(--c-button_solid--color)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-text-color-primary-interactive)",
+      "value": "var(--c-button_outline--color)",
       "selector": ".c-button--outline"
     }
   ],
-  "--c-button--color-hover": [
+  "--c-button--color_hover": [
     {
-      "value": "var(--ks-text-color-primary-interactive-hover)",
+      "value": "var(--c-button_clear--color_hover)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-text-color-primary-inverted-interactive-hover)",
+      "value": "var(--c-button_solid--color_hover)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-text-color-primary-interactive-hover)",
+      "value": "var(--c-button_outline--color_hover)",
       "selector": ".c-button--outline"
     }
   ],
-  "--c-button--color-active": [
+  "--c-button--color_active": [
     {
-      "value": "var(--ks-text-color-primary-interactive-hover)",
+      "value": "var(--c-button_clear--color_active)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-text-color-primary-inverted-interactive-hover)",
+      "value": "var(--c-button_solid--color_active)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-text-color-primary-interactive-hover)",
+      "value": "var(--c-button_outline--color_active)",
       "selector": ".c-button--outline"
     }
   ],
-  "--c-button--background-color-hover": [
+  "--c-button--border-color_hover": [
     {
-      "value": "var(--ks-background-color-clear-interactive-hover)",
+      "value": "var(--c-button_clear--border-color_hover)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-background-color-primary-interactive-hover)",
+      "value": "var(--c-button_solid--border-color_hover)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-background-color-clear-interactive-hover)",
+      "value": "var(--c-button_outline--border-color_hover)",
       "selector": ".c-button--outline"
     }
   ],
-  "--c-button--background-color-active": [
+  "--c-button--border-color_active": [
     {
-      "value": "var(--ks-background-color-clear-interactive-active)",
+      "value": "var(--c-button_clear--border-color_active)",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--ks-background-color-primary-interactive-active)",
+      "value": "var(--c-button_solid--border-color_active)",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--ks-background-color-clear-interactive-active)",
+      "value": "var( --c-button_outline--border-color_active )",
       "selector": ".c-button--outline"
     }
   ],
-  "--c-button_fill-animation--color-hover": [
+  "--c-button--border-color_selected": [
     {
-      "value": "var(--c-button--color-secondary)",
+      "value": "var( --c-button_clear--border-color_selected )",
       "selector": ".c-button--clear"
     },
     {
-      "value": "var(--c-button--color-primary)",
+      "value": "var( --c-button_solid--border-color_selected )",
       "selector": ".c-button--solid"
     },
     {
-      "value": "var(--c-button--color-secondary)",
+      "value": "var( --c-button_outline--border-color_selected )",
       "selector": ".c-button--outline"
+    }
+  ],
+  "--c-button--background-color_hover": [
+    {
+      "value": "var( --c-button_clear--background-color_hover )",
+      "selector": ".c-button--clear"
     },
     {
-      "value": "var(--c-button--color-primary)",
-      "selector": ".c-button--clear-inverted"
+      "value": "var( --c-button_solid--background-color_hover )",
+      "selector": ".c-button--solid"
     },
     {
-      "value": "var(--c-button--color-secondary)",
-      "selector": ".c-button--solid-inverted"
+      "value": "var( --c-button_outline--background-color_hover )",
+      "selector": ".c-button--outline"
+    }
+  ],
+  "--c-button--background-color_active": [
+    {
+      "value": "var( --c-button_clear--background-color_active )",
+      "selector": ".c-button--clear"
     },
     {
-      "value": "var(--c-button--color-primary)",
-      "selector": ".c-button--outline-inverted"
+      "value": "var( --c-button_solid--background-color_active )",
+      "selector": ".c-button--solid"
+    },
+    {
+      "value": "var( --c-button_outline--background-color_active )",
+      "selector": ".c-button--outline"
     }
   ],
-  "--c-button--border-width": [
+  "--c-button--background-color_selected": [
     {
-      "value": "1px",
+      "value": "var( --c-button_clear--background-color_selected )",
+      "selector": ".c-button--clear"
+    },
+    {
+      "value": "var( --c-button_solid--background-color_selected )",
+      "selector": ".c-button--solid"
+    },
+    {
+      "value": "var( --c-button_outline--background-color_selected )",
       "selector": ".c-button--outline"
     }
+  ],
+  "--c-button--padding": [
+    {
+      "value": "var(--c-button_small--padding)",
+      "selector": ".c-button--small"
+    },
+    {
+      "value": "var(--c-button_medium--padding)",
+      "selector": ".c-button--medium"
+    },
+    {
+      "value": "var(--c-button_large--padding)",
+      "selector": ".c-button--large"
+    }
+  ],
+  "--c-button--font": [
+    {
+      "value": "var(--c-button_small--font)",
+      "selector": ".c-button--small"
+    },
+    {
+      "value": "var(--c-button_medium--font)",
+      "selector": ".c-button--medium"
+    },
+    {
+      "value": "var(--c-button_large--font)",
+      "selector": ".c-button--large"
+    }
   ]
 }

lib/button/index.js

@@ -1,1 +0,1 @@
-import e from"@babel/runtime/helpers/esm/defineProperty";import{forwardRef as t,createContext as r,createElement as n,useContext as o}from"react";import i from"@babel/runtime/helpers/esm/objectWithoutProperties";import c from"classnames";import{defaultRenderFn as s}from"@kickstartds/core/lib/core";import{Link as l}from"../link/index.js";import{Icon as a}from"../icon/index.js";import{jsxs as b,jsx as p}from"react/jsx-runtime";import"./button.css";import"../icon/icon.css";const m=["label","type","variant","inverted","size","href","newTab","className","fillAnimation","iconAnimation","component","iconBefore","iconAfter","renderLabel","disabled"];function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?f(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?O(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}const j=t(((e,t)=>{let{label:r,type:n="button",variant:o="solid",inverted:f,size:O="medium",href:d,newTab:j,className:y,fillAnimation:v,iconAnimation:g,component:P,iconBefore:h,iconAfter:w,renderLabel:k=s,disabled:D}=e,A=i(e,m);const S=!!d;return b(S?l:"button",u(u(u({type:S?void 0:n,href:S?d:void 0,className:c("c-button",`c-button--${o}`,{"c-button--small":"small"===O,"c-button--large":"large"===O,"c-button--fill-animation":v,"c-button--icon-animation":g,"c-button--disabled":S&&D},y),"ks-inverted":null==f?void 0:f.toString(),"ks-component":P},S&&j?{target:"_blank",rel:"noopener"}:{}),{},{disabled:S?void 0:D,ref:t},A),{},{children:[(null==h?void 0:h.icon)&&p(a,u({},h)),r&&p("span",{children:k(r)}),(null==w?void 0:w.icon)&&p(a,u({},w))]}))}));const y=r(j);const v=t(((e,t)=>n(o(y),d(d({},e),{},{ref:t}))));export{v as Button,y as ButtonContext,j as ButtonContextDefault};
+import e from"@babel/runtime/helpers/esm/defineProperty";import{forwardRef as t,createContext as r,createElement as n,useContext as o}from"react";import i from"@babel/runtime/helpers/esm/objectWithoutProperties";import c from"classnames";import{defaultRenderFn as s}from"@kickstartds/core/lib/core";import{Link as l}from"../link/index.js";import{Icon as a}from"../icon/index.js";import{jsxs as b,jsx as p}from"react/jsx-runtime";import"./button.css";import"../icon/icon.css";const m=["label","type","variant","inverted","size","href","newTab","className","fillAnimation","iconAnimation","component","iconBefore","iconAfter","renderLabel","disabled"];function f(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?f(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):f(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function O(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function d(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?O(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}const j=t(((e,t)=>{let{label:r,type:n="button",variant:o="solid",inverted:f,size:O="medium",href:d,newTab:j,className:y,fillAnimation:v,iconAnimation:g,component:P,iconBefore:h,iconAfter:w,renderLabel:k=s,disabled:D}=e,A=i(e,m);const S=!!d;return b(S?l:"button",u(u(u({type:S?void 0:n,href:S?d:void 0,className:c("c-button",`c-button--${o}`,{"c-button--small":"small"===O,"c-button--medium":"medium"===O,"c-button--large":"large"===O,"c-button--fill-animation":v,"c-button--icon-animation":g,"c-button--disabled":S&&D},y),"ks-inverted":null==f?void 0:f.toString(),"ks-component":P},S&&j?{target:"_blank",rel:"noopener"}:{}),{},{disabled:S?void 0:D,ref:t},A),{},{children:[(null==h?void 0:h.icon)&&p(a,u({},h)),r&&p("span",{children:k(r)}),(null==w?void 0:w.icon)&&p(a,u({},w))]}))}));const y=r(j);const v=t(((e,t)=>n(o(y),d(d({},e),{},{ref:t}))));export{v as Button,y as ButtonContext,j as ButtonContextDefault};

package.json

 {
   "name": "@kickstartds/base",
-  "version": "4.0.5",
+  "version": "4.0.6-canary.6955.16723f1.0",
   "description": "kickstartDS Base Module",
@@ -47,3 +47,3 @@ "homepage": "https://www.kickstartDS.com",
   },
-  "gitHead": "f3533b1f9fb319b83d88dfec7c5d46721bda8d37"
+  "gitHead": "16723f14622dedc4b3d4f0c6a528b4a79e87f66c"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

425530

increased by1.82%

Lines of code

10653

increased by2.35%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes