@juspay/svelte-ui-components 2.116.1 → 2.117.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.
|
@@ -158,6 +158,21 @@
|
|
|
158
158
|
--_btn-hover-border: none;
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
+
/* Transparent chassis for gradient marketing CTAs — deliberately no background
|
|
162
|
+
of its own. Pair with a --button-background gradient (and usually a matching
|
|
163
|
+
--button-hover-color, since --_btn-hover-color sits before --button-background
|
|
164
|
+
in the hover fallback chain and would otherwise flatten the gradient to
|
|
165
|
+
transparent on hover). Geometry (padding/font-size) is intentionally left to
|
|
166
|
+
the size preset, not this variant. */
|
|
167
|
+
.variant-brand {
|
|
168
|
+
--_btn-color: transparent;
|
|
169
|
+
--_btn-text-color: #ffffff;
|
|
170
|
+
--_btn-border: none;
|
|
171
|
+
--_btn-hover-color: transparent;
|
|
172
|
+
--_btn-hover-text-color: #ffffff;
|
|
173
|
+
--_btn-hover-border: none;
|
|
174
|
+
}
|
|
175
|
+
|
|
161
176
|
/* ---- Size defaults (md reproduces the legacy 16px padding / 14px font) ---- */
|
|
162
177
|
.size-sm {
|
|
163
178
|
--_btn-padding: 8px 12px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
export type LoaderType = 'Circular' | 'ProgressBar';
|
|
3
3
|
/** Visual style of the button. Maps to a built-in palette via `--button-*` variables. */
|
|
4
|
-
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
|
|
4
|
+
export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive' | 'brand';
|
|
5
5
|
/** Size preset controlling padding/height/font-size. */
|
|
6
6
|
export type ButtonSize = 'sm' | 'md' | 'lg';
|
|
7
7
|
export type ButtonProperties = OptionalButtonProperties & ButtonEventProperties;
|
|
@@ -9,7 +9,8 @@ export type OptionalButtonProperties = {
|
|
|
9
9
|
text?: string;
|
|
10
10
|
/**
|
|
11
11
|
* Visual style: `primary` (default, filled), `secondary` (outlined), `ghost`
|
|
12
|
-
* (transparent), `destructive` (danger)
|
|
12
|
+
* (transparent), `destructive` (danger), `brand` (transparent chassis for gradient CTAs —
|
|
13
|
+
* pair with a `--button-background` gradient). Each maps to the `--button-*` variables, so an
|
|
13
14
|
* explicit `--button-color` / `classes` override always wins over the variant default.
|
|
14
15
|
*/
|
|
15
16
|
variant?: ButtonVariant;
|