@reshape-biotech/design-system 2.5.3 → 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.
@@ -256,11 +256,19 @@
256
256
 
257
257
  border-color: #12192A1A;
258
258
 
259
- background-color: transparent;
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
 
@@ -40,7 +40,7 @@
40
40
 
41
41
  color: rgb(18 25 42 / var(--tw-text-opacity, 1));
42
42
 
43
- --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.04);
43
+ --tw-shadow: 0 1px 4px 0 rgba(18, 25, 42, 0.02);
44
44
 
45
45
  --tw-shadow-colored: 0 1px 4px 0 var(--tw-shadow-color);
46
46
 
@@ -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.375rem;
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={400}>
41
+ <Tooltip.Root open={forceOpen} {delayDuration}>
40
42
  <Tooltip.Trigger>
41
43
  {#if trigger}
42
44
  {@render trigger()}
@@ -8,6 +8,7 @@ interface Props {
8
8
  align?: 'start' | 'center' | 'end';
9
9
  trigger?: Snippet;
10
10
  content?: Snippet;
11
+ delayDuration?: number;
11
12
  }
12
13
  declare const Tooltip: import("svelte").Component<Props, {}, "">;
13
14
  type Tooltip = ReturnType<typeof Tooltip>;
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[4]}`,
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]}`,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reshape-biotech/design-system",
3
- "version": "2.5.3",
3
+ "version": "2.5.4",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build",