@reshape-biotech/design-system 0.0.50 → 0.0.52

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.
Files changed (17) hide show
  1. package/dist/components/activity/Activity.svelte +1 -1
  2. package/dist/components/empty-content/EmptyContent.stories.svelte +47 -0
  3. package/dist/components/empty-content/EmptyContent.stories.svelte.d.ts +27 -0
  4. package/dist/components/empty-content/index.d.ts +1 -0
  5. package/dist/components/empty-content/index.js +1 -0
  6. package/dist/components/icons/index.d.ts +1 -1
  7. package/dist/components/icons/index.js +14 -0
  8. package/dist/components/tag/Tag.svelte +5 -3
  9. package/dist/components/tag/Tag.svelte.d.ts +1 -1
  10. package/dist/index.d.ts +1 -0
  11. package/dist/index.js +1 -0
  12. package/dist/tailwind-safelist.d.ts +1 -0
  13. package/dist/tailwind-safelist.js +7 -1
  14. package/dist/tailwind.preset.d.ts +134 -0
  15. package/dist/tokens.d.ts +268 -0
  16. package/dist/tokens.js +105 -6
  17. package/package.json +4 -4
package/dist/components/activity/Activity.svelte CHANGED
@@ -37,7 +37,7 @@
37
37
 
38
38
  if (dateTime.isValid) {
39
39
  return dateTime.toLocaleString(DateTime.DATETIME_MED, {
40
- locale: navigator.language ?? 'en-US'
40
+ locale: navigator.language === 'en-US' ? 'en-US' : 'en-GB'
41
41
  });
42
42
  }
43
43
 
package/dist/components/empty-content/EmptyContent.stories.svelte ADDED
@@ -0,0 +1,47 @@
1
+ <script module>
2
+ import { defineMeta } from '@storybook/addon-svelte-csf';
3
+ import EmptyContent from './EmptyContent.svelte';
4
+ import { Icon } from '../../components/icons';
5
+
6
+ const { Story } = defineMeta({
7
+ component: EmptyContent,
8
+ title: 'Design System/EmptyContent',
9
+ tags: ['autodocs']
10
+ });
11
+ </script>
12
+
13
+ <Story name="Default">
14
+ <div class="w-full bg-surface p-12">
15
+ <EmptyContent>
16
+ {#snippet icon()}
17
+ <Icon
18
+ iconName="ClockCountdown"
19
+ color="icon-tertiary"
20
+ width={48}
21
+ height={48}
22
+ weight="light"
23
+ />
24
+ {/snippet}
25
+ <h6>No activity</h6>
26
+ <p class="text-center text-sm">Nothing has been logged for this job.</p>
27
+ </EmptyContent>
28
+ </div>
29
+ </Story>
30
+
31
+ <Story name="With Different Icon">
32
+ <div class="w-full bg-surface p-12">
33
+ <EmptyContent>
34
+ {#snippet icon()}
35
+ <Icon
36
+ iconName="MagnifyingGlass"
37
+ color="icon-tertiary"
38
+ width={48}
39
+ height={48}
40
+ weight="light"
41
+ />
42
+ {/snippet}
43
+ <h6>No results found</h6>
44
+ <p class="text-center text-sm">Try adjusting your search or filters.</p>
45
+ </EmptyContent>
46
+ </div>
47
+ </Story>
package/dist/components/empty-content/EmptyContent.stories.svelte.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ export default EmptyContent;
2
+ type EmptyContent = SvelteComponent<{
3
+ [x: string]: never;
4
+ }, {
5
+ [evt: string]: CustomEvent<any>;
6
+ }, {}> & {
7
+ $$bindings?: string | undefined;
8
+ };
9
+ declare const EmptyContent: $$__sveltets_2_IsomorphicComponent<{
10
+ [x: string]: never;
11
+ }, {
12
+ [evt: string]: CustomEvent<any>;
13
+ }, {}, {}, string>;
14
+ import EmptyContent from './EmptyContent.svelte';
15
+ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
16
+ new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
17
+ $$bindings?: Bindings;
18
+ } & Exports;
19
+ (internal: unknown, props: {
20
+ $$events?: Events;
21
+ $$slots?: Slots;
22
+ }): Exports & {
23
+ $set?: any;
24
+ $on?: any;
25
+ };
26
+ z_$$bindings?: Bindings;
27
+ }
package/dist/components/empty-content/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default as EmptyContent } from './EmptyContent.svelte';
package/dist/components/empty-content/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default as EmptyContent } from './EmptyContent.svelte';
package/dist/components/icons/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import type { IconComponentProps } from 'phosphor-svelte';
2
2
  import type { Component } from 'svelte';
3
3
  import type { textColor } from './../../tokens';
4
4
  export type PhosphorIconProps = Component<IconComponentProps, object, ''>;
