@licklist/design 0.78.46 → 0.78.47

package/dist/v2/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes } from 'react';
 import './Button.scss';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled';
+    variant?: 'primary' | 'primary-soft' | 'secondary-soft' | 'tertiary-soft' | 'primary-outline' | 'outline' | 'secondary' | 'destructive-soft' | 'destructive-strong' | 'info' | 'disabled';
     size?: 'sm' | 'md' | 'lg';
     isLoading?: boolean;
 }

package/dist/v2/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EACJ,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,WAAW,GACX,kBAAkB,GAClB,oBAAoB,GACpB,MAAM,GACN,UAAU,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAI,EAAE,KAAY,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAuBb;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAChE;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,EAAE,eAAe,2CAY9E"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/v2/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAA;AAC5C,OAAO,eAAe,CAAA;AAEtB,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,OAAO,CAAC,EACJ,SAAS,GACT,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,iBAAiB,GACjB,SAAS,GACT,WAAW,GACX,kBAAkB,GAClB,oBAAoB,GACpB,MAAM,GACN,UAAU,CAAA;IACd,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;IACzB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAI,EAAE,KAAY,EAClB,QAAgB,EAChB,SAAiB,EACjB,SAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,WAAW,2CAuBb;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAChE;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,EAAE,eAAe,2CAY9E"}

package/dist/v2/components/Button/Button.scss.js

@@ -1,6 +1,6 @@
 import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".new-button{align-items:center;align-self:flex-start;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-weight:600;gap:var(--spacing-sm);justify-content:center;line-height:20px;min-height:44px;padding:12px 24px;text-align:center;transition:all .2s ease;white-space:nowrap}.new-button--primary{background:#6200ee;color:#fff}.new-button--primary:active,.new-button--primary:focus,.new-button--primary:hover{background:#360083}.new-button--primary-soft{background:#efeffe;color:#5d5bf4}.new-button--primary-soft:hover{background:#cdccfc}.new-button--primary-soft:active{background:#b4b4fa}.new-button--primary-outline{background-color:initial;border:2px solid var(--fills-main-fill-action,#6200ee);color:var(--labels-main-label-action,#6200ee)}.new-button--primary-outline:hover{border:2px solid var(--fills-main-fill-action,#6200ee)}.new-button--primary-outline:active,.new-button--primary-outline:hover{background-color:var(--surfaces-main-background-action-soft,#efe6fd)}.new-button--secondary{background:var(--surface-action-soft);border-radius:var(--sizes-radius-radius,8px);color:var(--label-action)}.new-button--secondary:active,.new-button--secondary:focus,.new-button--secondary:hover{background:#efe6fd}.new-button--secondary-soft{background:var(--surface-action-soft,#efe6fd);color:var(--label-action,#6200ee)}.new-button--secondary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--tertiary-soft{background:#fff;border:1px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52)}.new-button--tertiary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--destructive-soft{background:var(--surface-danger-soft,#fceceb);border-radius:var(--radius-reg,8px);color:var(--label-danger)}.new-button--destructive-soft:hover{background-color:var(--surface-danger-soft-hover,#f5c4c2)}.new-button--destructive-soft:active{background-color:var(--surface-danger-soft-pressed,#e66861);color:var(--label-white,#fff)}.new-button--destructive-strong{background:linear-gradient(180deg,#fff3 0,var(--red-red) 5.77%,var(--red-red-dark) 95.19%,var(--red-red-darkest) 100%),linear-gradient(180deg,var(--red-red-lighter) 0,var(--red-red-darkest) 100%),linear-gradient(90deg,var(--red-red-dark) 0,var(--red-red-dark) 100%);color:var(--labels-main-label-white,#fff)}.new-button--destructive-strong:active,.new-button--destructive-strong:hover{background-color:var(--fills-main-fill-danger,#cc3c35)}.new-button--info{background-color:var(--surfaces-status-background-info,#e7f4fc);color:var(--labels-status-label-info,#0d7fce)}.new-button--disabled,.new-button:disabled{background-color:var(--surfaces-status-background-disabled,#d2d5e3);color:var(--labels-status-label-disabled,#9399b3);cursor:not-allowed;pointer-events:none}.new-button__spinner{animation:spin 1s linear infinite;border:2px solid #0000001a;border-radius:50%;border-top-color:currentcolor;flex-shrink:0;height:16px;width:16px}.new-button__text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px;text-align:center}.new-button__text--primary{color:var(--label-primary)}.new-button__text--secondary{color:var(--label-secondary)}.new-button__text--danger{color:var(--label-danger)}.new-button__text--white{color:var(--label-white)}.new-button__text--action{color:var(--label-action)}.new-button p{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.new-button--sm{font-size:var(--text-sm-size,13px);padding:var(--spacing-xs,2px) var(--spacing-md,8px)}.new-button--md{font-size:var(--text-reg-size,15px);padding:var(--spacing-sm,8px) var(--spacing-reg,16px)}.new-button--lg{font-size:var(--text-large-size,18px);padding:var(--spacing-reg,16px) var(--spacing-lg,24px)}";
