@justeattakeaway/pie-button 0.33.0 → 0.35.0

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 (4) hide show
  1. package/README.md +6 -63
  2. package/dist/index.js +39 -39
  3. package/package.json +1 -1
  4. package/src/button.scss +33 -11
package/README.md CHANGED
@@ -14,16 +14,13 @@
14
14
  2. [Installation](#installation)
15
15
  3. [Importing the component](#importing-the-component)
16
16
  4. [Peer Dependencies](#peer-dependencies)
17
- 5. [Local Development](#local-development)
18
- 6. [Props](#props)
19
- 7. [Events](#events)
17
+ 5. [Props](#props)
18
+ 6. [Events](#events)
20
19
  - [HTML example](#html)
21
20
  - [Vue example (using Nuxt 3)](#vue-templates-using-nuxt-3)
22
21
  - [React example (using Next 13)](#react-templates-using-next-13)
23
- 6. [Forms usage](#forms-usage)
24
- 7. [Testing](#testing)
25
- - [Browser Tests](#browser-tests)
26
- - [Visual Tests](#visual-tests)
22
+ 7. [Forms usage](#forms-usage)
23
+ 8. [Contributing](#contributing)
27
24
 
28
25
 
29
26
  ## pie-button
@@ -71,30 +68,6 @@ import { PieButton } from '@justeattakeaway/pie-button/dist/react';
71
68
  > When using `pie-button`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki for more information and how to include these in your application](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies).
72
69
 
73
70
 
74
- ## Local development
75
-
76
- Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
77
-
78
- ```bash
79
- yarn
80
- ```
81
-
82
- To build the `pie-button` package, run the following command:
83
-
84
- ```bash
85
- yarn build --filter=pie-button
86
- ```
87
-
88
- If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
89
-
90
- ```bash
91
- yarn watch --filter=pie-button
92
-
93
- # in a separate terminal tab, run
94
- yarn dev --filter=pie-storybook
95
- ```
96
-
97
-
98
71
  ## Props
99
72
 
100
73
  | Property | Type | Default | Description |
@@ -219,36 +192,6 @@ In this example:
219
192
  - No validation will be performed during submission, thanks to formnovalidate.
220
193
  - The form's submission response will be opened in a new browser tab/window because of the formtarget="_blank" attribute.
221
194
 
222
- ## Testing
223
-
224
- ### Browser tests
225
-
226
- To run the browser tests, run the following command from the root of the monorepo:
195
+ ## Contributing
227
196
 
228
- ```bash
229
- yarn test:browsers --filter=pie-button
230
- ```
231
-
232
- ### Visual tests
233
-
234
- To run the visual regression tests, run the following command from the root of the monorepo:
235
-
236
- ```bash
237
- yarn test:visual --filter=pie-button
238
- ```
239
-
240
- Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
241
-
242
- #### Setup via bash
243
-
244
- ```bash
245
- export PERCY_TOKEN_PIE_BUTTON=abcde
246
- ```
247
-
248
- #### Setup via package.json
249
-
250
- Under scripts `test:visual` replace the environment variable with the below:
251
-
252
- ```bash
253
- PERCY_TOKEN_PIE_BUTTON=abcde
254
- ```
197
+ Check out our [contributing guide](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide) for more information on [local development](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#local-development) and how to run specific [component tests](https://github.com/justeattakeaway/pie/wiki/Contributing-Guide#testing).
package/dist/index.js CHANGED
@@ -6,10 +6,10 @@ const N = (c, l, a) => function(m, y) {
6
6
  get() {
7
7
  return this[b];
8
8
  },
9
- set(h) {
9
+ set(p) {
10
10
  const C = this[b];
11
- l.includes(h) ? this[b] = h : (console.error(
12
- `<${c}> Invalid value "${h}" provided for property "${y}".`,
11
+ l.includes(p) ? this[b] = p : (console.error(
12
+ `<${c}> Invalid value "${p}" provided for property "${y}".`,
13
13
  `Must be one of: ${l.join(" | ")}.`,
14
14
  `Falling back to default value: "${a}"`
15
15
  ), this[b] = a), this.requestUpdate(y, C);
@@ -29,10 +29,10 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
29
29
  "ghost-inverse",
30
30
  "destructive",
31
31
  "destructive-ghost"
32
- ], Ct = ["leading", "trailing"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=large]{--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
32
+ ], Ct = ["leading", "trailing"], St = ["application/x-www-form-urlencoded", "multipart/form-data", "text/plain"], Vt = ["post", "get", "dialog"], Nt = ["_self", "_blank", "_parent", "_top"], At = `*,*:before,*:after{box-sizing:border-box}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.o-btn{--btn-border-radius: var(--dt-radius-rounded-e);--btn-font-family: var(--dt-font-interactive-m-family);--btn-font-weight: var(--dt-font-interactive-m-weight);--btn-padding: 10px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--btn-bg-color: var(--dt-color-interactive-brand);--btn-text-color: var(--dt-color-content-interactive-primary);--btn-height--xsmall: 32px;--btn-height--small: 40px;--btn-height--medium: 48px;--btn-height--large: 56px;--btn-height: var(--btn-height--medium);--btn-icon-size: 24px;--spinner-size-s: 20px;--spinner-size-m: 24px;--spinner-border-width-s: 2.5px;--spinner-border-width-m: 3px;--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m);--spinner-base-color-h: var(--dt-color-content-interactive-primary-h);--spinner-base-color-s: var(--dt-color-content-interactive-primary-s);--spinner-base-color-l: var(--dt-color-content-interactive-primary-l);--spinner-left-color-opacity: .35;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), var(--spinner-left-color-opacity));--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-animation-duration: 1.15s;--spinner-animation-timing-function: linear;--spinner-animation-iteration-count: infinite;position:relative;display:flex;gap:var(--dt-spacing-b);align-items:center;justify-content:center;box-sizing:border-box;height:var(--btn-height);padding:var(--btn-padding);border:none;border-radius:var(--btn-border-radius);outline:none;background-color:var(--btn-bg-color);font-family:var(--btn-font-family);font-size:var(--btn-font-size);font-weight:var(--btn-font-weight);color:var(--btn-text-color);line-height:var(--btn-line-height);cursor:pointer;user-select:none;inline-size:var(--btn-inline-size)}.o-btn[variant=primary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--hover-modifier)))}.o-btn[variant=primary]:active:not(:disabled),.o-btn[variant=primary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) + var(--active-modifier)))}.o-btn[variant=primary][size=xsmall],.o-btn[variant=primary][size=small-productive]{--btn-bg-color: var(--dt-color-interactive-primary)}.o-btn[variant=primary][size=xsmall]:hover:not(:disabled),.o-btn[variant=primary][size=small-productive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-02));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--hover-modifier)))}.o-btn[variant=primary][size=xsmall]:active:not(:disabled),.o-btn[variant=primary][size=xsmall][isLoading]:not(:disabled),.o-btn[variant=primary][size=small-productive]:active:not(:disabled),.o-btn[variant=primary][size=small-productive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-02));--btn-bg-color: hsl(var(--dt-color-interactive-primary-h), var(--dt-color-interactive-primary-s), calc(var(--dt-color-interactive-primary-l) + var(--active-modifier)))}.o-btn[variant=secondary]{--btn-bg-color: var(--dt-color-interactive-secondary);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=secondary]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--hover-modifier)))}.o-btn[variant=secondary]:active:not(:disabled),.o-btn[variant=secondary][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-secondary-h), var(--dt-color-interactive-secondary-s), calc(var(--dt-color-interactive-secondary-l) + var(--active-modifier)))}.o-btn[variant=outline]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-secondary);border:1px solid var(--dt-color-border-strong);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=outline]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=outline]:active:not(:disabled),.o-btn[variant=outline][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-link);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=ghost]:active:not(:disabled),.o-btn[variant=ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[variant=inverse]{--btn-bg-color: var(--dt-color-interactive-inverse);--btn-text-color: var(--dt-color-content-interactive-secondary);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--hover-modifier)))}.o-btn[variant=inverse]:active:not(:disabled),.o-btn[variant=inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-interactive-inverse-h), var(--dt-color-interactive-inverse-s), calc(var(--dt-color-interactive-inverse-l) + var(--active-modifier)))}.o-btn[variant=ghost-inverse],.o-btn[variant=outline-inverse]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-primary)}.o-btn[variant=ghost-inverse]:hover:not(:disabled),.o-btn[variant=outline-inverse]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--hover-modifier))}.o-btn[variant=ghost-inverse]:active:not(:disabled),.o-btn[variant=ghost-inverse][isLoading]:not(:disabled),.o-btn[variant=outline-inverse]:active:not(:disabled),.o-btn[variant=outline-inverse][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-container-default-h), var(--dt-color-container-default-s), var(--dt-color-container-default-l), var(--active-modifier))}.o-btn[variant=outline-inverse]{border:1px solid var(--dt-color-border-strong)}.o-btn[variant=destructive]{--btn-bg-color: var(--dt-color-support-error)}.o-btn[variant=destructive]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--hover-modifier)))}.o-btn[variant=destructive]:active:not(:disabled),.o-btn[variant=destructive][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--btn-bg-color: hsl(var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) + var(--active-modifier)))}.o-btn[variant=destructive-ghost]{--btn-bg-color: transparent;--btn-text-color: var(--dt-color-content-interactive-error);--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.o-btn[variant=destructive-ghost]:hover:not(:disabled){--hover-modifier: calc(-1 * var(--dt-color-hover-01));--hover-modifier: var(--dt-color-hover-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier))}.o-btn[variant=destructive-ghost]:active:not(:disabled),.o-btn[variant=destructive-ghost][isLoading]:not(:disabled){--active-modifier: calc(-1 * var(--dt-color-active-01));--active-modifier: var(--dt-color-active-01);--btn-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier))}.o-btn[isFullWidth]{--btn-inline-size: 100%}.o-btn[disabled]{--btn-text-color: var(--dt-color-content-disabled) !important;cursor:not-allowed}.o-btn[disabled]:not([variant=ghost],[variant=ghost-inverse],[variant=destructive-ghost]){--btn-bg-color: var(--dt-color-disabled-01) !important}.o-btn[disabled][variant=outline]{border-color:var(--dt-color-disabled-01)!important}.o-btn[size=xsmall]{--btn-height: var(--btn-height--xsmall);--btn-padding: 6px var(--dt-spacing-b);--btn-font-size: calc(var(--dt-font-size-14) * 1px);--btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);--btn-icon-size: 16px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive],.o-btn[size=small-productive]{--btn-height: var(--btn-height--small);--btn-icon-size: 20px;--spinner-size: var(--spinner-size-s);--spinner-border-width: var(--spinner-border-width-s)}.o-btn[size=small-expressive]{--btn-padding: 6px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px)}.o-btn[size=small-productive]{--btn-padding: 8px var(--dt-spacing-d);--btn-font-size: calc(var(--dt-font-size-16) * 1px);--btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px)}.o-btn[size=large]{--btn-height: var(--btn-height--large);--btn-padding: 14px var(--dt-spacing-e);--btn-font-size: calc(var(--dt-font-size-20) * 1px);--btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);--spinner-size: var(--spinner-size-m);--spinner-border-width: var(--spinner-border-width-m)}.o-btn[isLoading]:before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;height:var(--spinner-size);width:var(--spinner-size);display:block;background-color:transparent;border-radius:50%;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);border-width:var(--spinner-border-width);border-style:solid;will-change:transform;animation:rotate360 var(--spinner-animation-duration) var(--spinner-animation-timing-function) var(--spinner-animation-iteration-count)}.o-btn[isLoading]>*{visibility:hidden}.o-btn:focus-visible{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}::slotted(svg){height:var(--btn-icon-size);width:var(--btn-icon-size)}
33
33
  `;
34
34
  (function() {
35
- const c = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), h = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
35
+ const c = /* @__PURE__ */ new WeakMap(), l = /* @__PURE__ */ new WeakMap(), a = /* @__PURE__ */ new WeakMap(), d = /* @__PURE__ */ new WeakMap(), m = /* @__PURE__ */ new WeakMap(), y = /* @__PURE__ */ new WeakMap(), b = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), C = /* @__PURE__ */ new WeakMap(), A = /* @__PURE__ */ new WeakMap(), W = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), D = /* @__PURE__ */ new WeakMap(), B = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), L = {
36
36
  ariaAtomic: "aria-atomic",
37
37
  ariaAutoComplete: "aria-autocomplete",
38
38
  ariaBusy: "aria-busy",
@@ -128,7 +128,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
128
128
  n.setAttribute("internals-valid", v.validity.valid.toString()), n.setAttribute("internals-invalid", (!v.validity.valid).toString()), n.setAttribute("aria-invalid", (!v.validity.valid).toString()), F.delete(n);
129
129
  }
130
130
  if (n.localName === "form") {
131
- const v = h.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
131
+ const v = p.get(n), x = document.createTreeWalker(n, NodeFilter.SHOW_ELEMENT, {
132
132
  acceptNode(rt) {
133
133
  return d.has(rt) && !(v && v.has(rt)) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
134
134
  }
@@ -181,7 +181,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
181
181
  t[0].id || (e = `${t[0].htmlFor}_Label`, t[0].id = e), r.setAttribute("aria-labelledby", e);
182
182
  }
183
183
  }, I = (r) => {
184
- const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = h.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), i = [...t, ...o].includes(!1);
184
+ const t = Array.from(r.elements).filter((s) => !s.tagName.includes("-") && s.validity).map((s) => s.validity.valid), e = p.get(r) || [], o = Array.from(e).filter((s) => s.isConnected).map((s) => d.get(s).validity.valid), i = [...t, ...o].includes(!1);
185
185
  r.toggleAttribute("internals-invalid", i), r.toggleAttribute("internals-valid", !i);
186
186
  }, lt = (r) => {
187
187
  I(T(r.target));
@@ -191,25 +191,25 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
191
191
  const t = ["button[type=submit]", "input[type=submit]", "button:not([type])"].map((e) => `${e}:not([disabled])`).map((e) => `${e}:not([form])${r.id ? `,${e}[form='${r.id}']` : ""}`).join(",");
192
192
  r.addEventListener("click", (e) => {
193
193
  if (e.target.closest(t)) {
194
- const i = h.get(r);
194
+ const i = p.get(r);
195
195
  if (r.noValidate)
196
196
  return;
197
197
  i.size && Array.from(i).reverse().map((u) => d.get(u).reportValidity()).includes(!1) && e.preventDefault();
198
198
  }
199
199
  });
200
200
  }, vt = (r) => {
201
- const t = h.get(r.target);
201
+ const t = p.get(r.target);
202
202
  t && t.size && t.forEach((e) => {
203
203
  e.constructor.formAssociated && e.formResetCallback && e.formResetCallback.apply(e);
204
204
  });
205
205
  }, Q = (r, t, e) => {
206
206
  if (t) {
207
- const o = h.get(t);
207
+ const o = p.get(t);
208
208
  if (o)
209
209
  o.add(r);
210
210
  else {
211
211
  const i = /* @__PURE__ */ new Set();
212
- i.add(r), h.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
212
+ i.add(r), p.set(t, i), dt(t), t.addEventListener("reset", vt), t.addEventListener("input", lt), t.addEventListener("change", ct);
213
213
  }
214
214
  y.set(t, { ref: r, internals: e }), r.constructor.formAssociated && r.formAssociatedCallback && setTimeout(() => {
215
215
  r.formAssociatedCallback.apply(r, [t]);
@@ -222,7 +222,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
222
222
  if (!r.constructor.formAssociated)
223
223
  throw new e(t);
224
224
  }, X = (r, t, e) => {
225
- const o = h.get(r);
225
+ const o = p.get(r);
226
226
  return o && o.size && o.forEach((i) => {
227
227
  d.get(i)[e]() || (t = !1);
228
228
  }), t;
@@ -235,12 +235,12 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
235
235
  function S() {
236
236
  return typeof MutationObserver < "u";
237
237
  }
238
- class pt {
238
+ class ht {
239
239
  constructor() {
240
240
  this.badInput = !1, this.customError = !1, this.patternMismatch = !1, this.rangeOverflow = !1, this.rangeUnderflow = !1, this.stepMismatch = !1, this.tooLong = !1, this.tooShort = !1, this.typeMismatch = !1, this.valid = !0, this.valueMissing = !1, Object.seal(this);
241
241
  }
242
242
  }
243
- const ht = (r) => (r.badInput = !1, r.customError = !1, r.patternMismatch = !1, r.rangeOverflow = !1, r.rangeUnderflow = !1, r.stepMismatch = !1, r.tooLong = !1, r.tooShort = !1, r.typeMismatch = !1, r.valid = !0, r.valueMissing = !1, r), mt = (r, t, e) => (r.valid = bt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && I(e), r), bt = (r) => {
243
+ const pt = (r) => (r.badInput = !1, r.customError = !1, r.patternMismatch = !1, r.rangeOverflow = !1, r.rangeUnderflow = !1, r.stepMismatch = !1, r.tooLong = !1, r.tooShort = !1, r.typeMismatch = !1, r.valid = !0, r.valueMissing = !1, r), mt = (r, t, e) => (r.valid = bt(t), Object.keys(t).forEach((o) => r[o] = t[o]), e && I(e), r), bt = (r) => {
244
244
  let t = !0;
245
245
  for (let e in r)
246
246
  e !== "valid" && r[e] !== !1 && (t = !1);
@@ -333,7 +333,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
333
333
  const { get: i } = Object.getOwnPropertyDescriptor(HTMLFormElement.prototype, "elements");
334
334
  Object.defineProperty(HTMLFormElement.prototype, "elements", {
335
335
  get(...s) {
336
- const n = i.call(this, ...s), u = Array.from(h.get(this) || []);
336
+ const n = i.call(this, ...s), u = Array.from(p.get(this) || []);
337
337
  if (u.length === 0)
338
338
  return n;
339
339
  const v = Array.from(n).concat(u).sort((x, w) => x.compareDocumentPosition ? x.compareDocumentPosition(w) & 2 ? 1 : -1 : 0);
@@ -348,7 +348,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
348
348
  constructor(t) {
349
349
  if (!t || !t.tagName || t.tagName.indexOf("-") === -1)
350
350
  throw new TypeError("Illegal constructor");
351
- const e = t.getRootNode(), o = new pt();
351
+ const e = t.getRootNode(), o = new ht();
352
352
  this.states = new V(t), c.set(this, t), l.set(this, o), d.set(t, this), it(t, this), st(t, this), Object.seal(this), e instanceof DocumentFragment && nt(e);
353
353
  }
354
354
  checkValidity() {
@@ -411,7 +411,7 @@ const Mt = ["xsmall", "small-productive", "small-expressive", "medium", "large"]
411
411
  const s = l.get(this), n = {};
412
412
  for (const x in t)
413
413
  n[x] = t[x];
414
- Object.keys(n).length === 0 && ht(s);
414
+ Object.keys(n).length === 0 && pt(s);
415
415
  const u = { ...s, ...n };
416
416
  delete u.valid;
417
417
  const { valid: v } = mt(s, u, this.form);
@@ -512,7 +512,7 @@ var Ft = Object.defineProperty, Lt = Object.getOwnPropertyDescriptor, g = (c, l,
512
512
  return d && m && Ft(l, a, m), m;
513
513
  };
514
514
  const z = "pie-button";
515
- class p extends Et {
515
+ class h extends Et {
516
516
  constructor() {
517
517
  super(), this.size = "medium", this.type = "submit", this.variant = "primary", this.iconPlacement = "leading", this.disabled = !1, this.isLoading = !1, this.isFullWidth = !1, this._internals = this.attachInternals();
518
518
  }
@@ -544,7 +544,7 @@ class p extends Et {
544
544
  variant: m,
545
545
  size: y,
546
546
  isLoading: b,
547
- iconPlacement: h
547
+ iconPlacement: p
548
548
  } = this;
549
549
  return R`
550
550
  <button
@@ -556,9 +556,9 @@ class p extends Et {
556
556
  ?disabled=${a}
557
557
  ?isFullWidth=${d}
558
558
  ?isLoading=${b}>
559
- ${h === "leading" ? R`<slot name="icon"></slot>` : ot}
559
+ ${p === "leading" ? R`<slot name="icon"></slot>` : ot}
560
560
  <slot></slot>
561
- ${h === "trailing" ? R`<slot name="icon"></slot>` : ot}
561
+ ${p === "trailing" ? R`<slot name="icon"></slot>` : ot}
562
562
  </button>`;
563
563
  }
564
564
  focus() {
@@ -566,57 +566,57 @@ class p extends Et {
566
566
  (a = (l = this.shadowRoot) == null ? void 0 : l.querySelector("button")) == null || a.focus();
567
567
  }
568
568
  }
569
- p.formAssociated = !0;
570
- p.styles = wt(At);
569
+ h.formAssociated = !0;
570
+ h.styles = wt(At);
571
571
  g([
572
572
  f(),
573
573
  N(z, Mt, "medium")
574
- ], p.prototype, "size", 2);
574
+ ], h.prototype, "size", 2);
575
575
  g([
576
576
  f(),
577
577
  N(z, kt, "submit")
578
- ], p.prototype, "type", 2);
578
+ ], h.prototype, "type", 2);
579
579
  g([
580
580
  f(),
581
581
  N(z, zt, "primary")
582
- ], p.prototype, "variant", 2);
582
+ ], h.prototype, "variant", 2);
583
583
  g([
584
584
  f({ type: String }),
585
585
  N(z, Ct, "leading")
586
- ], p.prototype, "iconPlacement", 2);
586
+ ], h.prototype, "iconPlacement", 2);
587
587
  g([
588
588
  f({ type: Boolean })
589
- ], p.prototype, "disabled", 2);
589
+ ], h.prototype, "disabled", 2);
590
590
  g([
591
591
  f({ type: Boolean, reflect: !0 })
592
- ], p.prototype, "isLoading", 2);
592
+ ], h.prototype, "isLoading", 2);
593
593
  g([
594
594
  f({ type: Boolean })
595
- ], p.prototype, "isFullWidth", 2);
595
+ ], h.prototype, "isFullWidth", 2);
596
596
  g([
597
597
  f({ type: String })
598
- ], p.prototype, "name", 2);
598
+ ], h.prototype, "name", 2);
599
599
  g([
600
600
  f({ type: String })
601
- ], p.prototype, "value", 2);
601
+ ], h.prototype, "value", 2);
602
602
  g([
603
603
  f()
604
- ], p.prototype, "formaction", 2);
604
+ ], h.prototype, "formaction", 2);
605
605
  g([
606
606
  f()
607
- ], p.prototype, "formenctype", 2);
607
+ ], h.prototype, "formenctype", 2);
608
608
  g([
609
609
  f()
610
- ], p.prototype, "formmethod", 2);
610
+ ], h.prototype, "formmethod", 2);
611
611
  g([
612
612
  f({ type: Boolean })
613
- ], p.prototype, "formnovalidate", 2);
613
+ ], h.prototype, "formnovalidate", 2);
614
614
  g([
615
615
  f()
616
- ], p.prototype, "formtarget", 2);
617
- xt(z, p);
616
+ ], h.prototype, "formtarget", 2);
617
+ xt(z, h);
618
618
  export {
619
- p as PieButton,
619
+ h as PieButton,
620
620
  St as formEncodingtypes,
621
621
  Vt as formMethodTypes,
622
622
  Nt as formTargetTypes,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-button",
3
- "version": "0.33.0",
3
+ "version": "0.35.0",
4
4
  "description": "PIE design system button built using web components",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
package/src/button.scss CHANGED
@@ -14,7 +14,11 @@
14
14
  */
15
15
  @mixin button-interactive-states($bg-color, $mode: 'default') {
16
16
  &:hover:not(:disabled) {
17
- --hover-modifier: calc(-1 * var(--dt-color-hover-01));
17
+ @if $mode == 'alt' {
18
+ --hover-modifier: calc(-1 * var(--dt-color-hover-02));
19
+ } @else {
20
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
21
+ }
18
22
 
19
23
  // for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
20
24
  @if $mode == 'transparent' {
@@ -27,7 +31,11 @@
27
31
 
28
32
  &:active:not(:disabled),
29
33
  &[isLoading]:not(:disabled) {
30
- --active-modifier: calc(-1 * var(--dt-color-active-01));
34
+ @if $mode == 'alt' {
35
+ --active-modifier: calc(-1 * var(--dt-color-active-02));
36
+ } @else {
37
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
38
+ }
31
39
 
32
40
  @if $mode == 'transparent' {
33
41
  --active-modifier: var(--dt-color-active-01);
@@ -77,10 +85,19 @@
77
85
  --btn-bg-color: var(--dt-color-interactive-brand);
78
86
  --btn-text-color: var(--dt-color-content-interactive-primary);
79
87
 
80
- // Sizing is set to Medium button icon size, as that is the default
88
+ // Heights for the different button sizes
89
+ --btn-height--xsmall: 32px;
90
+ --btn-height--small: 40px;
91
+ --btn-height--medium: 48px;
92
+ --btn-height--large: 56px;
93
+
94
+ // Set height to medium (the default state)
95
+ --btn-height: var(--btn-height--medium);
96
+
97
+ // Set icon size to the medium button icon size (the default state)
81
98
  --btn-icon-size: 24px;
82
99
 
83
- // Spinner sizes defaults - currently set for the medium button styles
100
+ // Spinner size defaults - currently set for the medium button size (the default state)
84
101
  --spinner-size-s: 20px;
85
102
  --spinner-size-m: 24px;
86
103
  --spinner-border-width-s: 2.5px;
@@ -106,6 +123,7 @@
106
123
  align-items: center;
107
124
  justify-content: center;
108
125
  box-sizing: border-box;
126
+ height: var(--btn-height);
109
127
  padding: var(--btn-padding);
110
128
  border: none;
111
129
  border-radius: var(--btn-border-radius);
@@ -134,7 +152,7 @@
134
152
  **/
135
153
  --btn-bg-color: var(--dt-color-interactive-primary);
136
154
 
137
- @include button-interactive-states('--dt-color-interactive-primary');
155
+ @include button-interactive-states('--dt-color-interactive-primary', 'alt');
138
156
  }
139
157
  }
140
158
 
@@ -228,6 +246,7 @@
228
246
  }
229
247
 
230
248
  &[size='xsmall'] {
249
+ --btn-height: var(--btn-height--xsmall);
231
250
  --btn-padding: 6px var(--dt-spacing-b);
232
251
  --btn-font-size: #{p.font-size(--dt-font-size-14)};
233
252
  --btn-line-height: calc(var(--dt-font-size-14-line-height) * 1px);
@@ -236,22 +255,24 @@
236
255
  --spinner-border-width: var(--spinner-border-width-s);
237
256
  }
238
257
 
258
+ &[size='small-expressive'],
259
+ &[size='small-productive'] {
260
+ --btn-height: var(--btn-height--small);
261
+ --btn-icon-size: 20px;
262
+ --spinner-size: var(--spinner-size-s);
263
+ --spinner-border-width: var(--spinner-border-width-s);
264
+ }
265
+
239
266
  &[size='small-expressive'] {
240
267
  --btn-padding: 6px var(--dt-spacing-d);
241
268
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
242
269
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);
243
- --btn-icon-size: 20px;
244
- --spinner-size: var(--spinner-size-s);
245
- --spinner-border-width: var(--spinner-border-width-s);
246
270
  }
247
271
 
248
272
  &[size='small-productive'] {
249
273
  --btn-padding: 8px var(--dt-spacing-d);
250
274
  --btn-font-size: #{p.font-size(--dt-font-size-16)};
251
275
  --btn-line-height: calc(var(--dt-font-size-16-line-height) * 1px);
252
- --btn-icon-size: 20px;
253
- --spinner-size: var(--spinner-size-s);
254
- --spinner-border-width: var(--spinner-border-width-s);
255
276
  }
256
277
 
257
278
  &[size='medium'] {
@@ -259,6 +280,7 @@
259
280
  }
260
281
 
261
282
  &[size='large'] {
283
+ --btn-height: var(--btn-height--large);
262
284
  --btn-padding: 14px var(--dt-spacing-e);
263
285
  --btn-font-size: #{p.font-size(--dt-font-size-20)};
264
286
  --btn-line-height: calc(var(--dt-font-size-20-line-height) * 1px);