@reshape-biotech/design-system 0.0.37 → 0.0.38
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,24 +40,8 @@
|
|
|
40
40
|
| 'outline'
|
|
41
41
|
| 'secondary-inverse';
|
|
42
42
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
secondary: 'bg-neutral text-primary hover:bg-neutral-hover active:bg-neutral',
|
|
46
|
-
transparent: 'bg-transparent text-primary hover:bg-neutral active:red',
|
|
47
|
-
danger: 'bg-danger-inverse text-primary-inverse hover:bg-danger-inverse-hover ',
|
|
48
|
-
outline:
|
|
49
|
-
'bg-transparent text-primary border border-interactive hover:bg-neutral-hover disabled:border-none',
|
|
50
|
-
'secondary-inverse':
|
|
51
|
-
'bg-neutral-inverse text-primary-inverse hover:bg-neutral-inverse-hover active:bg-neutral-inverse'
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const sizes = {
|
|
55
|
-
sm: 'h-8 px-3 py-2',
|
|
56
|
-
md: 'h-10 px-5 py-3',
|
|
57
|
-
lg: 'h-12 px-6 py-4'
|
|
58
|
-
};
|
|
59
|
-
let sizeClassName = $derived(sizes[size]);
|
|
60
|
-
let colorClassName = $derived(Variants[variant]);
|
|
43
|
+
let variantClass = $derived(`btn-${variant}`);
|
|
44
|
+
let sizeClass = $derived(`btn-size-${size}`);
|
|
61
45
|
</script>
|
|
62
46
|
|
|
63
47
|
<button
|
|
@@ -74,7 +58,7 @@
|
|
|
74
58
|
{id}
|
|
75
59
|
{tabindex}
|
|
76
60
|
class:cursor-wait={loading}
|
|
77
|
-
class="inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 duration-150 disabled:bg-neutral disabled:text-tertiary {
|
|
61
|
+
class="inline-flex items-center justify-center gap-2 rounded-full text-base font-medium leading-6 duration-150 disabled:bg-neutral disabled:text-tertiary {variantClass} {sizeClass} {className}"
|
|
78
62
|
data-testid={dataTestId}
|
|
79
63
|
>
|
|
80
64
|
{#if loading}
|
|
@@ -83,3 +67,93 @@
|
|
|
83
67
|
{@render children?.()}
|
|
84
68
|
{/if}
|
|
85
69
|
</button>
|
|
70
|
+
|
|
71
|
+
<style>
|
|
72
|
+
/* Size variants */
|
|
73
|
+
.btn-size-sm {
|
|
74
|
+
height: 2rem;
|
|
75
|
+
padding-left: 0.75rem;
|
|
76
|
+
padding-right: 0.75rem;
|
|
77
|
+
padding-top: 0.5rem;
|
|
78
|
+
padding-bottom: 0.5rem
|
|
79
|
+
}
|
|
80
|
+
.btn-size-md {
|
|
81
|
+
height: 2.5rem;
|
|
82
|
+
padding-left: 1.25rem;
|
|
83
|
+
padding-right: 1.25rem;
|
|
84
|
+
padding-top: 0.75rem;
|
|
85
|
+
padding-bottom: 0.75rem
|
|
86
|
+
}
|
|
87
|
+
.btn-size-lg {
|
|
88
|
+
height: 3rem;
|
|
89
|
+
padding-left: 1.5rem;
|
|
90
|
+
padding-right: 1.5rem;
|
|
91
|
+
padding-top: 1rem;
|
|
92
|
+
padding-bottom: 1rem
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/* Button variants */
|
|
96
|
+
.btn-primary {
|
|
97
|
+
--tw-bg-opacity: 1;
|
|
98
|
+
background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
|
|
99
|
+
--tw-text-opacity: 1;
|
|
100
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
|
101
|
+
}
|
|
102
|
+
.btn-primary:hover {
|
|
103
|
+
--tw-bg-opacity: 1;
|
|
104
|
+
background-color: rgb(71 65 193 / var(--tw-bg-opacity, 1))
|
|
105
|
+
}
|
|
106
|
+
.btn-secondary {
|
|
107
|
+
background-color: #12192a0d;
|
|
108
|
+
--tw-text-opacity: 1;
|
|
109
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
110
|
+
}
|
|
111
|
+
.btn-secondary:hover {
|
|
112
|
+
background-color: #12192A1A
|
|
113
|
+
}
|
|
114
|
+
.btn-secondary:active {
|
|
115
|
+
background-color: #12192a0d
|
|
116
|
+
}
|
|
117
|
+
.btn-transparent {
|
|
118
|
+
background-color: transparent;
|
|
119
|
+
--tw-text-opacity: 1;
|
|
120
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
121
|
+
}
|
|
122
|
+
.btn-transparent:hover {
|
|
123
|
+
background-color: #12192a0d
|
|
124
|
+
}
|
|
125
|
+
.btn-danger {
|
|
126
|
+
--tw-bg-opacity: 1;
|
|
127
|
+
background-color: rgb(235 70 71 / var(--tw-bg-opacity, 1));
|
|
128
|
+
--tw-text-opacity: 1;
|
|
129
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
|
130
|
+
}
|
|
131
|
+
.btn-danger:hover {
|
|
132
|
+
--tw-bg-opacity: 1;
|
|
133
|
+
background-color: rgb(191 57 58 / var(--tw-bg-opacity, 1))
|
|
134
|
+
}
|
|
135
|
+
.btn-outline {
|
|
136
|
+
border-width: 1px;
|
|
137
|
+
border-color: #12192A26;
|
|
138
|
+
background-color: transparent;
|
|
139
|
+
--tw-text-opacity: 1;
|
|
140
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
141
|
+
}
|
|
142
|
+
.btn-outline:hover {
|
|
143
|
+
background-color: #12192A1A
|
|
144
|
+
}
|
|
145
|
+
.btn-outline:disabled {
|
|
146
|
+
border-style: none
|
|
147
|
+
}
|
|
148
|
+
.btn-secondary-inverse {
|
|
149
|
+
background-color: #FFFFFF0D;
|
|
150
|
+
--tw-text-opacity: 1;
|
|
151
|
+
color: rgb(255 255 255 / var(--tw-text-opacity, 1))
|
|
152
|
+
}
|
|
153
|
+
.btn-secondary-inverse:hover {
|
|
154
|
+
background-color: #FFFFFF26
|
|
155
|
+
}
|
|
156
|
+
.btn-secondary-inverse:active {
|
|
157
|
+
background-color: #FFFFFF0D
|
|
158
|
+
}
|
|
159
|
+
</style>
|
|
@@ -197,10 +197,6 @@ export const sizing = [
|
|
|
197
197
|
'h-5',
|
|
198
198
|
'h-6',
|
|
199
199
|
'h-7',
|
|
200
|
-
'h-8',
|
|
201
|
-
'h-10',
|
|
202
|
-
'h-11',
|
|
203
|
-
'h-12',
|
|
204
200
|
'h-16',
|
|
205
201
|
'h-28',
|
|
206
202
|
'h-screen',
|
|
@@ -395,23 +391,23 @@ export const daisyui = [
|
|
|
395
391
|
|
|
396
392
|
// Add hover variants
|
|
397
393
|
export const hoverVariants = [
|
|
398
|
-
'hover:bg-neutral'
|
|
399
|
-
'hover:bg-neutral-hover',
|
|
400
|
-
'hover:bg-neutral-darker-hover',
|
|
401
|
-
'hover:bg-neutral-inverse-hover',
|
|
402
|
-
'hover:bg-accent-hover',
|
|
403
|
-
'hover:bg-accent-inverse-hover',
|
|
404
|
-
'hover:bg-success-hover',
|
|
405
|
-
'hover:bg-success-inverse-hover',
|
|
406
|
-
'hover:bg-warning-hover',
|
|
407
|
-
'hover:bg-warning-inverse-hover',
|
|
408
|
-
'hover:bg-danger-hover',
|
|
409
|
-
'hover:bg-danger-inverse-hover',
|
|
410
|
-
'hover:bg-blue-hover',
|
|
411
|
-
'hover:bg-orange-hover',
|
|
412
|
-
'hover:bg-orange-inverse-hover',
|
|
413
|
-
'hover:bg-sky-hover',
|
|
414
|
-
'hover:bg-sky-inverse-hover'
|
|
394
|
+
'hover:bg-neutral'
|
|
395
|
+
// 'hover:bg-neutral-hover',
|
|
396
|
+
// 'hover:bg-neutral-darker-hover',
|
|
397
|
+
// 'hover:bg-neutral-inverse-hover',
|
|
398
|
+
// 'hover:bg-accent-hover',
|
|
399
|
+
// 'hover:bg-accent-inverse-hover',
|
|
400
|
+
// 'hover:bg-success-hover',
|
|
401
|
+
// 'hover:bg-success-inverse-hover',
|
|
402
|
+
// 'hover:bg-warning-hover',
|
|
403
|
+
// 'hover:bg-warning-inverse-hover',
|
|
404
|
+
// 'hover:bg-danger-hover',
|
|
405
|
+
// 'hover:bg-danger-inverse-hover',
|
|
406
|
+
// 'hover:bg-blue-hover',
|
|
407
|
+
// 'hover:bg-orange-hover',
|
|
408
|
+
// 'hover:bg-orange-inverse-hover',
|
|
409
|
+
// 'hover:bg-sky-hover',
|
|
410
|
+
// 'hover:bg-sky-inverse-hover'
|
|
415
411
|
];
|
|
416
412
|
|
|
417
413
|
// Add focus variants
|