+var css_248z = ".new-button{align-items:center;align-self:flex-start;border:none;border-radius:8px;cursor:pointer;display:flex;font-family:var(--font-family-sans,\"Geist\",sans-serif);font-weight:600;gap:var(--spacing-sm);justify-content:center;line-height:20px;min-height:44px;padding:12px 24px;text-align:center;transition:all .2s ease;white-space:nowrap}.new-button--primary{background:#6200ee;color:#fff}.new-button--primary:active,.new-button--primary:focus,.new-button--primary:hover{background:#360083}.new-button--primary-soft{background:#efeffe;color:#5d5bf4}.new-button--primary-soft:hover{background:#cdccfc}.new-button--primary-soft:active{background:#b4b4fa}.new-button--outline{background-color:var(--surface-primary,#fff);border:1px solid var(--border-primary,#e8e9ef);border-radius:6px;color:var(--label-primary,#121e52);font-size:14px;font-weight:500;line-height:20px;min-height:40px;padding:8px 16px 8px 12px}.new-button--outline svg{fill:currentColor;flex-shrink:0}.new-button--outline:hover{background-color:var(--surface-secondary,#f8f8fa);border-color:var(--border-secondary,#d0d3e3)}.new-button--outline:active{background-color:var(--surface-tertiary,#f0f0f5)}.new-button--primary-outline{background-color:initial;border:2px solid var(--fills-main-fill-action,#6200ee);color:var(--labels-main-label-action,#6200ee)}.new-button--primary-outline:hover{border:2px solid var(--fills-main-fill-action,#6200ee)}.new-button--primary-outline:active,.new-button--primary-outline:hover{background-color:var(--surfaces-main-background-action-soft,#efe6fd)}.new-button--secondary{background:var(--surface-action-soft);border-radius:var(--sizes-radius-radius,8px);color:var(--label-action)}.new-button--secondary:active,.new-button--secondary:focus,.new-button--secondary:hover{background:#efe6fd}.new-button--secondary-soft{background:var(--surface-action-soft,#efe6fd);color:var(--label-action,#6200ee)}.new-button--secondary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--tertiary-soft{background:#fff;border:1px solid var(--border-primary,#e8e9ef);color:var(--label-primary,#121e52)}.new-button--tertiary-soft:hover{background:var(--surface-tertiary,#f0f0f5)}.new-button--destructive-soft{background:var(--surface-danger-soft,#fceceb);border-radius:var(--radius-reg,8px);color:var(--label-danger)}.new-button--destructive-soft:hover{background-color:var(--surface-danger-soft-hover,#f5c4c2)}.new-button--destructive-soft:active{background-color:var(--surface-danger-soft-pressed,#e66861);color:var(--label-white,#fff)}.new-button--destructive-strong{background:linear-gradient(180deg,#fff3 0,var(--red-red) 5.77%,var(--red-red-dark) 95.19%,var(--red-red-darkest) 100%),linear-gradient(180deg,var(--red-red-lighter) 0,var(--red-red-darkest) 100%),linear-gradient(90deg,var(--red-red-dark) 0,var(--red-red-dark) 100%);color:var(--labels-main-label-white,#fff)}.new-button--destructive-strong:active,.new-button--destructive-strong:hover{background-color:var(--fills-main-fill-danger,#cc3c35)}.new-button--info{background-color:var(--surfaces-status-background-info,#e7f4fc);color:var(--labels-status-label-info,#0d7fce)}.new-button--disabled,.new-button:disabled{background-color:var(--surfaces-status-background-disabled,#d2d5e3);color:var(--labels-status-label-disabled,#9399b3);cursor:not-allowed;pointer-events:none}.new-button__spinner{animation:spin 1s linear infinite;border:2px solid #0000001a;border-radius:50%;border-top-color:currentcolor;flex-shrink:0;height:16px;width:16px}.new-button__text{font-family:var(--font-family-sans,\"Geist\",sans-serif);font-size:15px;font-style:normal;font-weight:600;line-height:20px;text-align:center}.new-button__text--primary{color:var(--label-primary)}.new-button__text--secondary{color:var(--label-secondary)}.new-button__text--danger{color:var(--label-danger)}.new-button__text--white{color:var(--label-white)}.new-button__text--action{color:var(--label-action)}.new-button p{color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.new-button--sm{font-size:var(--text-sm-size,13px);padding:var(--spacing-xs,2px) var(--spacing-md,8px)}.new-button--md{font-size:var(--text-reg-size,15px);padding:var(--spacing-sm,8px) var(--spacing-reg,16px)}.new-button--lg{font-size:var(--text-large-size,18px);padding:var(--spacing-reg,16px) var(--spacing-lg,24px)}";
 styleInject(css_248z);
 
 export { css_248z as default };