5
- export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'SealQuestion' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
5
+ export type IconName = 'ArrowFatLineRight' | 'ArrowRight' | 'ArrowUpRight' | 'Barcode' | 'Bell' | 'BookOpen' | 'BookOpenText' | 'BowlingBall' | 'Calendar' | 'CalendarBlank' | 'CameraSlash' | 'CaretDown' | 'CaretLeft' | 'CaretRight' | 'CaretUp' | 'CaretUpDown' | 'ChatTeardropDots' | 'Check' | 'CheckCircle' | 'CheckFat' | 'Circle' | 'CircleDashed' | 'CircleHalf' | 'CirclesFour' | 'CirclesThreePlus' | 'Clock' | 'ClockCountdown' | 'Copy' | 'Crop' | 'Cube' | 'Database' | 'DotsThree' | 'DotsThreeOutlineVertical' | 'DownloadSimple' | 'Drop' | 'EnvelopeSimple' | 'Eye' | 'Eyedropper' | 'FileCsv' | 'Flag' | 'Flask' | 'Folder' | 'FolderDashed' | 'FolderSimplePlus' | 'FunnelSimple' | 'Gear' | 'GlobeSimple' | 'GlobeSimpleX' | 'GridFour' | 'Hash' | 'House' | 'ImageSquare' | 'ImagesSquare' | 'Info' | 'Lock' | 'LineSegments' | 'List' | 'MagnifyingGlass' | 'MegaphoneSimple' | 'Moon' | 'Pause' | 'Pencil' | 'PencilSimple' | 'Percent' | 'Phone' | 'Plant' | 'Play' | 'Plus' | 'PlusMinus' | 'Question' | 'RadioButton' | 'SealQuestion' | 'SelectionAll' | 'Share' | 'SidebarSimple' | 'SkipBack' | 'SkipForward' | 'SortAscending' | 'Sparkle' | 'SpinnerGap' | 'SquaresFour' | 'Star' | 'Stop' | 'StopCircle' | 'Sun' | 'Table' | 'Tag' | 'TestTube' | 'Trash' | 'TrashSimple' | 'UserCircle' | 'UserPlus' | 'Video' | 'Warning' | 'WarningCircle' | 'WifiSlash' | 'X';
6
6
  export declare const iconMap: Record<IconName, PhosphorIconProps>;
7
7
  export declare function renderIcon(iconName: keyof typeof iconMap): PhosphorIconProps;
8
8
  export type IconColor = keyof typeof textColor;
package/dist/components/icons/index.js CHANGED
@@ -2,9 +2,11 @@ import ArrowFatLineRight from 'phosphor-svelte/lib/ArrowFatLineRight';
2
2
  import ArrowRight from 'phosphor-svelte/lib/ArrowRight';
3
3
  import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
4
4
  import Barcode from 'phosphor-svelte/lib/Barcode';
5
+ import Bell from 'phosphor-svelte/lib/Bell';
5
6
  import BookOpen from 'phosphor-svelte/lib/BookOpen';
6
7
  import BookOpenText from 'phosphor-svelte/lib/BookOpenText';
7
8
  import BowlingBall from 'phosphor-svelte/lib/BowlingBall';
9
+ import Calendar from 'phosphor-svelte/lib/Calendar';
8
10
  import CalendarBlank from 'phosphor-svelte/lib/CalendarBlank';
9
11
  import CameraSlash from 'phosphor-svelte/lib/CameraSlash';
10
12
  import CaretDown from 'phosphor-svelte/lib/CaretDown';
@@ -51,6 +53,7 @@ import ImageSquare from 'phosphor-svelte/lib/ImageSquare';
51
53
  import ImagesSquare from 'phosphor-svelte/lib/ImagesSquare';
52
54
  import Info from 'phosphor-svelte/lib/Info';
53
55
  import Lock from 'phosphor-svelte/lib/Lock';
56
+ import LineSegments from 'phosphor-svelte/lib/LineSegments';
54
57
  import List from 'phosphor-svelte/lib/List';
55
58
  import MagnifyingGlass from 'phosphor-svelte/lib/MagnifyingGlass';
56
59
  import MegaphoneSimple from 'phosphor-svelte/lib/MegaphoneSimple';
@@ -65,11 +68,14 @@ import Play from 'phosphor-svelte/lib/Play';
65
68
  import Plus from 'phosphor-svelte/lib/Plus';
66
69
  import PlusMinus from 'phosphor-svelte/lib/PlusMinus';
67
70
  import Question from 'phosphor-svelte/lib/Question';
71
+ import RadioButton from 'phosphor-svelte/lib/RadioButton';
68
72
  import SealQuestion from 'phosphor-svelte/lib/SealQuestion';
73
+ import SelectionAll from 'phosphor-svelte/lib/SelectionAll';
69
74
  import Share from 'phosphor-svelte/lib/Share';
70
75
  import SidebarSimple from 'phosphor-svelte/lib/SidebarSimple';
71
76
  import SkipBack from 'phosphor-svelte/lib/SkipBack';
72
77
  import SkipForward from 'phosphor-svelte/lib/SkipForward';
78
+ import SortAscending from 'phosphor-svelte/lib/SortAscending';
73
79
  import Sparkle from 'phosphor-svelte/lib/Sparkle';
74
80
  import SpinnerGap from 'phosphor-svelte/lib/SpinnerGap';
75
81
  import SquaresFour from 'phosphor-svelte/lib/SquaresFour';
@@ -82,6 +88,7 @@ import Tag from 'phosphor-svelte/lib/Tag';
82
88
  import TestTube from 'phosphor-svelte/lib/TestTube';
83
89
  import Trash from 'phosphor-svelte/lib/Trash';
84
90
  import TrashSimple from 'phosphor-svelte/lib/TrashSimple';
91
+ import UserCircle from 'phosphor-svelte/lib/UserCircle';
85
92
  import UserPlus from 'phosphor-svelte/lib/UserPlus';
86
93
  import Video from 'phosphor-svelte/lib/Video';
87
94
  import Warning from 'phosphor-svelte/lib/Warning';
