@justeattakeaway/pie-css 0.31.2 → 0.32.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 (9) hide show
  1. package/dist/components/button.css +552 -0
  2. package/docs/components/BUTTON.md +260 -0
  3. package/package.json +2 -2
  4. package/scss/_internal/components/button.scss +95 -0
  5. package/scss/_internal/{radio.scss → components/radio.scss} +1 -1
  6. package/scss/_internal/{typography.scss → helpers/typography.scss} +1 -1
  7. package/scss/mixins/_interactiveStates.scss +2 -2
  8. package/scss/mixins/components/_button.scss +434 -0
  9. package/scss/mixins/components/index.scss +1 -0
package/dist/components/button.css ADDED
@@ -0,0 +1,552 @@
1
+ .c-button {
2
+ --btn-border-radius: var(--dt-radius-rounded-e);
3
+ --btn-font-family: var(--dt-font-interactive-l-family);
4
+ --btn-font-weight: var(--dt-font-interactive-l-weight);
5
+ --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
6
+ --btn-text-color: var(--dt-color-content-interactive-light-solid);
7
+ --btn-padding-vertical-xsmall: 6px;
8
+ --btn-padding-vertical-small-expressive: 8px;
9
+ --btn-padding-vertical-small-productive: 10px;
10
+ --btn-padding-vertical-medium: 12px;
11
+ --btn-padding-vertical-large: 16px;
12
+ --btn-padding-horizontal-small: var(--dt-spacing-b);
13
+ --btn-padding-horizontal-medium: var(--dt-spacing-d);
14
+ --btn-padding-horizontal-large: var(--dt-spacing-e);
15
+ position: relative;
16
+ display: inline-flex;
17
+ gap: var(--dt-spacing-b);
18
+ align-items: center;
19
+ justify-content: center;
20
+ border: none;
21
+ border-radius: var(--btn-border-radius);
22
+ outline: none;
23
+ background-color: var(--int-states-mixin-bg-color);
24
+ cursor: pointer;
25
+ user-select: none;
26
+ text-decoration: none;
27
+ font-family: var(--btn-font-family);
28
+ font-size: var(--btn-font-size);
29
+ font-weight: var(--btn-font-weight);
30
+ color: var(--btn-text-color);
31
+ line-height: var(--btn-line-height);
32
+ inline-size: var(--btn-inline-size);
33
+ }
34
+ .c-button:focus-visible {
35
+ box-shadow: 0 0 0 2px var(--dt-color-focus-inner), 0 0 0 4px var(--dt-color-focus-outer);
36
+ outline: none;
37
+ }
38
+ .c-button .c-pieIcon {
39
+ height: var(--btn-icon-size);
40
+ width: var(--btn-icon-size);
41
+ }
42
+
43
+ .c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
44
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
45
+ --int-states-mixin-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)));
46
+ }
47
+ .c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {
48
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
49
+ --int-states-mixin-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)));
50
+ }
51
+ @supports (background-color: color-mix(in srgb, black, white)) {
52
+ .c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
53
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
54
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
55
+ }
56
+ .c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {
57
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
58
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));
59
+ }
60
+ }
61
+ .c-button--primary.c-button--xsmall, .c-button--primary.c-button--small-productive {
62
+ --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
63
+ --btn-text-color: var(--dt-color-content-interactive-primary-solid);
64
+ }
65
+ .c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
66
+ --hover-modifier: var(--dt-color-hover-02);
67
+ --int-states-mixin-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)));
68
+ }
69
+ .c-button--primary.c-button--xsmall:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.is-loading:not(:disabled, .is-disabled) {
70
+ --active-modifier: var(--dt-color-active-02);
71
+ --int-states-mixin-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)));
72
+ }
73
+ @supports (background-color: color-mix(in srgb, black, white)) {
74
+ .c-button--primary.c-button--xsmall:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive:hover:not(:disabled, .is-disabled, .is-dismissible) {
75
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
76
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
77
+ }
78
+ .c-button--primary.c-button--xsmall:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.is-loading:not(:disabled, .is-disabled) {
79
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
80
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary));
81
+ }
82
+ }
83
+ @media (min-width: 769px) {
84
+ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive, .c-button--primary.c-button--small-productive.c-button--responsive {
85
+ --int-states-mixin-bg-color: var(--dt-color-interactive-brand);
86
+ }
87
+ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible) {
88
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
89
+ --int-states-mixin-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)));
90
+ }
91
+ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive.is-loading:not(:disabled, .is-disabled) {
92
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
93
+ --int-states-mixin-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)));
94
+ }
95
+ @supports (background-color: color-mix(in srgb, black, white)) {
96
+ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive:hover:not(:disabled, .is-disabled, .is-dismissible) {
97
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
98
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));
99
+ }
100
+ .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive.is-loading:not(:disabled, .is-disabled), .c-button--primary.c-button--small-productive.c-button--responsive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.c-button--small-productive.c-button--responsive.is-loading:not(:disabled, .is-disabled) {
101
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
102
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));
103
+ }
104
+ }
105
+ }
106
+
107
+ .c-button--primary-alternative {
108
+ --int-states-mixin-bg-color: var(--dt-color-interactive-primary);
109
+ --btn-text-color: var(--dt-color-content-interactive-primary);
110
+ }
111
+ .c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
112
+ --hover-modifier: var(--dt-color-hover-02);
113
+ --int-states-mixin-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)));
114
+ }
115
+ .c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {
116
+ --active-modifier: var(--dt-color-active-02);
117
+ --int-states-mixin-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)));
118
+ }
119
+ @supports (background-color: color-mix(in srgb, black, white)) {
120
+ .c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
121
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
122
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-primary));
123
+ }
124
+ .c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {
125
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
126
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-primary));
127
+ }
128
+ }
129
+
130
+ .c-button--primary-alternative-dark {
131
+ --int-states-mixin-bg-color: var(--dt-color-interactive-dark);
132
+ --btn-text-color: var(--dt-color-content-interactive-light);
133
+ }
134
+ .c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
135
+ --hover-modifier: var(--dt-color-hover-02);
136
+ --int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--hover-modifier)));
137
+ }
138
+ .c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {
139
+ --active-modifier: var(--dt-color-active-02);
140
+ --int-states-mixin-bg-color: hsl(var(--dt-color-interactive-dark-h), var(--dt-color-interactive-dark-s), calc(var(--dt-color-interactive-dark-l) + var(--active-modifier)));
141
+ }
142
+ @supports (background-color: color-mix(in srgb, black, white)) {
143
+ .c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
144
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
145
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-interactive-dark));
146
+ }
147
+ .c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {
148
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
149
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-interactive-dark));
150
+ }
151
+ }
152
+
153
+ .c-button--secondary {
154
+ --int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
155
+ --btn-text-color: var(--dt-color-content-interactive-secondary);
156
+ }
157
+ .c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
158
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
159
+ --int-states-mixin-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)));
160
+ }
161
+ .c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {
162
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
163
+ --int-states-mixin-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)));
164
+ }
165
+ @supports (background-color: color-mix(in srgb, black, white)) {
166
+ .c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
167
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
168
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-secondary));
169
+ }
170
+ .c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {
171
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
172
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-secondary));
173
+ }
174
+ }
175
+
176
+ .c-button--outline {
177
+ --int-states-mixin-bg-color: transparent;
178
+ --btn-text-color: var(--dt-color-content-interactive-secondary-solid);
179
+ border: 1px solid var(--dt-color-border-strong);
180
+ }
181
+ .c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
182
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
183
+ --hover-modifier: var(--dt-color-hover-01);
184
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
185
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
186
+ }
187
+ .c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {
188
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
189
+ --active-modifier: var(--dt-color-active-01);
190
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
191
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)));
192
+ }
193
+ @supports (background-color: color-mix(in srgb, black, white)) {
194
+ .c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
195
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
196
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
197
+ }
198
+ .c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {
199
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
200
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent));
201
+ }
202
+ }
203
+
204
+ .c-button--ghost {
205
+ --int-states-mixin-bg-color: transparent;
206
+ --btn-text-color: var(--dt-color-content-interactive-secondary-solid);
207
+ }
208
+ .c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
209
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
210
+ --hover-modifier: var(--dt-color-hover-01);
211
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
212
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
213
+ }
214
+ .c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {
215
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
216
+ --active-modifier: var(--dt-color-active-01);
217
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
218
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)));
219
+ }
220
+ @supports (background-color: color-mix(in srgb, black, white)) {
221
+ .c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
222
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
223
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
224
+ }
225
+ .c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {
226
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
227
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent));
228
+ }
229
+ }
230
+
231
+ .c-button--ghost-dark {
232
+ --int-states-mixin-bg-color: transparent;
233
+ --btn-text-color: var(--dt-color-content-interactive-dark-solid);
234
+ }
235
+ .c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
236
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
237
+ --hover-modifier: var(--dt-color-hover-01);
238
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
239
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
240
+ }
241
+ .c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {
242
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
243
+ --active-modifier: var(--dt-color-active-01);
244
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
245
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)));
246
+ }
247
+ @supports (background-color: color-mix(in srgb, black, white)) {
248
+ .c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
249
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
250
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
251
+ }
252
+ .c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {
253
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
254
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent));
255
+ }
256
+ }
257
+
258
+ .c-button--inverse {
259
+ --int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
260
+ --btn-text-color: var(--dt-color-content-interactive-secondary);
261
+ }
262
+ .c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
263
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
264
+ --int-states-mixin-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)));
265
+ }
266
+ .c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {
267
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
268
+ --int-states-mixin-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)));
269
+ }
270
+ @supports (background-color: color-mix(in srgb, black, white)) {
271
+ .c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
272
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
273
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-inverse));
274
+ }
275
+ .c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {
276
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
277
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-inverse));
278
+ }
279
+ }
280
+
281
+ .c-button--ghost-inverse {
282
+ --int-states-mixin-bg-color: transparent;
283
+ --btn-text-color: var(--dt-color-content-interactive-primary-solid);
284
+ }
285
+ .c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
286
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
287
+ --hover-modifier: var(--dt-color-hover-02);
288
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
289
+ }
290
+ .c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {
291
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
292
+ --active-modifier: var(--dt-color-active-02);
293
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
294
+ }
295
+ @supports (background-color: color-mix(in srgb, black, white)) {
296
+ .c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
297
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
298
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
299
+ }
300
+ .c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {
301
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
302
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent));
303
+ }
304
+ }
305
+
306
+ .c-button--outline-inverse {
307
+ --int-states-mixin-bg-color: transparent;
308
+ --btn-text-color: var(--dt-color-content-interactive-primary-solid);
309
+ border: 1px solid var(--dt-color-border-strong);
310
+ }
311
+ .c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
312
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
313
+ --hover-modifier: var(--dt-color-hover-02);
314
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
315
+ }
316
+ .c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {
317
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
318
+ --active-modifier: var(--dt-color-active-02);
319
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
320
+ }
321
+ @supports (background-color: color-mix(in srgb, black, white)) {
322
+ .c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
323
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
324
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
325
+ }
326
+ .c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {
327
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
328
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent));
329
+ }
330
+ }
331
+
332
+ .c-button--ghost-inverse-light {
333
+ --int-states-mixin-bg-color: transparent;
334
+ --btn-text-color: var(--dt-color-content-interactive-light-solid);
335
+ }
336
+ .c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
337
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
338
+ --hover-modifier: var(--dt-color-hover-02);
339
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
340
+ }
341
+ .c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {
342
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
343
+ --active-modifier: var(--dt-color-active-02);
344
+ --int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
345
+ }
346
+ @supports (background-color: color-mix(in srgb, black, white)) {
347
+ .c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
348
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
349
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
350
+ }
351
+ .c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {
352
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
353
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-02-bg) var(--dt-color-active-02), var(--dt-color-transparent));
354
+ }
355
+ }
356
+
357
+ .c-button--destructive {
358
+ --int-states-mixin-bg-color: var(--dt-color-support-error);
359
+ }
360
+ .c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
361
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
362
+ --int-states-mixin-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)));
363
+ }
364
+ .c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {
365
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
366
+ --int-states-mixin-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)));
367
+ }
368
+ @supports (background-color: color-mix(in srgb, black, white)) {
369
+ .c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
370
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
371
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));
372
+ }
373
+ .c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {
374
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
375
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));
376
+ }
377
+ }
378
+
379
+ .c-button--destructive-ghost {
380
+ --int-states-mixin-bg-color: transparent;
381
+ --btn-text-color: var(--dt-color-content-interactive-error-solid);
382
+ }
383
+ .c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
384
+ --hover-modifier: calc(-1 * var(--dt-color-hover-01));
385
+ --hover-modifier: var(--dt-color-hover-01);
386
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
387
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--hover-modifier)));
388
+ }
389
+ .c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {
390
+ --active-modifier: calc(-1 * var(--dt-color-active-01));
391
+ --active-modifier: var(--dt-color-active-01);
392
+ --int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--active-modifier));
393
+ --int-states-mixin-bg-color: hsl(var(--dt-color-transparent-h), var(--dt-color-transparent-s), calc(var(--dt-color-transparent-l) + var(--active-modifier)));
394
+ }
395
+ @supports (background-color: color-mix(in srgb, black, white)) {
396
+ .c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
397
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
398
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
399
+ }
400
+ .c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {
401
+ /* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
402
+ --int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-transparent));
403
+ }
404
+ }
405
+
406
+ .c-button--xsmall {
407
+ --btn-font-size: calc(var(--dt-font-interactive-xs-size) * 1px);
408
+ --btn-line-height: calc(var(--dt-font-interactive-xs-line-height) * 1px);
409
+ --btn-icon-size: 16px;
410
+ --icon-size-override: 16px;
411
+ padding: var(--btn-padding-vertical-xsmall) var(--btn-padding-horizontal-small);
412
+ }
413
+ @media (min-width: 769px) {
414
+ .c-button--xsmall.c-button--responsive {
415
+ --btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);
416
+ --btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
417
+ --btn-icon-size: 20px;
418
+ --icon-size-override: 20px;
419
+ padding: var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium);
420
+ }
421
+ .c-button--xsmall.c-button--responsive.c-button--expressive {
422
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
423
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
424
+ --btn-icon-size: 20px;
425
+ --icon-size-override: 20px;
426
+ padding: var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium);
427
+ }
428
+ }
429
+ .c-button--xsmall.c-button--outline, .c-button--xsmall.c-button--outline-inverse {
430
+ padding: calc(var(--btn-padding-vertical-xsmall) - 1px) var(--btn-padding-horizontal-small);
431
+ }
432
+ @media (min-width: 769px) {
433
+ .c-button--xsmall.c-button--outline.c-button--responsive, .c-button--xsmall.c-button--outline-inverse.c-button--responsive {
434
+ padding: calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium);
435
+ }
436
+ .c-button--xsmall.c-button--outline.c-button--responsive.c-button--expressive, .c-button--xsmall.c-button--outline-inverse.c-button--responsive.c-button--expressive {
437
+ padding: calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium);
438
+ }
439
+ }
440
+
441
+ .c-button--small-expressive {
442
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
443
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
444
+ --btn-icon-size: 20px;
445
+ --icon-size-override: 20px;
446
+ padding: var(--btn-padding-vertical-small-expressive) var(--btn-padding-horizontal-medium);
447
+ }
448
+ @media (min-width: 769px) {
449
+ .c-button--small-expressive.c-button--responsive {
450
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
451
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
452
+ --btn-icon-size: 24px;
453
+ --icon-size-override: 24px;
454
+ padding: var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large);
455
+ }
456
+ }
457
+ .c-button--small-expressive.c-button--outline, .c-button--small-expressive.c-button--outline-inverse {
458
+ padding: calc(var(--btn-padding-vertical-small-expressive) - 1px) var(--btn-padding-horizontal-medium);
459
+ }
460
+ @media (min-width: 769px) {
461
+ .c-button--small-expressive.c-button--outline.c-button--responsive, .c-button--small-expressive.c-button--outline-inverse.c-button--responsive {
462
+ padding: calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large);
463
+ }
464
+ }
465
+
466
+ .c-button--small-productive {
467
+ --btn-font-size: calc(var(--dt-font-interactive-s-size) * 1px);
468
+ --btn-line-height: calc(var(--dt-font-interactive-s-line-height) * 1px);
469
+ --btn-icon-size: 20px;
470
+ --icon-size-override: 20px;
471
+ padding: var(--btn-padding-vertical-small-productive) var(--btn-padding-horizontal-medium);
472
+ }
473
+ @media (min-width: 769px) {
474
+ .c-button--small-productive.c-button--responsive {
475
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
476
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
477
+ --btn-icon-size: 24px;
478
+ --icon-size-override: 24px;
479
+ padding: var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large);
480
+ }
481
+ }
482
+ .c-button--small-productive.c-button--outline, .c-button--small-productive.c-button--outline-inverse {
483
+ padding: calc(var(--btn-padding-vertical-small-productive) - 1px) var(--btn-padding-horizontal-medium);
484
+ }
485
+ @media (min-width: 769px) {
486
+ .c-button--small-productive.c-button--outline.c-button--responsive, .c-button--small-productive.c-button--outline-inverse.c-button--responsive {
487
+ padding: calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large);
488
+ }
489
+ }
490
+
491
+ .c-button--medium {
492
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
493
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
494
+ --btn-icon-size: 24px;
495
+ --icon-size-override: 24px;
496
+ padding: var(--btn-padding-vertical-medium) var(--btn-padding-horizontal-large);
497
+ }
498
+ @media (min-width: 769px) {
499
+ .c-button--medium.c-button--responsive {
500
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
501
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
502
+ --btn-icon-size: 24px;
503
+ --icon-size-override: 24px;
504
+ padding: var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large);
505
+ }
506
+ }
507
+ .c-button--medium.c-button--outline, .c-button--medium.c-button--outline-inverse {
508
+ padding: calc(var(--btn-padding-vertical-medium) - 1px) var(--btn-padding-horizontal-large);
509
+ }
510
+ @media (min-width: 769px) {
511
+ .c-button--medium.c-button--outline.c-button--responsive, .c-button--medium.c-button--outline-inverse.c-button--responsive {
512
+ padding: calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large);
513
+ }
514
+ }
515
+
516
+ .c-button--large {
517
+ --btn-font-size: calc(var(--dt-font-interactive-l-size) * 1px);
518
+ --btn-line-height: calc(var(--dt-font-interactive-l-line-height) * 1px);
519
+ --btn-icon-size: 24px;
520
+ --icon-size-override: 24px;
521
+ padding: var(--btn-padding-vertical-large) var(--btn-padding-horizontal-large);
522
+ }
523
+ .c-button--large.c-button--outline, .c-button--large.c-button--outline-inverse {
524
+ padding: calc(var(--btn-padding-vertical-large) - 1px) var(--btn-padding-horizontal-large);
525
+ }
526
+
527
+ .c-button--fullWidth {
528
+ --btn-inline-size: 100%;
529
+ }
530
+
531
+ .c-button--disabled {
532
+ --btn-text-color: var(--dt-color-content-disabled-solid);
533
+ cursor: not-allowed;
534
+ pointer-events: none;
535
+ }
536
+ .c-button--disabled:not(.c-button--ghost,
537
+ .c-button--ghost-dark,
538
+ .c-button--ghost-inverse,
539
+ .c-button--ghost-inverse-light,
540
+ .c-button--destructive-ghost) {
541
+ --int-states-mixin-bg-color: var(--dt-color-disabled-01);
542
+ --btn-text-color: var(--dt-color-content-disabled);
543
+ }
544
+ .c-button--disabled.c-button--outline, .c-button--disabled.c-button--outline-inverse {
545
+ border-color: var(--dt-color-disabled-01);
546
+ }
547
+
548
+ .c-button--truncate > span {
549
+ text-overflow: ellipsis;
550
+ overflow: hidden;
551
+ white-space: nowrap;
552
+ }