@reshape-biotech/design-system 2.5.2 → 2.5.4
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/components/button/Button.svelte +10 -2
- package/dist/components/datepicker/DatePicker.svelte +0 -7
- package/dist/components/dropdown/components/OutlinedButton.svelte +1 -1
- package/dist/components/icon-button/IconButton.svelte +18 -2
- package/dist/components/icon-button/IconButton.svelte.d.ts +1 -1
- package/dist/components/tooltip/Tooltip.svelte +3 -1
- package/dist/components/tooltip/Tooltip.svelte.d.ts +1 -0
- package/dist/tokens.js +1 -1
- package/package.json +1 -1
|
@@ -256,11 +256,19 @@
|
|
|
256
256
|
|
|
257
257
|
border-color: #12192A1A;
|
|
258
258
|
|
|
259
|
-
|
|
259
|
+
--tw-bg-opacity: 1;
|
|
260
|
+
|
|
261
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
260
262
|
|
|
261
263
|
--tw-text-opacity: 1;
|
|
262
264
|
|
|
263
|
-
color: rgb(18 25 42 / var(--tw-text-opacity, 1))
|
|
265
|
+
color: rgb(18 25 42 / var(--tw-text-opacity, 1));
|
|
266
|
+
|
|
267
|
+
--tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
|
|
268
|
+
|
|
269
|
+
--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
|
|
270
|
+
|
|
271
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
|
264
272
|
}
|
|
265
273
|
.btn-outline:hover {
|
|
266
274
|
|
|
@@ -7,6 +7,7 @@
|
|
|
7
7
|
| 'primary'
|
|
8
8
|
| 'secondary'
|
|
9
9
|
| 'transparent'
|
|
10
|
+
| 'outline'
|
|
10
11
|
| 'danger'
|
|
11
12
|
| 'secondary-inverse'
|
|
12
13
|
| 'transparent-inverse';
|
|
@@ -79,7 +80,7 @@
|
|
|
79
80
|
cursor: pointer;
|
|
80
81
|
align-items: center;
|
|
81
82
|
justify-content: center;
|
|
82
|
-
border-radius: 0.
|
|
83
|
+
border-radius: 0.5rem;
|
|
83
84
|
transition-duration: 150ms
|
|
84
85
|
}
|
|
85
86
|
.rounded {
|
|
@@ -96,7 +97,8 @@
|
|
|
96
97
|
|
|
97
98
|
.size-xs {
|
|
98
99
|
width: 1.5rem;
|
|
99
|
-
height: 1.5rem
|
|
100
|
+
height: 1.5rem;
|
|
101
|
+
border-radius: 0.375rem
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
.size-xs :global(svg) {
|
|
@@ -130,6 +132,20 @@
|
|
|
130
132
|
height: 1.5rem
|
|
131
133
|
}
|
|
132
134
|
|
|
135
|
+
.color-outline {
|
|
136
|
+
border-width: 1px;
|
|
137
|
+
border-color: #12192A1A;
|
|
138
|
+
--tw-bg-opacity: 1;
|
|
139
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
140
|
+
--tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
|
|
141
|
+
--tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
|
|
142
|
+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.color-outline:hover {
|
|
146
|
+
background-color: #12192a0A
|
|
147
|
+
}
|
|
148
|
+
|
|
133
149
|
.color-primary {
|
|
134
150
|
--tw-bg-opacity: 1;
|
|
135
151
|
background-color: rgb(87 80 238 / var(--tw-bg-opacity, 1));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Snippet } from 'svelte';
|
|
2
2
|
import type { HTMLButtonAttributes } from 'svelte/elements';
|
|
3
|
-
type Variant = 'primary' | 'secondary' | 'transparent' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
|
|
3
|
+
type Variant = 'primary' | 'secondary' | 'transparent' | 'outline' | 'danger' | 'secondary-inverse' | 'transparent-inverse';
|
|
4
4
|
interface Props extends HTMLButtonAttributes {
|
|
5
5
|
variant?: Variant;
|
|
6
6
|
type?: 'button' | 'submit' | 'reset' | null | undefined;
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
align?: 'start' | 'center' | 'end';
|
|
12
12
|
trigger?: Snippet;
|
|
13
13
|
content?: Snippet;
|
|
14
|
+
delayDuration?: number;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
17
|
let {
|
|
@@ -21,6 +22,7 @@
|
|
|
21
22
|
align = 'center',
|
|
22
23
|
trigger,
|
|
23
24
|
content,
|
|
25
|
+
delayDuration = 400,
|
|
24
26
|
}: Props = $props();
|
|
25
27
|
|
|
26
28
|
const sideMap = {
|
|
@@ -36,7 +38,7 @@
|
|
|
36
38
|
</script>
|
|
37
39
|
|
|
38
40
|
<Tooltip.Provider>
|
|
39
|
-
<Tooltip.Root open={forceOpen} delayDuration
|
|
41
|
+
<Tooltip.Root open={forceOpen} {delayDuration}>
|
|
40
42
|
<Tooltip.Trigger>
|
|
41
43
|
{#if trigger}
|
|
42
44
|
{@render trigger()}
|
package/dist/tokens.js
CHANGED
|
@@ -355,7 +355,7 @@ const outlineColor = {
|
|
|
355
355
|
...darkOutlineColor,
|
|
356
356
|
};
|
|
357
357
|
const boxShadow = {
|
|
358
|
-
input: `0 1px 4px 0 ${colors.shadow[
|
|
358
|
+
input: `0 1px 4px 0 ${colors.shadow[2]}`,
|
|
359
359
|
container: `0 2px 16px 0 ${colors.shadow[2]}`,
|
|
360
360
|
menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 1px ${colors.shadow[8]}`,
|
|
361
361
|
hover: `0 0 0 1px ${colors.periwinkle[5][25]}`,
|