package/dist/v2/styles/components/Button.scss

@@ -47,6 +47,33 @@
     }
   }
 
+  // Neutral Outline (border-primary border, label-primary text)
+  &--outline {
+    border: 1px solid var(--border-primary, #e8e9ef);
+    background-color: var(--surface-primary, #ffffff);
+    color: var(--label-primary, #121e52);
+    font-weight: 500;
+    min-height: 40px;
+    padding: 8px 16px 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 20px;
+
+    svg {
+      fill: currentColor;
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary, #f8f8fa);
+      border-color: var(--border-secondary, #d0d3e3);
+    }
+
+    &:active {
+      background-color: var(--surface-tertiary, #f0f0f5);
+    }
+  }
+
   // Primary - Outline
   &--primary-outline {
     border: 2px solid var(--fills-main-fill-action, #6200ee);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@licklist/design",
-  "version": "0.78.46",
+  "version": "0.78.47",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"

package/src/v2/components/Button/Button.tsx

@@ -8,6 +8,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     | 'secondary-soft'
     | 'tertiary-soft'
     | 'primary-outline'
+    | 'outline'
     | 'secondary'
     | 'destructive-soft'
     | 'destructive-strong'

package/src/v2/styles/components/Button.scss

@@ -47,6 +47,33 @@
     }
   }
 
+  // Neutral Outline (border-primary border, label-primary text)
+  &--outline {
+    border: 1px solid var(--border-primary, #e8e9ef);
+    background-color: var(--surface-primary, #ffffff);
+    color: var(--label-primary, #121e52);
+    font-weight: 500;
+    min-height: 40px;
+    padding: 8px 16px 8px 12px;
+    border-radius: 6px;
+    font-size: 14px;
+    line-height: 20px;
+
+    svg {
+      fill: currentColor;
+      flex-shrink: 0;
+    }
+
+    &:hover {
+      background-color: var(--surface-secondary, #f8f8fa);
+      border-color: var(--border-secondary, #d0d3e3);
+    }
+
+    &:active {
+      background-color: var(--surface-tertiary, #f0f0f5);
+    }
+  }
+
   // Primary - Outline
   &--primary-outline {
     border: 2px solid var(--fills-main-fill-action, #6200ee);