@juspay/svelte-ui-components 2.114.1 → 2.115.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.
- package/dist/Button/Button.svelte +17 -3
- package/dist/Toast/Toast.svelte +1 -0
- package/package.json +1 -1
|
@@ -198,6 +198,10 @@
|
|
|
198
198
|
font-weight: var(--button-font-weight, 500);
|
|
199
199
|
font-size: var(--button-font-size, var(--_btn-font-size, 14px));
|
|
200
200
|
background-color: var(--button-color, var(--_btn-color, #3a4550));
|
|
201
|
+
/* Image layer, deliberately not the `background` shorthand — the shorthand
|
|
202
|
+
would reset a consumer's own background-image/position/size layers
|
|
203
|
+
whenever the hook is unset. Gradients go here; solids stay on --button-color. */
|
|
204
|
+
background-image: var(--button-background, none);
|
|
201
205
|
color: var(--button-text-color, var(--_btn-text-color, white));
|
|
202
206
|
height: var(--button-height, fit-content);
|
|
203
207
|
padding: var(--button-padding, var(--_btn-padding, 16px));
|
|
@@ -216,6 +220,7 @@
|
|
|
216
220
|
gap: var(--button-content-gap, 16px);
|
|
217
221
|
visibility: var(--button-visibility, visible);
|
|
218
222
|
box-shadow: var(--button-box-shadow, none);
|
|
223
|
+
transition: var(--button-transition, none);
|
|
219
224
|
|
|
220
225
|
/* A button label should never soft-wrap onto a second line as the label text
|
|
221
226
|
changes (e.g. "Select" -> "Select (1)") — that jitters the layout around it.
|
|
@@ -232,7 +237,10 @@
|
|
|
232
237
|
font-weight: var(--disabled-font-weight);
|
|
233
238
|
/* Preserve the variant border when disabled so secondary (bordered) stays distinct from ghost. */
|
|
234
239
|
border: var(--disabled-border, var(--button-border, var(--_btn-border, none)));
|
|
235
|
-
background: var(
|
|
240
|
+
background: var(
|
|
241
|
+
--disabled-background-color,
|
|
242
|
+
var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
|
|
243
|
+
);
|
|
236
244
|
box-shadow: var(
|
|
237
245
|
--button-disabled-box-shadow,
|
|
238
246
|
var(--disabled-box-shadow, var(--button-box-shadow, none))
|
|
@@ -262,7 +270,10 @@
|
|
|
262
270
|
.button-el:hover:not(.disabled) {
|
|
263
271
|
background: var(
|
|
264
272
|
--button-hover-color,
|
|
265
|
-
var(
|
|
273
|
+
var(
|
|
274
|
+
--_btn-hover-color,
|
|
275
|
+
var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
|
|
276
|
+
)
|
|
266
277
|
);
|
|
267
278
|
color: var(
|
|
268
279
|
--button-hover-text-color,
|
|
@@ -278,7 +289,10 @@
|
|
|
278
289
|
|
|
279
290
|
.button-el:active:not(.disabled) {
|
|
280
291
|
transform: var(--button-active-transform);
|
|
281
|
-
background: var(
|
|
292
|
+
background: var(
|
|
293
|
+
--button-active-background,
|
|
294
|
+
var(--button-background, var(--button-color, var(--_btn-color, #3a4550)))
|
|
295
|
+
);
|
|
282
296
|
box-shadow: var(--button-active-box-shadow, var(--button-box-shadow, none));
|
|
283
297
|
}
|
|
284
298
|
|
package/dist/Toast/Toast.svelte
CHANGED
|
@@ -177,6 +177,7 @@
|
|
|
177
177
|
top: var(--toast-top, 10px);
|
|
178
178
|
left: var(--toast-left, 0);
|
|
179
179
|
right: var(--toast-right, 0);
|
|
180
|
+
bottom: var(--toast-bottom, auto);
|
|
180
181
|
background-color: var(--toast-background-color, #87ceeb);
|
|
181
182
|
opacity: var(--toast-opacity, 1);
|
|
182
183
|
box-sizing: var(--toast-box-sizing);
|