@licklist/design 0.78.7-stage.85 → 0.78.7-stage.86

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/v2/components/Button/Button.scss.js +1 -1
  2. package/dist/v2/styles/components/Button.scss +27 -0
  3. package/package.json +1 -1
  4. package/src/v2/components/Button/Button.tsx +1 -0
  5. package/src/v2/styles/components/Button.scss +27 -0
package/dist/v2/components/Button/Button.scss.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import styleInject from '/opt/atlassian/pipelines/agent/build/node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- 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)}";
3
+ 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)}";
4
4
  styleInject(css_248z);
5
5
 
6
6
  export { css_248z as default };
package/dist/v2/styles/components/Button.scss CHANGED
@@ -47,6 +47,33 @@
47
47
  }
48
48
  }
49
49
 
50
+ // Neutral Outline (border-primary border, label-primary text)
51
+ &--outline {
52
+ border: 1px solid var(--border-primary, #e8e9ef);
53
+ background-color: var(--surface-primary, #ffffff);
54
+ color: var(--label-primary, #121e52);
55
+ font-weight: 500;
56
+ min-height: 40px;
57
+ padding: 8px 16px 8px 12px;
58
+ border-radius: 6px;
59
+ font-size: 14px;
60
+ line-height: 20px;
61
+
62
+ svg {
63
+ fill: currentColor;
64
+ flex-shrink: 0;
65
+ }
66
+
67
+ &:hover {
68
+ background-color: var(--surface-secondary, #f8f8fa);
69
+ border-color: var(--border-secondary, #d0d3e3);
70
+ }
71
+
72
+ &:active {
73
+ background-color: var(--surface-tertiary, #f0f0f5);
74
+ }
75
+ }
76
+
50
77
  // Primary - Outline
51
78
  &--primary-outline {
52
79
  border: 2px solid var(--fills-main-fill-action, #6200ee);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@licklist/design",
3
- "version": "0.78.7-stage.85",
3
+ "version": "0.78.7-stage.86",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+ssh://git@bitbucket.org/bookedit-licklist/licklist_design.git"
package/src/v2/components/Button/Button.tsx CHANGED
@@ -8,6 +8,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
8
8
  | 'secondary-soft'
9
9
  | 'tertiary-soft'
10
10
  | 'primary-outline'
11
+ | 'outline'
11
12
  | 'secondary'
12
13
  | 'destructive-soft'
13
14
  | 'destructive-strong'
package/src/v2/styles/components/Button.scss CHANGED
@@ -47,6 +47,33 @@
47
47
  }
48
48
  }
49
49
 
50
+ // Neutral Outline (border-primary border, label-primary text)
51
+ &--outline {
52
+ border: 1px solid var(--border-primary, #e8e9ef);
53
+ background-color: var(--surface-primary, #ffffff);
54
+ color: var(--label-primary, #121e52);
55
+ font-weight: 500;
56
+ min-height: 40px;
57
+ padding: 8px 16px 8px 12px;
58
+ border-radius: 6px;
59
+ font-size: 14px;
60
+ line-height: 20px;
61
+
62
+ svg {
63
+ fill: currentColor;
64
+ flex-shrink: 0;
65
+ }
66
+
67
+ &:hover {
68
+ background-color: var(--surface-secondary, #f8f8fa);
69
+ border-color: var(--border-secondary, #d0d3e3);
70
+ }
71
+
72
+ &:active {
73
+ background-color: var(--surface-tertiary, #f0f0f5);
74
+ }
75
+ }
76
+
50
77
  // Primary - Outline
51
78
  &--primary-outline {
52
79
  border: 2px solid var(--fills-main-fill-action, #6200ee);