@@ -93,9 +100,11 @@ export const iconMap = {
93
100
  ArrowRight,
94
101
  ArrowUpRight,
95
102
  Barcode,
103
+ Bell,
96
104
  BookOpen,
97
105
  BookOpenText,
98
106
  BowlingBall,
107
+ Calendar,
99
108
  CalendarBlank,
100
109
  CameraSlash,
101
110
  CaretDown,
@@ -142,6 +151,7 @@ export const iconMap = {
142
151
  ImagesSquare,
143
152
  Info,
144
153
  Lock,
154
+ LineSegments,
145
155
  List,
146
156
  MagnifyingGlass,
147
157
  MegaphoneSimple,
@@ -155,12 +165,15 @@ export const iconMap = {
155
165
  Play,
156
166
  Plus,
157
167
  PlusMinus,
168
+ RadioButton,
158
169
  Question,
159
170
  SealQuestion,
171
+ SelectionAll,
160
172
  Share,
161
173
  SidebarSimple,
162
174
  SkipBack,
163
175
  SkipForward,
176
+ SortAscending,
164
177
  Sparkle,
165
178
  SpinnerGap,
166
179
  SquaresFour,
@@ -173,6 +186,7 @@ export const iconMap = {
173
186
  TestTube,
174
187
  Trash,
175
188
  TrashSimple,
189
+ UserCircle,
176
190
  UserPlus,
177
191
  Video,
178
192
  Warning,
package/dist/components/tag/Tag.svelte CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  interface Props {
6
6
  children: Snippet;
7
- variant?: 'default' | 'outline' | 'transparent';
7
+ variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
8
8
  size?: 'sm' | 'md';
9
9
  tooltip?: string;
10
10
  onclick?: (event: MouseEvent) => void;
@@ -29,13 +29,15 @@
29
29
  const variants = {
30
30
  default: 'bg-neutral text-primary',
31
31
  outline: 'bg-transparent text-secondary border',
32
- transparent: 'bg-transparent text-secondary'
32
+ transparent: 'bg-transparent text-secondary',
33
+ 'default-inverse': 'bg-base-inverse text-secondary-inverse'
33
34
  };
34
35
 
35
36
  const buttonClassVariants = {
36
37
  default: 'hover:bg-neutral-hover',
37
38
  outline: 'hover:bg-neutral hover:text-primary',
38
- transparent: 'hover:bg-neutral hover:text-primary'
39
+ transparent: 'hover:bg-neutral hover:text-primary',
40
+ 'default-inverse': 'hover:bg-base-inverse hover:text-secondary-inverse'
39
41
  };
40
42
 
41
43
  let variantClassName = $derived(variants[variant]);
package/dist/components/tag/Tag.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { Snippet } from 'svelte';
2
2
  interface Props {
3
3
  children: Snippet;
4
- variant?: 'default' | 'outline' | 'transparent';
4
+ variant?: 'default' | 'outline' | 'transparent' | 'default-inverse';
5
5
  size?: 'sm' | 'md';
6
6
  tooltip?: string;
7
7
  onclick?: (event: MouseEvent) => void;
package/dist/index.d.ts CHANGED
@@ -10,6 +10,7 @@ export * from './components/divider/';
10
10
  export * from './components/drawer/';
11
11
  export * from './components/drawer/';
12
12
  export * from './components/dropdown/';
13
+ export * from './components/empty-content/';
13
14
  export * from './components/icons/';
14
15
  export * from './components/icon-button/';
15
16
  export * from './components/image';
package/dist/index.js CHANGED
@@ -11,6 +11,7 @@ export * from './components/divider/';
11
11
  export * from './components/drawer/';
12
12
  export * from './components/drawer/';
13
13
  export * from './components/dropdown/';
14
+ export * from './components/empty-content/';
14
15
  export * from './components/icons/';
15
16
  export * from './components/icon-button/';
16
17
  export * from './components/image';
package/dist/tailwind-safelist.d.ts CHANGED
@@ -23,5 +23,6 @@ export const hoverVariants: string[];
23
23
  export const focusVariants: string[];
24
24
  export const disabledVariants: string[];
25
25
  export const activeVariants: string[];
26
+ export const groupVariants: string[];
26
27
  export const safelist: string[];
27
28
  export const responsive: string[];
package/dist/tailwind-safelist.js CHANGED
@@ -121,6 +121,7 @@ export const sizes = ['h-5', 'w-5', 'min-w-5', 'h-7', 'w-7', 'min-w-7'];
121
121
 
122
122
  export const display = [
123
123
  'flex',
124
+ 'grow',
124
125
  'items-center',
125
126
  'justify-center',
126
127
  'flex-row',
@@ -206,6 +207,7 @@ export const sizing = [
206
207
  'h-16',
207
208
  'h-28',
208
209
  'h-screen',
210
+ 'w-0.5',
209
211
  'w-4',
210
212
  'w-5',
211
213
  'w-6',
@@ -444,6 +446,9 @@ export const activeVariants = [
444
446
  'active:transform'
445
447
  ];
446
448
 
449
+ // Add group variants
450
+ export const groupVariants = ['group-first:invisible', 'group-last:invisible'];
451
+
447
452
  // Export all arrays as a single safelist
448
453
  export const safelist = [
449
454
  ...textColors,
@@ -469,7 +474,8 @@ export const safelist = [
469
474
  ...hoverVariants,
470
475
  ...focusVariants,
471
476
  ...disabledVariants,
472
- ...activeVariants
477
+ ...activeVariants,
478
+ ...groupVariants
473
479
  ];
474
480
 
475
481
  export const responsive = ['sm:w-[460px]', 'md:flex', 'lg:block', 'sm:gap-2'];
package/dist/tailwind.preset.d.ts CHANGED
@@ -165,6 +165,86 @@ declare const config: {
165
165
  12: string;
166
166
  16: string;
167
167
  };
168
+ pink: {
169
+ 1: string;
170
+ 2: string;
171
+ 3: string;
172
+ 4: {
173
+ default: string;
174
+ 10: string;
175
+ 25: string;
176
+ };
177
+ 5: {
178
+ default: string;
179
+ 10: string;
180
+ 25: string;
181
+ };
182
+ 6: string;
183
+ };
184
+ plum: {
185
+ 1: string;
186
+ 2: string;
187
+ 3: string;
188
+ 4: {
189
+ default: string;
190
+ 10: string;
191
+ 25: string;
192
+ };
193
+ 5: {
194
+ default: string;
195
+ 10: string;
196
+ 25: string;
197
+ };
198
+ 6: string;
199
+ };
200
+ lilac: {
201
+ 1: string;
202
+ 2: string;
203
+ 3: string;
204
+ 4: {
205
+ default: string;
206
+ 10: string;
207
+ 25: string;
208
+ };
209
+ 5: {
210
+ default: string;
211
+ 10: string;
212
+ 25: string;
213
+ };
214
+ 6: string;
215
+ };
216
+ lime: {
217
+ 1: string;
218
+ 2: string;
219
+ 3: string;
220
+ 4: {
221
+ default: string;
222
+ 10: string;
223
+ 25: string;
224
+ };
225
+ 5: {
226
+ default: string;
227
+ 10: string;
228
+ 25: string;
229
+ };
230
+ 6: string;
231
+ };
232
+ pear: {
233
+ 1: string;
234
+ 2: string;
235
+ 3: string;
236
+ 4: {
237
+ default: string;
238
+ 10: string;
239
+ 25: string;
240
+ };
241
+ 5: {
242
+ default: string;
243
+ 10: string;
244
+ 25: string;
245
+ };
246
+ 6: string;
247
+ };
168
248
  };
169
249
  backgroundColor: {
170
250
  'dark-neutral': string;
@@ -193,6 +273,16 @@ declare const config: {
193
273
  'dark-orange-hover': string;
194
274
  'dark-sky': string;
195
275
  'dark-sky-hover': string;
276
+ 'dark-pink': string;
277
+ 'dark-pink-hover': string;
278
+ 'dark-plum': string;
279
+ 'dark-plum-hover': string;
280
+ 'dark-lilac': string;
281
+ 'dark-lilac-hover': string;
282
+ 'dark-lime': string;
283
+ 'dark-lime-hover': string;
284
+ 'dark-pear': string;
285
+ 'dark-pear-hover': string;
196
286
  'dark-primary': string;
197
287
  'dark-secondary': string;
198
288
  'dark-base': string;
@@ -227,6 +317,8 @@ declare const config: {
227
317
  'danger-inverse-hover': string;
228
318
  blue: string;
229
319
  'blue-hover': string;
320
+ 'blue-inverse': string;
321
+ 'blue-inverse-hover': string;
230
322
  orange: string;
231
323
  'orange-hover': string;
232
324
  'orange-inverse': string;
@@ -235,6 +327,26 @@ declare const config: {
235
327
  'sky-hover': string;
236
328
  'sky-inverse': string;
237
329
  'sky-inverse-hover': string;
330
+ pink: string;
331
+ 'pink-hover': string;
332
+ 'pink-inverse': string;
333
+ 'pink-inverse-hover': string;
334
+ plum: string;
335
+ 'plum-hover': string;
336
+ 'plum-inverse': string;
337
+ 'plum-inverse-hover': string;
338
+ lilac: string;
339
+ 'lilac-hover': string;
340
+ 'lilac-inverse': string;
341
+ 'lilac-inverse-hover': string;
342
+ lime: string;
343
+ 'lime-hover': string;
344
+ 'lime-inverse': string;
345
+ 'lime-inverse-hover': string;
346
+ pear: string;
347
+ 'pear-hover': string;
348
+ 'pear-inverse': string;
349
+ 'pear-inverse-hover': string;
238
350
  };
239
351
  borderColor: {
240
352
  'dark-static': string;
@@ -263,6 +375,12 @@ declare const config: {
263
375
  'icon-blue': string;
264
376
  'icon-orange': string;
265
377
  'icon-sky': string;
378
+ 'icon-pink': string;
379
+ 'icon-plum': string;
380
+ 'icon-lilac': string;
381
+ 'icon-lime': string;
382
+ 'icon-pear': string;
383
+ 'icon-white': string;
266
384
  'dark-primary': string;
267
385
  'dark-secondary': string;
268
386
  'dark-tertiary': string;
@@ -273,6 +391,14 @@ declare const config: {
273
391
  'dark-success': string;
274
392
  'dark-warning': string;
275
393
  'dark-danger': string;
394
+ 'dark-blue': string;
395
+ 'dark-orange': string;
396
+ 'dark-sky': string;
397
+ 'dark-pink': string;
398
+ 'dark-plum': string;
399
+ 'dark-lilac': string;
400
+ 'dark-lime': string;
401
+ 'dark-pear': string;
276
402
  primary: string;
277
403
  secondary: string;
278
404
  tertiary: string;
@@ -283,6 +409,14 @@ declare const config: {
283
409
  success: string;
284
410
  warning: string;
285
411
  danger: string;
412
+ blue: string;
413
+ orange: string;
414
+ sky: string;
415
+ pink: string;
416
+ plum: string;
417
+ lilac: string;
418
+ lime: string;
419
+ pear: string;
286
420
  };
287
421
  boxShadow: {
288
422
  input: string;
package/dist/tokens.d.ts CHANGED
@@ -160,6 +160,86 @@ export declare const colors: {
160
160
  12: string;
161
161
  16: string;
162
162
  };
163
+ pink: {
164
+ 1: string;
165
+ 2: string;
166
+ 3: string;
167
+ 4: {
168
+ default: string;
169
+ 10: string;
170
+ 25: string;
171
+ };
172
+ 5: {
173
+ default: string;
174
+ 10: string;
175
+ 25: string;
176
+ };
177
+ 6: string;
178
+ };
179
+ plum: {
180
+ 1: string;
181
+ 2: string;
182
+ 3: string;
183
+ 4: {
184
+ default: string;
185
+ 10: string;
186
+ 25: string;
187
+ };
188
+ 5: {
189
+ default: string;
190
+ 10: string;
191
+ 25: string;
192
+ };
193
+ 6: string;
194
+ };
195
+ lilac: {
196
+ 1: string;
197
+ 2: string;
198
+ 3: string;
199
+ 4: {
200
+ default: string;
201
+ 10: string;
202
+ 25: string;
203
+ };
204
+ 5: {
205
+ default: string;
206
+ 10: string;
207
+ 25: string;
208
+ };
209
+ 6: string;
210
+ };
211
+ lime: {
212
+ 1: string;
213
+ 2: string;
214
+ 3: string;
215
+ 4: {
216
+ default: string;
217
+ 10: string;
218
+ 25: string;
219
+ };
220
+ 5: {
221
+ default: string;
222
+ 10: string;
223
+ 25: string;
224
+ };
225
+ 6: string;
226
+ };
227
+ pear: {
228
+ 1: string;
229
+ 2: string;
230
+ 3: string;
231
+ 4: {
232
+ default: string;
233
+ 10: string;
234
+ 25: string;
235
+ };
236
+ 5: {
237
+ default: string;
238
+ 10: string;
239
+ 25: string;
240
+ };
241
+ 6: string;
242
+ };
163
243
  };
164
244
  export declare const borderColor: {
165
245
  'dark-static': string;
@@ -188,6 +268,12 @@ export declare const textColor: {
188
268
  'icon-blue': string;
189
269
  'icon-orange': string;
190
270
  'icon-sky': string;
271
+ 'icon-pink': string;
272
+ 'icon-plum': string;
273
+ 'icon-lilac': string;
274
+ 'icon-lime': string;
275
+ 'icon-pear': string;
276
+ 'icon-white': string;
191
277
  'dark-primary': string;
192
278
  'dark-secondary': string;
193
279
  'dark-tertiary': string;
@@ -198,6 +284,14 @@ export declare const textColor: {
198
284
  'dark-success': string;
199
285
  'dark-warning': string;
200
286
  'dark-danger': string;
287
+ 'dark-blue': string;
288
+ 'dark-orange': string;
289
+ 'dark-sky': string;
290
+ 'dark-pink': string;
291
+ 'dark-plum': string;
292
+ 'dark-lilac': string;
293
+ 'dark-lime': string;
294
+ 'dark-pear': string;
201
295
  primary: string;
202
296
  secondary: string;
203
297
  tertiary: string;
@@ -208,6 +302,14 @@ export declare const textColor: {
208
302
  success: string;
209
303
  warning: string;
210
304
  danger: string;
305
+ blue: string;
306
+ orange: string;
307
+ sky: string;
308
+ pink: string;
309
+ plum: string;
310
+ lilac: string;
311
+ lime: string;
312
+ pear: string;
211
313
  };
212
314
  export declare const backgroundColor: {
213
315
  'dark-neutral': string;
@@ -236,6 +338,16 @@ export declare const backgroundColor: {
236
338
  'dark-orange-hover': string;
237
339
  'dark-sky': string;
238
340
  'dark-sky-hover': string;
341
+ 'dark-pink': string;
342
+ 'dark-pink-hover': string;
343
+ 'dark-plum': string;
344
+ 'dark-plum-hover': string;
345
+ 'dark-lilac': string;
346
+ 'dark-lilac-hover': string;
347
+ 'dark-lime': string;
348
+ 'dark-lime-hover': string;
349
+ 'dark-pear': string;
350
+ 'dark-pear-hover': string;
239
351
  'dark-primary': string;
240
352
  'dark-secondary': string;
241
353
  'dark-base': string;
@@ -270,6 +382,8 @@ export declare const backgroundColor: {
270
382
  'danger-inverse-hover': string;
271
383
  blue: string;
272
384
  'blue-hover': string;
385
+ 'blue-inverse': string;
386
+ 'blue-inverse-hover': string;
273
387
  orange: string;
274
388
  'orange-hover': string;
275
389
  'orange-inverse': string;
@@ -278,6 +392,26 @@ export declare const backgroundColor: {
278
392
  'sky-hover': string;
279
393
  'sky-inverse': string;
280
394
  'sky-inverse-hover': string;
395
+ pink: string;
396
+ 'pink-hover': string;
397
+ 'pink-inverse': string;
398
+ 'pink-inverse-hover': string;
399
+ plum: string;
400
+ 'plum-hover': string;
401
+ 'plum-inverse': string;
402
+ 'plum-inverse-hover': string;
403
+ lilac: string;
404
+ 'lilac-hover': string;
405
+ 'lilac-inverse': string;
406
+ 'lilac-inverse-hover': string;
407
+ lime: string;
408
+ 'lime-hover': string;
409
+ 'lime-inverse': string;
410
+ 'lime-inverse-hover': string;
411
+ pear: string;
412
+ 'pear-hover': string;
413
+ 'pear-inverse': string;
414
+ 'pear-inverse-hover': string;
281
415
  };
282
416
  export declare const outlineColor: {
283
417
  'dark-static': string;
@@ -459,6 +593,86 @@ export declare const tokens: {
459
593
  12: string;
460
594
  16: string;
461
595
  };
596
+ pink: {
597
+ 1: string;
598
+ 2: string;
599
+ 3: string;
600
+ 4: {
601
+ default: string;
602
+ 10: string;
603
+ 25: string;
604
+ };
605
+ 5: {
606
+ default: string;
607
+ 10: string;
608
+ 25: string;
609
+ };
610
+ 6: string;
611
+ };
612
+ plum: {
613
+ 1: string;
614
+ 2: string;
615
+ 3: string;
616
+ 4: {
617
+ default: string;
618
+ 10: string;
619
+ 25: string;
620
+ };
621
+ 5: {
622
+ default: string;
623
+ 10: string;
624
+ 25: string;
625
+ };
626
+ 6: string;
627
+ };
628
+ lilac: {
629
+ 1: string;
630
+ 2: string;
631
+ 3: string;
632
+ 4: {
633
+ default: string;
634
+ 10: string;
635
+ 25: string;
636
+ };
637
+ 5: {
638
+ default: string;
639
+ 10: string;
640
+ 25: string;
641
+ };
642
+ 6: string;
643
+ };
644
+ lime: {
645
+ 1: string;
646
+ 2: string;
647
+ 3: string;
648
+ 4: {
649
+ default: string;
650
+ 10: string;
651
+ 25: string;
652
+ };
653
+ 5: {
654
+ default: string;
655
+ 10: string;
656
+ 25: string;
657
+ };
658
+ 6: string;
659
+ };
660
+ pear: {
661
+ 1: string;
662
+ 2: string;
663
+ 3: string;
664
+ 4: {
665
+ default: string;
666
+ 10: string;
667
+ 25: string;
668
+ };
669
+ 5: {
670
+ default: string;
671
+ 10: string;
672
+ 25: string;
673
+ };
674
+ 6: string;
675
+ };
462
676
  };
463
677
  borderColor: {
464
678
  'dark-static': string;
@@ -487,6 +701,12 @@ export declare const tokens: {
487
701
  'icon-blue': string;
488
702
  'icon-orange': string;
489
703
  'icon-sky': string;
704
+ 'icon-pink': string;
705
+ 'icon-plum': string;
706
+ 'icon-lilac': string;
707
+ 'icon-lime': string;
708
+ 'icon-pear': string;
709
+ 'icon-white': string;
490
710
  'dark-primary': string;
491
711
  'dark-secondary': string;
492
712
  'dark-tertiary': string;
@@ -497,6 +717,14 @@ export declare const tokens: {
497
717
  'dark-success': string;
498
718
  'dark-warning': string;
499
719
  'dark-danger': string;
720
+ 'dark-blue': string;
721
+ 'dark-orange': string;
722
+ 'dark-sky': string;
723
+ 'dark-pink': string;
724
+ 'dark-plum': string;
725
+ 'dark-lilac': string;
726
+ 'dark-lime': string;
727
+ 'dark-pear': string;
500
728
  primary: string;
501
729
  secondary: string;
502
730
  tertiary: string;
@@ -507,6 +735,14 @@ export declare const tokens: {
507
735
  success: string;
508
736
  warning: string;
509
737
  danger: string;
738
+ blue: string;
739
+ orange: string;
740
+ sky: string;
741
+ pink: string;
742
+ plum: string;
743
+ lilac: string;
744
+ lime: string;
745
+ pear: string;
510
746
  };
511
747
  backgroundColor: {
512
748
  'dark-neutral': string;
@@ -535,6 +771,16 @@ export declare const tokens: {
535
771
  'dark-orange-hover': string;
536
772
  'dark-sky': string;
537
773
  'dark-sky-hover': string;
774
+ 'dark-pink': string;
775
+ 'dark-pink-hover': string;
776
+ 'dark-plum': string;
777
+ 'dark-plum-hover': string;
778
+ 'dark-lilac': string;
779
+ 'dark-lilac-hover': string;
780
+ 'dark-lime': string;
781
+ 'dark-lime-hover': string;
782
+ 'dark-pear': string;
783
+ 'dark-pear-hover': string;
538
784
  'dark-primary': string;
539
785
  'dark-secondary': string;
540
786
  'dark-base': string;
@@ -569,6 +815,8 @@ export declare const tokens: {
569
815
  'danger-inverse-hover': string;
570
816
  blue: string;
571
817
  'blue-hover': string;
818
+ 'blue-inverse': string;
819
+ 'blue-inverse-hover': string;
572
820
  orange: string;
573
821
  'orange-hover': string;
574
822
  'orange-inverse': string;
@@ -577,6 +825,26 @@ export declare const tokens: {
577
825
  'sky-hover': string;
578
826
  'sky-inverse': string;
579
827
  'sky-inverse-hover': string;
828
+ pink: string;
829
+ 'pink-hover': string;
830
+ 'pink-inverse': string;
831
+ 'pink-inverse-hover': string;
832
+ plum: string;
833
+ 'plum-hover': string;
834
+ 'plum-inverse': string;
835
+ 'plum-inverse-hover': string;
836
+ lilac: string;
837
+ 'lilac-hover': string;
838
+ 'lilac-inverse': string;
839
+ 'lilac-inverse-hover': string;
840
+ lime: string;
841
+ 'lime-hover': string;
842
+ 'lime-inverse': string;
843
+ 'lime-inverse-hover': string;
844
+ pear: string;
845
+ 'pear-hover': string;
846
+ 'pear-inverse': string;
847
+ 'pear-inverse-hover': string;
580
848
  };
581
849
  boxShadow: {
582
850
  input: string;
package/dist/tokens.js CHANGED
@@ -95,6 +95,46 @@ export const colors = {
95
95
  8: 'rgba(18, 25, 42, 0.08)',
96
96
  12: 'rgba(18, 25, 42, 0.12)',
97
97
  16: 'rgba(18, 25, 42, 0.16)'
98
+ },
99
+ pink: {
100
+ 1: '#fdedf4',
101
+ 2: '#f9c6dd',
102
+ 3: '#f284b6',
103
+ 4: { default: '#f06da8', 10: '#f06da81A', 25: '#f06da840' },
104
+ 5: { default: '#ec4892', 10: '#ec48921A', 25: '#ec489240' },
105
+ 6: '#bf3b77'
106
+ },
107
+ plum: {
108
+ 1: '#f9edf8',
109
+ 2: '#ecc6ea',
110
+ 3: '#d583d2',
111
+ 4: { default: '#cd6bc9', 10: '#cd6bc91A', 25: '#cd6bc940' },
112
+ 5: { default: '#c146bc', 10: '#c146bc1A', 25: '#c146bc40' },
113
+ 6: '#9d3998'
114
+ },
115
+ lilac: {
116
+ 1: '#f5ecfd',
117
+ 2: '#dfc5f7',
118
+ 3: '#b982ee',
119
+ 4: { default: '#ac69eb', 10: '#ac69eb1A', 25: '#ac69eb40' },
120
+ 5: { default: '#9744e6', 10: '#9744e61A', 25: '#9744e640' },
121
+ 6: '#7a37ba'
122
+ },
123
+ lime: {
124
+ 1: '#f2f8e8',
125
+ 2: '#d5eab6',
126
+ 3: '#a5d162',
127
+ 4: { default: '#93c843', 10: '#93c8431A', 25: '#93c84340' },
128
+ 5: { default: '#78ba14', 10: '#78ba141A', 25: '#78ba1440' },
129
+ 6: '#619710'
130
+ },
131
+ pear: {
132
+ 1: '#f8f8e7',
133
+ 2: '#e9eab6',
134
+ 3: '#cfd161',
135
+ 4: { default: '#c6c842', 10: '#c6c8421A', 25: '#c6c84240' },
136
+ 5: { default: '#b8ba13', 10: '#b8ba131A', 25: '#b8ba1340' },
137
+ 6: '#95970F'
98
138
  }
99
139
  };
100
140
  const lightTextColor = {
@@ -107,7 +147,15 @@ const lightTextColor = {
107
147
  accent: colors.periwinkle[6],
108
148
  success: colors.green[6],
109
149
  warning: colors.yellow[6],
110
- danger: colors.red[6]
150
+ danger: colors.red[6],
151
+ blue: colors.blue[6],
152
+ orange: colors.orange[6],
153
+ sky: colors.sky[6],
154
+ pink: colors.pink[6],
155
+ plum: colors.plum[6],
156
+ lilac: colors.lilac[6],
157
+ lime: colors.lime[6],
158
+ pear: colors.pear[6]
111
159
  };
112
160
  const lightIconColor = {
113
161
  'icon-primary': colors.base.midnight.default,
@@ -121,7 +169,13 @@ const lightIconColor = {
121
169
  'icon-danger': colors.red[5].default,
122
170
  'icon-blue': colors.blue[5].default,
123
171
  'icon-orange': colors.orange[5].default,
124
- 'icon-sky': colors.sky[5].default
172
+ 'icon-sky': colors.sky[5].default,
173
+ 'icon-pink': colors.pink[5].default,
174
+ 'icon-plum': colors.plum[5].default,
175
+ 'icon-lilac': colors.lilac[5].default,
176
+ 'icon-lime': colors.lime[5].default,
177
+ 'icon-pear': colors.pear[5].default,
178
+ 'icon-white': colors.base.white.default
125
179
  };
126
180
  const lightBorderColor = {
127
181
  static: colors.base.midnight[8],
@@ -168,6 +222,8 @@ const lightBackgroundColor = {
168
222
  'danger-inverse-hover': colors.red[6],
169
223
  blue: colors.blue[5][10],
170
224
  'blue-hover': colors.blue[5][25],
225
+ 'blue-inverse': colors.blue[5].default,
226
+ 'blue-inverse-hover': colors.blue[6],
171
227
  orange: colors.orange[5][10],
172
228
  'orange-hover': colors.orange[5][25],
173
229
  'orange-inverse': colors.orange[5].default,
@@ -175,7 +231,27 @@ const lightBackgroundColor = {
175
231
  sky: colors.sky[5][10],
176
232
  'sky-hover': colors.sky[5][25],
177
233
  'sky-inverse': colors.sky[5].default,
178
- 'sky-inverse-hover': colors.sky[6]
234
+ 'sky-inverse-hover': colors.sky[6],
235
+ pink: colors.pink[5][10],
236
+ 'pink-hover': colors.pink[5][25],
237
+ 'pink-inverse': colors.pink[5].default,
238
+ 'pink-inverse-hover': colors.pink[6],
239
+ plum: colors.plum[5][10],
240
+ 'plum-hover': colors.plum[5][25],
241
+ 'plum-inverse': colors.plum[5].default,
242
+ 'plum-inverse-hover': colors.plum[6],
243
+ lilac: colors.lilac[5][10],
244
+ 'lilac-hover': colors.lilac[5][25],
245
+ 'lilac-inverse': colors.lilac[5].default,
246
+ 'lilac-inverse-hover': colors.lilac[6],
247
+ lime: colors.lime[5][10],
248
+ 'lime-hover': colors.lime[5][25],
249
+ 'lime-inverse': colors.lime[5].default,
250
+ 'lime-inverse-hover': colors.lime[6],
251
+ pear: colors.pear[5][10],
252
+ 'pear-hover': colors.pear[5][25],
253
+ 'pear-inverse': colors.pear[5].default,
254
+ 'pear-inverse-hover': colors.pear[6]
179
255
  };
180
256
  const darkTextColor = {
181
257
  'dark-primary': colors.base.white.default,
@@ -187,7 +263,15 @@ const darkTextColor = {
187
263
  'dark-accent': colors.periwinkle[3].default,
188
264
  'dark-success': colors.green[3],
189
265
  'dark-warning': colors.yellow[3],
190
- 'dark-danger': colors.red[3]
266
+ 'dark-danger': colors.red[3],
267
+ 'dark-blue': colors.blue[3],
268
+ 'dark-orange': colors.orange[3],
269
+ 'dark-sky': colors.sky[3],
270
+ 'dark-pink': colors.pink[3],
271
+ 'dark-plum': colors.plum[3],
272
+ 'dark-lilac': colors.lilac[3],
273
+ 'dark-lime': colors.lime[3],
274
+ 'dark-pear': colors.pear[3]
191
275
  };
192
276
  const darkIconColor = {
193
277
  'dark-primary': colors.base.white.default,
@@ -200,7 +284,12 @@ const darkIconColor = {
200
284
  'dark-danger': colors.red[4].default,
201
285
  'dark-blue': colors.blue[4].default,
202
286
  'dark-orange': colors.orange[4].default,
203
- 'dark-sky': colors.sky[4].default
287
+ 'dark-sky': colors.sky[4].default,
288
+ 'dark-pink': colors.pink[5].default,
289
+ 'dark-plum': colors.plum[5].default,
290
+ 'dark-lilac': colors.lilac[5].default,
291
+ 'dark-lime': colors.lime[5].default,
292
+ 'dark-pear': colors.sky[5].default
204
293
  };
205
294
  const darkBorderColor = {
206
295
  'dark-static': colors.base.white[10],
@@ -251,7 +340,17 @@ const darkBackgroundColor = {
251
340
  'dark-orange': colors.orange[4][10],
252
341
  'dark-orange-hover': colors.orange[4][25],
253
342
  'dark-sky': colors.sky[4][10],
254
- 'dark-sky-hover': colors.sky[4][25]
343
+ 'dark-sky-hover': colors.sky[4][25],
344
+ 'dark-pink': colors.pink[4][10],
345
+ 'dark-pink-hover': colors.pink[4][25],
346
+ 'dark-plum': colors.plum[4][10],
347
+ 'dark-plum-hover': colors.plum[4][25],
348
+ 'dark-lilac': colors.lilac[4][10],
349
+ 'dark-lilac-hover': colors.lilac[4][25],
350
+ 'dark-lime': colors.lime[4][10],
351
+ 'dark-lime-hover': colors.lime[4][25],
352
+ 'dark-pear': colors.pear[4][10],
353
+ 'dark-pear-hover': colors.pear[4][25]
255
354
  };
256
355
  export const borderColor = {
257
356
  ...lightBorderColor,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@reshape-biotech/design-system",
3
- "version": "0.0.50",
3
+ "version": "0.0.52",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "vite build",
@@ -36,8 +36,7 @@
36
36
  "svelte": "^5.0.0",
37
37
  "marked": "^15.0.0",
38
38
  "luxon": "^3.5.0",
39
- "svelte-select": "^5.8.1",
40
- "echarts": "^5.6.0"
39
+ "svelte-select": "^5.8.1"
41
40
  },
42
41
  "devDependencies": {
43
42
  "@eslint/compat": "^1.2.3",
@@ -75,6 +74,7 @@
75
74
  "vitest": "^3.0.6"
76
75
  },
77
76
  "dependencies": {
78
- "bits-ui": "^1.3.2"
77
+ "bits-ui": "^1.3.2",
78
+ "echarts": "^5.6.0"
79
79
  }
80
80
  }