@justeattakeaway/pie-css 1.1.2 → 1.1.3
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.
|
@@ -40,18 +40,22 @@
|
|
|
40
40
|
width: var(--btn-icon-size);
|
|
41
41
|
}
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
--hover
|
|
45
|
-
|
|
43
|
+
@media (hover: hover) {
|
|
44
|
+
.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
45
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
46
|
+
--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)));
|
|
47
|
+
}
|
|
46
48
|
}
|
|
47
49
|
.c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {
|
|
48
50
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
49
51
|
--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
52
|
}
|
|
51
53
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
54
|
+
@media (hover: hover) {
|
|
55
|
+
.c-button--primary:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
56
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
57
|
+
--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));
|
|
58
|
+
}
|
|
55
59
|
}
|
|
56
60
|
.c-button--primary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary.is-loading:not(:disabled, .is-disabled) {
|
|
57
61
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -62,18 +66,22 @@
|
|
|
62
66
|
--int-states-mixin-bg-color: var(--dt-color-interactive-primary);
|
|
63
67
|
--btn-text-color: var(--dt-color-content-interactive-primary-solid);
|
|
64
68
|
}
|
|
65
|
-
|
|
66
|
-
--
|
|
67
|
-
|
|
69
|
+
@media (hover: hover) {
|
|
70
|
+
.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) {
|
|
71
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
72
|
+
--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)));
|
|
73
|
+
}
|
|
68
74
|
}
|
|
69
75
|
.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
76
|
--active-modifier: var(--dt-color-active-02);
|
|
71
77
|
--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
78
|
}
|
|
73
79
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
80
|
+
@media (hover: hover) {
|
|
81
|
+
.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) {
|
|
82
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
83
|
+
--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));
|
|
84
|
+
}
|
|
77
85
|
}
|
|
78
86
|
.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
87
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -84,18 +92,24 @@
|
|
|
84
92
|
.c-button--primary.c-button--xsmall.c-button--expressive.c-button--responsive, .c-button--primary.c-button--small-productive.c-button--responsive {
|
|
85
93
|
--int-states-mixin-bg-color: var(--dt-color-interactive-brand);
|
|
86
94
|
}
|
|
95
|
+
}
|
|
96
|
+
@media (min-width: 769px) and (hover: hover) {
|
|
87
97
|
.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
98
|
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
89
99
|
--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
100
|
}
|
|
101
|
+
}
|
|
102
|
+
@media (min-width: 769px) {
|
|
91
103
|
.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
104
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
93
105
|
--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
106
|
}
|
|
95
107
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
108
|
+
@media (min-width: 769px) and (hover: hover) {
|
|
109
|
+
.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) {
|
|
110
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
111
|
+
--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));
|
|
112
|
+
}
|
|
99
113
|
}
|
|
100
114
|
.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
115
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -108,18 +122,22 @@
|
|
|
108
122
|
--int-states-mixin-bg-color: var(--dt-color-interactive-primary);
|
|
109
123
|
--btn-text-color: var(--dt-color-content-interactive-primary);
|
|
110
124
|
}
|
|
111
|
-
|
|
112
|
-
--
|
|
113
|
-
|
|
125
|
+
@media (hover: hover) {
|
|
126
|
+
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
127
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
128
|
+
--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)));
|
|
129
|
+
}
|
|
114
130
|
}
|
|
115
131
|
.c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {
|
|
116
132
|
--active-modifier: var(--dt-color-active-02);
|
|
117
133
|
--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
134
|
}
|
|
119
135
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
136
|
+
@media (hover: hover) {
|
|
137
|
+
.c-button--primary-alternative:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
138
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
139
|
+
--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));
|
|
140
|
+
}
|
|
123
141
|
}
|
|
124
142
|
.c-button--primary-alternative:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative.is-loading:not(:disabled, .is-disabled) {
|
|
125
143
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -131,18 +149,22 @@
|
|
|
131
149
|
--int-states-mixin-bg-color: var(--dt-color-interactive-dark);
|
|
132
150
|
--btn-text-color: var(--dt-color-content-interactive-light);
|
|
133
151
|
}
|
|
134
|
-
|
|
135
|
-
--
|
|
136
|
-
|
|
152
|
+
@media (hover: hover) {
|
|
153
|
+
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
154
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
155
|
+
--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)));
|
|
156
|
+
}
|
|
137
157
|
}
|
|
138
158
|
.c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {
|
|
139
159
|
--active-modifier: var(--dt-color-active-02);
|
|
140
160
|
--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
161
|
}
|
|
142
162
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
163
|
+
@media (hover: hover) {
|
|
164
|
+
.c-button--primary-alternative-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
165
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
166
|
+
--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));
|
|
167
|
+
}
|
|
146
168
|
}
|
|
147
169
|
.c-button--primary-alternative-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--primary-alternative-dark.is-loading:not(:disabled, .is-disabled) {
|
|
148
170
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -154,18 +176,22 @@
|
|
|
154
176
|
--int-states-mixin-bg-color: var(--dt-color-interactive-secondary);
|
|
155
177
|
--btn-text-color: var(--dt-color-content-interactive-secondary);
|
|
156
178
|
}
|
|
157
|
-
|
|
158
|
-
--hover
|
|
159
|
-
|
|
179
|
+
@media (hover: hover) {
|
|
180
|
+
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
181
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
182
|
+
--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)));
|
|
183
|
+
}
|
|
160
184
|
}
|
|
161
185
|
.c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {
|
|
162
186
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
163
187
|
--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
188
|
}
|
|
165
189
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
190
|
+
@media (hover: hover) {
|
|
191
|
+
.c-button--secondary:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
192
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
193
|
+
--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));
|
|
194
|
+
}
|
|
169
195
|
}
|
|
170
196
|
.c-button--secondary:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--secondary.is-loading:not(:disabled, .is-disabled) {
|
|
171
197
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -178,11 +204,13 @@
|
|
|
178
204
|
--btn-text-color: var(--dt-color-content-interactive-secondary-solid);
|
|
179
205
|
border: 1px solid var(--dt-color-border-strong);
|
|
180
206
|
}
|
|
181
|
-
|
|
182
|
-
--hover
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
207
|
+
@media (hover: hover) {
|
|
208
|
+
.c-button--outline: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
|
+
}
|
|
186
214
|
}
|
|
187
215
|
.c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {
|
|
188
216
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -191,9 +219,11 @@
|
|
|
191
219
|
--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
220
|
}
|
|
193
221
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
222
|
+
@media (hover: hover) {
|
|
223
|
+
.c-button--outline:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
224
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
225
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
|
|
226
|
+
}
|
|
197
227
|
}
|
|
198
228
|
.c-button--outline:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline.is-loading:not(:disabled, .is-disabled) {
|
|
199
229
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -205,11 +235,13 @@
|
|
|
205
235
|
--int-states-mixin-bg-color: transparent;
|
|
206
236
|
--btn-text-color: var(--dt-color-content-interactive-secondary-solid);
|
|
207
237
|
}
|
|
208
|
-
|
|
209
|
-
--hover
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
238
|
+
@media (hover: hover) {
|
|
239
|
+
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
240
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
241
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
242
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
|
|
243
|
+
--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)));
|
|
244
|
+
}
|
|
213
245
|
}
|
|
214
246
|
.c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {
|
|
215
247
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -218,9 +250,11 @@
|
|
|
218
250
|
--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
251
|
}
|
|
220
252
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
253
|
+
@media (hover: hover) {
|
|
254
|
+
.c-button--ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
255
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
256
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
|
|
257
|
+
}
|
|
224
258
|
}
|
|
225
259
|
.c-button--ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost.is-loading:not(:disabled, .is-disabled) {
|
|
226
260
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -232,11 +266,13 @@
|
|
|
232
266
|
--int-states-mixin-bg-color: transparent;
|
|
233
267
|
--btn-text-color: var(--dt-color-content-interactive-dark-solid);
|
|
234
268
|
}
|
|
235
|
-
|
|
236
|
-
--
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
269
|
+
@media (hover: hover) {
|
|
270
|
+
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
271
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
272
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
273
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
|
|
274
|
+
--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)));
|
|
275
|
+
}
|
|
240
276
|
}
|
|
241
277
|
.c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {
|
|
242
278
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -245,9 +281,11 @@
|
|
|
245
281
|
--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
282
|
}
|
|
247
283
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
284
|
+
@media (hover: hover) {
|
|
285
|
+
.c-button--ghost-dark:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
286
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
287
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
|
|
288
|
+
}
|
|
251
289
|
}
|
|
252
290
|
.c-button--ghost-dark:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-dark.is-loading:not(:disabled, .is-disabled) {
|
|
253
291
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -259,18 +297,22 @@
|
|
|
259
297
|
--int-states-mixin-bg-color: var(--dt-color-interactive-inverse);
|
|
260
298
|
--btn-text-color: var(--dt-color-content-interactive-secondary);
|
|
261
299
|
}
|
|
262
|
-
|
|
263
|
-
--hover
|
|
264
|
-
|
|
300
|
+
@media (hover: hover) {
|
|
301
|
+
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
302
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
303
|
+
--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)));
|
|
304
|
+
}
|
|
265
305
|
}
|
|
266
306
|
.c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {
|
|
267
307
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
268
308
|
--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
309
|
}
|
|
270
310
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
311
|
+
@media (hover: hover) {
|
|
312
|
+
.c-button--inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
313
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
314
|
+
--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));
|
|
315
|
+
}
|
|
274
316
|
}
|
|
275
317
|
.c-button--inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--inverse.is-loading:not(:disabled, .is-disabled) {
|
|
276
318
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -282,10 +324,12 @@
|
|
|
282
324
|
--int-states-mixin-bg-color: transparent;
|
|
283
325
|
--btn-text-color: var(--dt-color-content-interactive-primary-solid);
|
|
284
326
|
}
|
|
285
|
-
|
|
286
|
-
--
|
|
287
|
-
|
|
288
|
-
|
|
327
|
+
@media (hover: hover) {
|
|
328
|
+
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
329
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
330
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
331
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
|
|
332
|
+
}
|
|
289
333
|
}
|
|
290
334
|
.c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {
|
|
291
335
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -293,9 +337,11 @@
|
|
|
293
337
|
--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
338
|
}
|
|
295
339
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
340
|
+
@media (hover: hover) {
|
|
341
|
+
.c-button--ghost-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
342
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
343
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
|
|
344
|
+
}
|
|
299
345
|
}
|
|
300
346
|
.c-button--ghost-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse.is-loading:not(:disabled, .is-disabled) {
|
|
301
347
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -308,10 +354,12 @@
|
|
|
308
354
|
--btn-text-color: var(--dt-color-content-interactive-primary-solid);
|
|
309
355
|
border: 1px solid var(--dt-color-border-strong);
|
|
310
356
|
}
|
|
311
|
-
|
|
312
|
-
--
|
|
313
|
-
|
|
314
|
-
|
|
357
|
+
@media (hover: hover) {
|
|
358
|
+
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
359
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
360
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
361
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
|
|
362
|
+
}
|
|
315
363
|
}
|
|
316
364
|
.c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {
|
|
317
365
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -319,9 +367,11 @@
|
|
|
319
367
|
--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
368
|
}
|
|
321
369
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
370
|
+
@media (hover: hover) {
|
|
371
|
+
.c-button--outline-inverse:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
372
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
373
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
|
|
374
|
+
}
|
|
325
375
|
}
|
|
326
376
|
.c-button--outline-inverse:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--outline-inverse.is-loading:not(:disabled, .is-disabled) {
|
|
327
377
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -333,10 +383,12 @@
|
|
|
333
383
|
--int-states-mixin-bg-color: transparent;
|
|
334
384
|
--btn-text-color: var(--dt-color-content-interactive-light-solid);
|
|
335
385
|
}
|
|
336
|
-
|
|
337
|
-
--
|
|
338
|
-
|
|
339
|
-
|
|
386
|
+
@media (hover: hover) {
|
|
387
|
+
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
388
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
389
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
390
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
|
|
391
|
+
}
|
|
340
392
|
}
|
|
341
393
|
.c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {
|
|
342
394
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -344,9 +396,11 @@
|
|
|
344
396
|
--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
397
|
}
|
|
346
398
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
399
|
+
@media (hover: hover) {
|
|
400
|
+
.c-button--ghost-inverse-light:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
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-hover-02-bg) var(--dt-color-hover-02), var(--dt-color-transparent));
|
|
403
|
+
}
|
|
350
404
|
}
|
|
351
405
|
.c-button--ghost-inverse-light:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--ghost-inverse-light.is-loading:not(:disabled, .is-disabled) {
|
|
352
406
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -357,18 +411,22 @@
|
|
|
357
411
|
.c-button--destructive {
|
|
358
412
|
--int-states-mixin-bg-color: var(--dt-color-support-error);
|
|
359
413
|
}
|
|
360
|
-
|
|
361
|
-
--hover
|
|
362
|
-
|
|
414
|
+
@media (hover: hover) {
|
|
415
|
+
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
416
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
417
|
+
--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)));
|
|
418
|
+
}
|
|
363
419
|
}
|
|
364
420
|
.c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {
|
|
365
421
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
366
422
|
--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
423
|
}
|
|
368
424
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
425
|
+
@media (hover: hover) {
|
|
426
|
+
.c-button--destructive:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
427
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
428
|
+
--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));
|
|
429
|
+
}
|
|
372
430
|
}
|
|
373
431
|
.c-button--destructive:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive.is-loading:not(:disabled, .is-disabled) {
|
|
374
432
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
@@ -380,11 +438,13 @@
|
|
|
380
438
|
--int-states-mixin-bg-color: transparent;
|
|
381
439
|
--btn-text-color: var(--dt-color-content-interactive-error-solid);
|
|
382
440
|
}
|
|
383
|
-
|
|
384
|
-
--
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
441
|
+
@media (hover: hover) {
|
|
442
|
+
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
443
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
444
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
445
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
|
|
446
|
+
--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)));
|
|
447
|
+
}
|
|
388
448
|
}
|
|
389
449
|
.c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {
|
|
390
450
|
--active-modifier: calc(-1 * var(--dt-color-active-01));
|
|
@@ -393,9 +453,11 @@
|
|
|
393
453
|
--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
454
|
}
|
|
395
455
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
456
|
+
@media (hover: hover) {
|
|
457
|
+
.c-button--destructive-ghost:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
458
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
459
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-transparent));
|
|
460
|
+
}
|
|
399
461
|
}
|
|
400
462
|
.c-button--destructive-ghost:active:not(:disabled, .is-disabled, .is-dismissible), .c-button--destructive-ghost.is-loading:not(:disabled, .is-disabled) {
|
|
401
463
|
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-css",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.3",
|
|
4
4
|
"description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"devDependencies": {
|
|
52
52
|
"@types/postcss-import": "14.0.3",
|
|
53
53
|
"include-media": "2.0.0",
|
|
54
|
-
"postcss": "8.
|
|
54
|
+
"postcss": "8.5.15",
|
|
55
55
|
"postcss-import": "15.1.0",
|
|
56
56
|
"w3c-css-validator": "1.4.1"
|
|
57
57
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// Prevents slotted icons from intercepting pointer events, which confuses
|
|
2
|
+
// the browser active state tracking when the icon is replaced during a touch interaction
|
|
3
|
+
// Use when a pie-icon component might be slotted into a button
|
|
4
|
+
@mixin disable-pointer-events-in-slotted-icons() {
|
|
5
|
+
::slotted(.c-pieIcon) {
|
|
6
|
+
pointer-events: none;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
@@ -13,25 +13,27 @@
|
|
|
13
13
|
@mixin interactive-states($bg-color, $mode: default, $level: '01') {
|
|
14
14
|
// Needed for webviews and safari <16.2
|
|
15
15
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix#browser_compatibility
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
@media (hover: hover) { // @media (hover: hover) prevents the hover state from getting stuck on touch devices
|
|
17
|
+
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
18
|
+
@if $mode == 'alt' {
|
|
19
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-02));
|
|
20
|
+
} @else if $mode == 'inverse' {
|
|
21
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
22
|
+
} @else {
|
|
23
|
+
--hover-modifier: calc(-1 * var(--dt-color-hover-01));
|
|
24
|
+
}
|
|
24
25
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
26
|
+
// for mode=transparent, use the hsla syntax to make the button background opaque by a set percentage
|
|
27
|
+
@if $mode == 'transparent' {
|
|
28
|
+
--hover-modifier: var(--dt-color-hover-01);
|
|
29
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-black-h), var(--dt-color-black-s), var(--dt-color-black-l), var(--hover-modifier));
|
|
30
|
+
}
|
|
31
|
+
@if $mode == 'transparent-inverse' {
|
|
32
|
+
--hover-modifier: var(--dt-color-hover-02);
|
|
33
|
+
--int-states-mixin-bg-color: hsl(var(--dt-color-white-h), var(--dt-color-white-s), var(--dt-color-white-l), var(--active-modifier));
|
|
34
|
+
} @else {
|
|
35
|
+
--int-states-mixin-bg-color: hsl(var(#{$bg-color}-h), var(#{$bg-color}-s), calc(var(#{$bg-color}-l) + var(--hover-modifier)));
|
|
36
|
+
}
|
|
35
37
|
}
|
|
36
38
|
}
|
|
37
39
|
|
|
@@ -58,9 +60,11 @@
|
|
|
58
60
|
}
|
|
59
61
|
|
|
60
62
|
@supports (background-color: color-mix(in srgb, black, white)) {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
63
|
+
@media (hover: hover) {
|
|
64
|
+
&:hover:not(:disabled, .is-disabled, .is-dismissible) {
|
|
65
|
+
/* stylelint-disable-next-line @justeattakeaway/pie-design-tokens -- SCSS interpolation produces valid tokens at compile time */
|
|
66
|
+
--int-states-mixin-bg-color: color-mix(in srgb, var(--dt-color-hover-#{$level}-bg) var(--dt-color-hover-#{$level}), var(#{$bg-color}));
|
|
67
|
+
}
|
|
64
68
|
}
|
|
65
69
|
|
|
66
70
|
&:active:not(:disabled, .is-disabled, .is-dismissible),
|
package/scss/mixins/index.scss
CHANGED