@reshape-biotech/design-system 0.0.7 → 0.0.11

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 (7) hide show
  1. package/dist/components/avatar/Avatar.svelte +1 -1
  2. package/dist/components/tooltip/Tooltip.svelte +36 -28
  3. package/dist/index.d.ts +0 -1
  4. package/dist/index.js +0 -2
  5. package/dist/tokens.d.ts +457 -552
  6. package/dist/tokens.js +5 -5
  7. package/package.json +29 -16
package/dist/components/avatar/Avatar.svelte CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  {#snippet avatar()}
46
46
  <div
47
- class="{sizeClassName} flex items-center justify-center rounded-full bg-accent-inverse text-primary-inverse"
47
+ class="{sizeClassName} bg-accent-inverse text-primary-inverse flex items-center justify-center rounded-full"
48
48
  >
49
49
  {initials}
50
50
  </div>
package/dist/components/tooltip/Tooltip.svelte CHANGED
@@ -1,41 +1,49 @@
1
1
  <script lang="ts">
2
- import { Tooltip } from 'flowbite-svelte';
3
- import type { Snippet } from 'svelte';
2
+ import { Tooltip } from 'flowbite-svelte';
3
+ import type { Snippet } from 'svelte';
4
4
 
5
- interface Props {
6
- class?: string;
7
- forceOpen?: boolean;
8
- showArrow?: boolean;
9
- placement?: 'top' | 'right' | 'bottom' | 'left';
10
- trigger?: Snippet;
11
- content?: Snippet;
12
- }
5
+ interface Props {
6
+ class?: string;
7
+ forceOpen?: boolean;
8
+ showArrow?: boolean;
9
+ placement?: 'top' | 'right' | 'bottom' | 'left';
10
+ trigger?: Snippet;
11
+ content?: Snippet;
12
+ }
13
13
 
14
- let {
15
- class: className = '',
16
- forceOpen = false,
17
- showArrow = true,
18
- placement = 'top',
19
- trigger,
20
- content
21
- }: Props = $props();
14
+ let {
15
+ class: className = '',
16
+ forceOpen = false,
17
+ showArrow = true,
18
+ placement = 'top',
19
+ trigger,
20
+ content,
21
+ }: Props = $props();
22
22
 
23
- let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
23
+ let tooltipClass = $derived(`${className} ${showArrow ? 'with-arrow' : ''}`);
24
24
  </script>
25
25
 
26
26
  {@render trigger?.()}
27
27
  <Tooltip
28
- open={forceOpen}
29
- arrow={showArrow}
30
- {placement}
31
- class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 text-sm font-normal text-primary-inverse shadow`}
28
+ open={forceOpen}
29
+ arrow={showArrow}
30
+ {placement}
31
+ class={`${tooltipClass} rounded bg-base-inverse px-2 py-1 text-sm font-normal text-primary-inverse shadow`}
32
32
  >
33
- {@render content?.()}
33
+ {@render content?.()}
34
34
  </Tooltip>
35
35
 
36
36
  <style>
37
- /* Hack to get the arrow styling to work */
38
- :global(.tooltip.with-arrow > :last-child) {
39
- @apply pointer-events-none absolute block h-2 w-2 rotate-45 transform border-inherit bg-inherit;
40
- }
37
+ /* Hack to get the arrow styling to work */
38
+ :global(.tooltip.with-arrow > :last-child) {
39
+ pointer-events: none;
40
+ position: absolute;
41
+ display: block;
42
+ height: 0.5rem;
43
+ width: 0.5rem;
44
+ --tw-rotate: 45deg;
45
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
46
+ border-color: inherit;
47
+ background-color: inherit
48
+ }
41
49
  </style>
package/dist/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export { default as Avatar } from './components/avatar/Avatar.svelte';
2
2
  export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
3
- export { tokens } from './tokens.js';
package/dist/index.js CHANGED
@@ -1,5 +1,3 @@
1
1
  // Reexport your entry components here
2
2
  export { default as Avatar } from './components/avatar/Avatar.svelte';
3
3
  export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
4
- // Tokens
5
- export { tokens } from './tokens.js';
package/dist/tokens.d.ts CHANGED
@@ -1,564 +1,469 @@
1
1
  export declare const colors: {
2
- base: {
3
- mist: string;
4
- snow: string;
5
- white: {
6
- default: string;
7
- 5: string;
8
- 10: string;
9
- 15: string;
10
- 25: string;
11
- 50: string;
12
- 70: string;
13
- 90: string;
14
- };
15
- midnight: {
16
- default: string;
17
- 5: string;
18
- 10: string;
19
- 15: string;
20
- 25: string;
21
- 50: string;
22
- 70: string;
23
- 90: string;
24
- };
25
- };
26
- gray: {
27
- 1: string;
28
- 2: string;
29
- 3: string;
30
- 4: string;
31
- 5: string;
32
- 6: string;
33
- };
34
- periwinkle: {
35
- 1: string;
36
- 2: string;
37
- 3: {
38
- default: string;
39
- 10: string;
40
- 25: string;
41
- };
42
- 4: {
43
- default: string;
44
- 10: string;
45
- 25: string;
46
- };
47
- 5: {
48
- default: string;
49
- 10: string;
50
- 25: string;
51
- };
52
- 6: string;
53
- };
54
- orange: {
55
- 1: string;
56
- 2: string;
57
- 3: string;
58
- 4: {
59
- default: string;
60
- 10: string;
61
- 25: string;
62
- };
63
- 5: {
64
- default: string;
65
- 10: string;
66
- 25: string;
67
- };
68
- 6: string;
69
- };
70
- sky: {
71
- 1: string;
72
- 2: string;
73
- 3: string;
74
- 4: {
75
- default: string;
76
- 10: string;
77
- 25: string;
78
- };
79
- 5: {
80
- default: string;
81
- 10: string;
82
- 25: string;
83
- };
84
- 6: string;
85
- };
86
- blue: {
87
- 1: string;
88
- 2: string;
89
- 3: string;
90
- 4: {
91
- default: string;
92
- 10: string;
93
- 25: string;
94
- };
95
- 5: {
96
- default: string;
97
- 10: string;
98
- 25: string;
99
- };
100
- 6: string;
101
- };
102
- green: {
103
- 1: string;
104
- 2: string;
105
- 3: string;
106
- 4: {
107
- default: string;
108
- 10: string;
109
- 25: string;
110
- };
111
- 5: {
112
- default: string;
113
- 10: string;
114
- 25: string;
115
- };
116
- 6: string;
117
- };
118
- yellow: {
119
- 1: string;
120
- 2: string;
121
- 3: string;
122
- 4: {
123
- default: string;
124
- 10: string;
125
- 25: string;
126
- };
127
- 5: {
128
- default: string;
129
- 10: string;
130
- 25: string;
131
- };
132
- 6: string;
133
- };
134
- red: {
135
- 1: string;
136
- 2: string;
137
- 3: string;
138
- 4: {
139
- default: string;
140
- 10: string;
141
- 25: string;
142
- };
143
- 5: {
144
- default: string;
145
- 10: string;
146
- 25: string;
147
- };
148
- 6: string;
149
- };
150
- shadow: {
151
- 2: string;
152
- 4: string;
153
- 8: string;
154
- 12: string;
155
- 16: string;
156
- };
2
+ base: {
3
+ mist: string;
4
+ snow: string;
5
+ white: {
6
+ default: string;
7
+ 5: string;
8
+ 10: string;
9
+ 15: string;
10
+ 25: string;
11
+ 50: string;
12
+ 70: string;
13
+ 90: string;
14
+ };
15
+ midnight: {
16
+ default: string;
17
+ 5: string;
18
+ 10: string;
19
+ 15: string;
20
+ 25: string;
21
+ 50: string;
22
+ 70: string;
23
+ 90: string;
24
+ };
25
+ };
26
+ gray: {
27
+ 1: string;
28
+ 2: string;
29
+ 3: string;
30
+ 4: string;
31
+ 5: string;
32
+ 6: string;
33
+ };
34
+ periwinkle: {
35
+ 1: string;
36
+ 2: string;
37
+ 3: {
38
+ default: string;
39
+ 10: string;
40
+ 25: string;
41
+ };
42
+ 4: {
43
+ default: string;
44
+ 10: string;
45
+ 25: string;
46
+ };
47
+ 5: {
48
+ default: string;
49
+ 10: string;
50
+ 25: string;
51
+ };
52
+ 6: string;
53
+ };
54
+ orange: {
55
+ 1: string;
56
+ 2: string;
57
+ 3: string;
58
+ 4: {
59
+ default: string;
60
+ 10: string;
61
+ 25: string;
62
+ };
63
+ 5: {
64
+ default: string;
65
+ 10: string;
66
+ 25: string;
67
+ };
68
+ 6: string;
69
+ };
70
+ sky: {
71
+ 1: string;
72
+ 2: string;
73
+ 3: string;
74
+ 4: {
75
+ default: string;
76
+ 10: string;
77
+ 25: string;
78
+ };
79
+ 5: {
80
+ default: string;
81
+ 10: string;
82
+ 25: string;
83
+ };
84
+ 6: string;
85
+ };
86
+ blue: {
87
+ 1: string;
88
+ 2: string;
89
+ 3: string;
90
+ 4: {
91
+ default: string;
92
+ 10: string;
93
+ 25: string;
94
+ };
95
+ 5: {
96
+ default: string;
97
+ 10: string;
98
+ 25: string;
99
+ };
100
+ 6: string;
101
+ };
102
+ green: {
103
+ 1: string;
104
+ 2: string;
105
+ 3: string;
106
+ 4: {
107
+ default: string;
108
+ 10: string;
109
+ 25: string;
110
+ };
111
+ 5: {
112
+ default: string;
113
+ 10: string;
114
+ 25: string;
115
+ };
116
+ 6: string;
117
+ };
118
+ yellow: {
119
+ 1: string;
120
+ 2: string;
121
+ 3: string;
122
+ 4: {
123
+ default: string;
124
+ 10: string;
125
+ 25: string;
126
+ };
127
+ 5: {
128
+ default: string;
129
+ 10: string;
130
+ 25: string;
131
+ };
132
+ 6: string;
133
+ };
134
+ red: {
135
+ 1: string;
136
+ 2: string;
137
+ 3: string;
138
+ 4: {
139
+ default: string;
140
+ 10: string;
141
+ 25: string;
142
+ };
143
+ 5: {
144
+ default: string;
145
+ 10: string;
146
+ 25: string;
147
+ };
148
+ 6: string;
149
+ };
150
+ shadow: {
151
+ 2: string;
152
+ 4: string;
153
+ 8: string;
154
+ 12: string;
155
+ 16: string;
156
+ };
157
157
  };
158
158
  export declare const borderColor: {
159
- 'dark-static': string;
160
- 'dark-interactive': string;
161
- 'dark-hover': string;
162
- 'dark-focus': string;
163
- 'dark-danger': string;
164
- static: string;
165
- interactive: string;
166
- hover: string;
167
- focus: string;
168
- danger: string;
159
+ 'dark-static': string;
160
+ 'dark-interactive': string;
161
+ 'dark-hover': string;
162
+ 'dark-focus': string;
163
+ 'dark-danger': string;
164
+ static: string;
165
+ interactive: string;
166
+ hover: string;
167
+ focus: string;
168
+ danger: string;
169
169
  };
170
170
  export declare const textColor: {
171
- 'icon-primary': string;
172
- 'icon-secondary': string;
173
- 'icon-tertiary': string;
174
- 'icon-primary-inverse': string;
175
- 'icon-accent': string;
176
- 'icon-success': string;
177
- 'icon-warning': string;
178
- 'icon-danger': string;
179
- 'icon-blue': string;
180
- 'icon-orange': string;
181
- 'icon-sky': string;
182
- 'dark-primary': string;
183
- 'dark-secondary': string;
184
- 'dark-tertiary': string;
185
- 'dark-primary-inverse': string;
186
- 'dark-secondary-inverse': string;
187
- 'dark-tertiary-inverse': string;
188
- 'dark-accent': string;
189
- 'dark-success': string;
190
- 'dark-warning': string;
191
- 'dark-danger': string;
192
- primary: string;
193
- secondary: string;
194
- tertiary: string;
195
- 'primary-inverse': string;
196
- 'secondary-inverse': string;
197
- 'tertiary-inverse': string;
198
- accent: string;
199
- success: string;
200
- warning: string;
201
- danger: string;
171
+ 'icon-primary': string;
172
+ 'icon-secondary': string;
173
+ 'icon-tertiary': string;
174
+ 'icon-primary-inverse': string;
175
+ 'icon-accent': string;
176
+ 'icon-success': string;
177
+ 'icon-warning': string;
178
+ 'icon-danger': string;
179
+ 'icon-blue': string;
180
+ 'icon-orange': string;
181
+ 'icon-sky': string;
182
+ 'dark-primary': string;
183
+ 'dark-secondary': string;
184
+ 'dark-tertiary': string;
185
+ 'dark-primary-inverse': string;
186
+ 'dark-secondary-inverse': string;
187
+ 'dark-tertiary-inverse': string;
188
+ 'dark-accent': string;
189
+ 'dark-success': string;
190
+ 'dark-warning': string;
191
+ 'dark-danger': string;
192
+ primary: string;
193
+ secondary: string;
194
+ tertiary: string;
195
+ 'primary-inverse': string;
196
+ 'secondary-inverse': string;
197
+ 'tertiary-inverse': string;
198
+ accent: string;
199
+ success: string;
200
+ warning: string;
201
+ danger: string;
202
202
  };
203
203
  export declare const backgroundColor: {
204
- 'dark-neutral': string;
205
- 'dark-neutral-hover': string;
206
- 'dark-neutral-darker': string;
207
- 'dark-neutral-darker-hover': string;
208
- 'dark-accent': string;
209
- 'dark-accent-hover': string;
210
- 'dark-accent-inverse': string;
211
- 'dark-accent-inverse-hover': string;
212
- 'dark-success': string;
213
- 'dark-success-hover': string;
214
- 'dark-success-inverse': string;
215
- 'dark-success-inverse-hover': string;
216
- 'dark-warning': string;
217
- 'dark-warning-hover': string;
218
- 'dark-warning-inverse': string;
219
- 'dark-warning-inverse-hover': string;
220
- 'dark-danger': string;
221
- 'dark-danger-hover': string;
222
- 'dark-danger-inverse': string;
223
- 'dark-danger-inverse-hover': string;
224
- 'dark-blue': string;
225
- 'dark-blue-hover': string;
226
- 'dark-orange': string;
227
- 'dark-orange-hover': string;
228
- 'dark-sky': string;
229
- 'dark-sky-hover': string;
230
- 'dark-primary': string;
231
- 'dark-secondary': string;
232
- 'dark-base': string;
233
- 'dark-base-inverse': string;
234
- 'dark-overlay': string;
235
- surface: string;
236
- 'surface-secondary': string;
237
- base: string;
238
- 'base-inverse': string;
239
- overlay: string;
240
- neutral: string;
241
- 'neutral-hover': string;
242
- 'neutral-darker': string;
243
- 'neutral-darker-hover': string;
244
- 'neutral-inverse': string;
245
- 'neutral-inverse-hover': string;
246
- accent: string;
247
- 'accent-hover': string;
248
- 'accent-inverse': string;
249
- 'accent-inverse-hover': string;
250
- success: string;
251
- 'success-hover': string;
252
- 'success-inverse': string;
253
- 'success-inverse-hover': string;
254
- warning: string;
255
- 'warning-hover': string;
256
- 'warning-inverse': string;
257
- 'warning-inverse-hover': string;
258
- danger: string;
259
- 'danger-hover': string;
260
- 'danger-inverse': string;
261
- 'danger-inverse-hover': string;
262
- blue: string;
263
- 'blue-hover': string;
264
- orange: string;
265
- 'orange-hover': string;
266
- 'orange-inverse': string;
267
- 'orange-inverse-hover': string;
268
- sky: string;
269
- 'sky-hover': string;
270
- 'sky-inverse': string;
271
- 'sky-inverse-hover': string;
204
+ 'dark-neutral': string;
205
+ 'dark-neutral-hover': string;
206
+ 'dark-neutral-darker': string;
207
+ 'dark-neutral-darker-hover': string;
208
+ 'dark-accent': string;
209
+ 'dark-accent-hover': string;
210
+ 'dark-accent-inverse': string;
211
+ 'dark-accent-inverse-hover': string;
212
+ 'dark-success': string;
213
+ 'dark-success-hover': string;
214
+ 'dark-success-inverse': string;
215
+ 'dark-success-inverse-hover': string;
216
+ 'dark-warning': string;
217
+ 'dark-warning-hover': string;
218
+ 'dark-warning-inverse': string;
219
+ 'dark-warning-inverse-hover': string;
220
+ 'dark-danger': string;
221
+ 'dark-danger-hover': string;
222
+ 'dark-danger-inverse': string;
223
+ 'dark-danger-inverse-hover': string;
224
+ 'dark-blue': string;
225
+ 'dark-blue-hover': string;
226
+ 'dark-orange': string;
227
+ 'dark-orange-hover': string;
228
+ 'dark-sky': string;
229
+ 'dark-sky-hover': string;
230
+ 'dark-primary': string;
231
+ 'dark-secondary': string;
232
+ 'dark-base': string;
233
+ 'dark-base-inverse': string;
234
+ 'dark-overlay': string;
235
+ surface: string;
236
+ 'surface-secondary': string;
237
+ base: string;
238
+ 'base-inverse': string;
239
+ overlay: string;
240
+ neutral: string;
241
+ 'neutral-hover': string;
242
+ 'neutral-darker': string;
243
+ 'neutral-darker-hover': string;
244
+ 'neutral-inverse': string;
245
+ 'neutral-inverse-hover': string;
246
+ accent: string;
247
+ 'accent-hover': string;
248
+ 'accent-inverse': string;
249
+ 'accent-inverse-hover': string;
250
+ success: string;
251
+ 'success-hover': string;
252
+ 'success-inverse': string;
253
+ 'success-inverse-hover': string;
254
+ warning: string;
255
+ 'warning-hover': string;
256
+ 'warning-inverse': string;
257
+ 'warning-inverse-hover': string;
258
+ danger: string;
259
+ 'danger-hover': string;
260
+ 'danger-inverse': string;
261
+ 'danger-inverse-hover': string;
262
+ blue: string;
263
+ 'blue-hover': string;
264
+ orange: string;
265
+ 'orange-hover': string;
266
+ 'orange-inverse': string;
267
+ 'orange-inverse-hover': string;
268
+ sky: string;
269
+ 'sky-hover': string;
270
+ 'sky-inverse': string;
271
+ 'sky-inverse-hover': string;
272
272
  };
273
273
  export declare const boxShadow: {
274
- field: string;
275
- nav: string;
276
- calendar: string;
277
- container: string;
278
- panel: string;
279
- outline: string;
280
- focus: string;
274
+ field: string;
275
+ nav: string;
276
+ calendar: string;
277
+ container: string;
278
+ panel: string;
279
+ outline: string;
280
+ focus: string;
281
281
  };
282
282
  export declare const tokens: {
283
- colors: {
284
- base: {
285
- mist: string;
286
- snow: string;
287
- white: {
288
- default: string;
289
- 5: string;
290
- 10: string;
291
- 15: string;
292
- 25: string;
293
- 50: string;
294
- 70: string;
295
- 90: string;
296
- };
297
- midnight: {
298
- default: string;
299
- 5: string;
300
- 10: string;
301
- 15: string;
302
- 25: string;
303
- 50: string;
304
- 70: string;
305
- 90: string;
306
- };
307
- };
308
- gray: {
309
- 1: string;
310
- 2: string;
311
- 3: string;
312
- 4: string;
313
- 5: string;
314
- 6: string;
315
- };
316
- periwinkle: {
317
- 1: string;
318
- 2: string;
319
- 3: {
320
- default: string;
321
- 10: string;
322
- 25: string;
323
- };
324
- 4: {
325
- default: string;
326
- 10: string;
327
- 25: string;
328
- };
329
- 5: {
330
- default: string;
331
- 10: string;
332
- 25: string;
333
- };
334
- 6: string;
335
- };
336
- orange: {
337
- 1: string;
338
- 2: string;
339
- 3: string;
340
- 4: {
341
- default: string;
342
- 10: string;
343
- 25: string;
344
- };
345
- 5: {
346
- default: string;
347
- 10: string;
348
- 25: string;
349
- };
350
- 6: string;
351
- };
352
- sky: {
353
- 1: string;
354
- 2: string;
355
- 3: string;
356
- 4: {
357
- default: string;
358
- 10: string;
359
- 25: string;
360
- };
361
- 5: {
362
- default: string;
363
- 10: string;
364
- 25: string;
365
- };
366
- 6: string;
367
- };
368
- blue: {
369
- 1: string;
370
- 2: string;
371
- 3: string;
372
- 4: {
373
- default: string;
374
- 10: string;
375
- 25: string;
376
- };
377
- 5: {
378
- default: string;
379
- 10: string;
380
- 25: string;
381
- };
382
- 6: string;
383
- };
384
- green: {
385
- 1: string;
386
- 2: string;
387
- 3: string;
388
- 4: {
389
- default: string;
390
- 10: string;
391
- 25: string;
392
- };
393
- 5: {
394
- default: string;
395
- 10: string;
396
- 25: string;
397
- };
398
- 6: string;
399
- };
400
- yellow: {
401
- 1: string;
402
- 2: string;
403
- 3: string;
404
- 4: {
405
- default: string;
406
- 10: string;
407
- 25: string;
408
- };
409
- 5: {
410
- default: string;
411
- 10: string;
412
- 25: string;
413
- };
414
- 6: string;
415
- };
416
- red: {
417
- 1: string;
418
- 2: string;
419
- 3: string;
420
- 4: {
421
- default: string;
422
- 10: string;
423
- 25: string;
424
- };
425
- 5: {
426
- default: string;
427
- 10: string;
428
- 25: string;
429
- };
430
- 6: string;
431
- };
432
- shadow: {
433
- 2: string;
434
- 4: string;
435
- 8: string;
436
- 12: string;
437
- 16: string;
438
- };
439
- };
440
- borderColor: {
441
- 'dark-static': string;
442
- 'dark-interactive': string;
443
- 'dark-hover': string;
444
- 'dark-focus': string;
445
- 'dark-danger': string;
446
- static: string;
447
- interactive: string;
448
- hover: string;
449
- focus: string;
450
- danger: string;
451
- };
452
- textColor: {
453
- 'icon-primary': string;
454
- 'icon-secondary': string;
455
- 'icon-tertiary': string;
456
- 'icon-primary-inverse': string;
457
- 'icon-accent': string;
458
- 'icon-success': string;
459
- 'icon-warning': string;
460
- 'icon-danger': string;
461
- 'icon-blue': string;
462
- 'icon-orange': string;
463
- 'icon-sky': string;
464
- 'dark-primary': string;
465
- 'dark-secondary': string;
466
- 'dark-tertiary': string;
467
- 'dark-primary-inverse': string;
468
- 'dark-secondary-inverse': string;
469
- 'dark-tertiary-inverse': string;
470
- 'dark-accent': string;
471
- 'dark-success': string;
472
- 'dark-warning': string;
473
- 'dark-danger': string;
474
- primary: string;
475
- secondary: string;
476
- tertiary: string;
477
- 'primary-inverse': string;
478
- 'secondary-inverse': string;
479
- 'tertiary-inverse': string;
480
- accent: string;
481
- success: string;
482
- warning: string;
483
- danger: string;
484
- };
485
- backgroundColor: {
486
- 'dark-neutral': string;
487
- 'dark-neutral-hover': string;
488
- 'dark-neutral-darker': string;
489
- 'dark-neutral-darker-hover': string;
490
- 'dark-accent': string;
491
- 'dark-accent-hover': string;
492
- 'dark-accent-inverse': string;
493
- 'dark-accent-inverse-hover': string;
494
- 'dark-success': string;
495
- 'dark-success-hover': string;
496
- 'dark-success-inverse': string;
497
- 'dark-success-inverse-hover': string;
498
- 'dark-warning': string;
499
- 'dark-warning-hover': string;
500
- 'dark-warning-inverse': string;
501
- 'dark-warning-inverse-hover': string;
502
- 'dark-danger': string;
503
- 'dark-danger-hover': string;
504
- 'dark-danger-inverse': string;
505
- 'dark-danger-inverse-hover': string;
506
- 'dark-blue': string;
507
- 'dark-blue-hover': string;
508
- 'dark-orange': string;
509
- 'dark-orange-hover': string;
510
- 'dark-sky': string;
511
- 'dark-sky-hover': string;
512
- 'dark-primary': string;
513
- 'dark-secondary': string;
514
- 'dark-base': string;
515
- 'dark-base-inverse': string;
516
- 'dark-overlay': string;
517
- surface: string;
518
- 'surface-secondary': string;
519
- base: string;
520
- 'base-inverse': string;
521
- overlay: string;
522
- neutral: string;
523
- 'neutral-hover': string;
524
- 'neutral-darker': string;
525
- 'neutral-darker-hover': string;
526
- 'neutral-inverse': string;
527
- 'neutral-inverse-hover': string;
528
- accent: string;
529
- 'accent-hover': string;
530
- 'accent-inverse': string;
531
- 'accent-inverse-hover': string;
532
- success: string;
533
- 'success-hover': string;
534
- 'success-inverse': string;
535
- 'success-inverse-hover': string;
536
- warning: string;
537
- 'warning-hover': string;
538
- 'warning-inverse': string;
539
- 'warning-inverse-hover': string;
540
- danger: string;
541
- 'danger-hover': string;
542
- 'danger-inverse': string;
543
- 'danger-inverse-hover': string;
544
- blue: string;
545
- 'blue-hover': string;
546
- orange: string;
547
- 'orange-hover': string;
548
- 'orange-inverse': string;
549
- 'orange-inverse-hover': string;
550
- sky: string;
551
- 'sky-hover': string;
552
- 'sky-inverse': string;
553
- 'sky-inverse-hover': string;
554
- };
555
- boxShadow: {
556
- field: string;
557
- nav: string;
558
- calendar: string;
559
- container: string;
560
- panel: string;
561
- outline: string;
562
- focus: string;
563
- };
283
+ field: string;
284
+ nav: string;
285
+ calendar: string;
286
+ container: string;
287
+ panel: string;
288
+ outline: string;
289
+ focus: string;
290
+ 'dark-neutral': string;
291
+ 'dark-neutral-hover': string;
292
+ 'dark-neutral-darker': string;
293
+ 'dark-neutral-darker-hover': string;
294
+ 'dark-accent': string;
295
+ 'dark-accent-hover': string;
296
+ 'dark-accent-inverse': string;
297
+ 'dark-accent-inverse-hover': string;
298
+ 'dark-success': string;
299
+ 'dark-success-hover': string;
300
+ 'dark-success-inverse': string;
301
+ 'dark-success-inverse-hover': string;
302
+ 'dark-warning': string;
303
+ 'dark-warning-hover': string;
304
+ 'dark-warning-inverse': string;
305
+ 'dark-warning-inverse-hover': string;
306
+ 'dark-danger': string;
307
+ 'dark-danger-hover': string;
308
+ 'dark-danger-inverse': string;
309
+ 'dark-danger-inverse-hover': string;
310
+ 'dark-blue': string;
311
+ 'dark-blue-hover': string;
312
+ 'dark-orange': string;
313
+ 'dark-orange-hover': string;
314
+ 'dark-sky': string;
315
+ 'dark-sky-hover': string;
316
+ 'dark-primary': string;
317
+ 'dark-secondary': string;
318
+ 'dark-base': string;
319
+ 'dark-base-inverse': string;
320
+ 'dark-overlay': string;
321
+ surface: string;
322
+ 'surface-secondary': string;
323
+ base: string;
324
+ 'base-inverse': string;
325
+ overlay: string;
326
+ neutral: string;
327
+ 'neutral-hover': string;
328
+ 'neutral-darker': string;
329
+ 'neutral-darker-hover': string;
330
+ 'neutral-inverse': string;
331
+ 'neutral-inverse-hover': string;
332
+ accent: string;
333
+ 'accent-hover': string;
334
+ 'accent-inverse': string;
335
+ 'accent-inverse-hover': string;
336
+ success: string;
337
+ 'success-hover': string;
338
+ 'success-inverse': string;
339
+ 'success-inverse-hover': string;
340
+ warning: string;
341
+ 'warning-hover': string;
342
+ 'warning-inverse': string;
343
+ 'warning-inverse-hover': string;
344
+ danger: string;
345
+ 'danger-hover': string;
346
+ 'danger-inverse': string;
347
+ 'danger-inverse-hover': string;
348
+ blue: string;
349
+ 'blue-hover': string;
350
+ orange: string;
351
+ 'orange-hover': string;
352
+ 'orange-inverse': string;
353
+ 'orange-inverse-hover': string;
354
+ sky: string;
355
+ 'sky-hover': string;
356
+ 'sky-inverse': string;
357
+ 'sky-inverse-hover': string;
358
+ 'icon-primary': string;
359
+ 'icon-secondary': string;
360
+ 'icon-tertiary': string;
361
+ 'icon-primary-inverse': string;
362
+ 'icon-accent': string;
363
+ 'icon-success': string;
364
+ 'icon-warning': string;
365
+ 'icon-danger': string;
366
+ 'icon-blue': string;
367
+ 'icon-orange': string;
368
+ 'icon-sky': string;
369
+ 'dark-tertiary': string;
370
+ 'dark-primary-inverse': string;
371
+ 'dark-secondary-inverse': string;
372
+ 'dark-tertiary-inverse': string;
373
+ primary: string;
374
+ secondary: string;
375
+ tertiary: string;
376
+ 'primary-inverse': string;
377
+ 'secondary-inverse': string;
378
+ 'tertiary-inverse': string;
379
+ 'dark-static': string;
380
+ 'dark-interactive': string;
381
+ 'dark-hover': string;
382
+ 'dark-focus': string;
383
+ static: string;
384
+ interactive: string;
385
+ hover: string;
386
+ gray: {
387
+ 1: string;
388
+ 2: string;
389
+ 3: string;
390
+ 4: string;
391
+ 5: string;
392
+ 6: string;
393
+ };
394
+ periwinkle: {
395
+ 1: string;
396
+ 2: string;
397
+ 3: {
398
+ default: string;
399
+ 10: string;
400
+ 25: string;
401
+ };
402
+ 4: {
403
+ default: string;
404
+ 10: string;
405
+ 25: string;
406
+ };
407
+ 5: {
408
+ default: string;
409
+ 10: string;
410
+ 25: string;
411
+ };
412
+ 6: string;
413
+ };
414
+ green: {
415
+ 1: string;
416
+ 2: string;
417
+ 3: string;
418
+ 4: {
419
+ default: string;
420
+ 10: string;
421
+ 25: string;
422
+ };
423
+ 5: {
424
+ default: string;
425
+ 10: string;
426
+ 25: string;
427
+ };
428
+ 6: string;
429
+ };
430
+ yellow: {
431
+ 1: string;
432
+ 2: string;
433
+ 3: string;
434
+ 4: {
435
+ default: string;
436
+ 10: string;
437
+ 25: string;
438
+ };
439
+ 5: {
440
+ default: string;
441
+ 10: string;
442
+ 25: string;
443
+ };
444
+ 6: string;
445
+ };
446
+ red: {
447
+ 1: string;
448
+ 2: string;
449
+ 3: string;
450
+ 4: {
451
+ default: string;
452
+ 10: string;
453
+ 25: string;
454
+ };
455
+ 5: {
456
+ default: string;
457
+ 10: string;
458
+ 25: string;
459
+ };
460
+ 6: string;
461
+ };
462
+ shadow: {
463
+ 2: string;
464
+ 4: string;
465
+ 8: string;
466
+ 12: string;
467
+ 16: string;
468
+ };
564
469
  };
package/dist/tokens.js CHANGED
@@ -257,9 +257,9 @@ export const boxShadow = {
257
257
  focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
258
258
  };
259
259
  export const tokens = {
260
- colors,
261
- borderColor,
262
- textColor,
263
- backgroundColor,
264
- boxShadow
260
+ ...colors,
261
+ ...borderColor,
262
+ ...textColor,
263
+ ...backgroundColor,
264
+ ...boxShadow
265
265
  };
package/package.json CHANGED
@@ -1,7 +1,6 @@
1
1
  {
2
2
  "name": "@reshape-biotech/design-system",
3
- "version": "0.0.7",
4
- "public": false,
3
+ "version": "0.0.11",
5
4
  "scripts": {
6
5
  "dev": "vite dev",
7
6
  "build": "vite build && npm run package",
@@ -10,8 +9,12 @@
10
9
  "prepublishOnly": "npm run package",
11
10
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12
11
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
13
- "lint": "eslint . && prettier --check .",
14
- "format": "prettier --write ."
12
+ "format": "prettier --write .",
13
+ "lint": "prettier --check . && eslint .",
14
+ "storybook": "storybook dev -p 6006",
15
+ "build-storybook": "storybook build",
16
+ "test:unit": "vitest",
17
+ "test": "npm run test:unit -- --run"
15
18
  },
16
19
  "files": [
17
20
  "dist",
@@ -27,37 +30,47 @@
27
30
  "exports": {
28
31
  ".": {
29
32
  "types": "./dist/index.d.ts",
30
- "svelte": "./dist/index.js",
31
- "default": "./dist/index.js"
33
+ "svelte": "./dist/index.js"
32
34
  }
33
35
  },
34
36
  "peerDependencies": {
35
- "svelte": "^5.0.0",
36
- "flowbite": "^2.5.2",
37
- "flowbite-svelte": "^0.47.3",
38
- "postcss": "^8.4.49"
37
+ "svelte": "^5.0.0"
39
38
  },
40
39
  "devDependencies": {
40
+ "@chromatic-com/storybook": "^3.2.2",
41
41
  "@eslint/compat": "^1.2.3",
42
- "@sveltejs/adapter-auto": "^3.0.0",
42
+ "@storybook/addon-essentials": "^8.4.7",
43
+ "@storybook/addon-interactions": "^8.4.7",
44
+ "@storybook/addon-svelte-csf": "^5.0.0-next.18",
45
+ "@storybook/blocks": "^8.4.7",
46
+ "@storybook/svelte": "^8.4.7",
47
+ "@storybook/sveltekit": "^8.4.7",
48
+ "@storybook/test": "^8.4.7",
49
+ "@sveltejs/adapter-vercel": "^5.5.0",
43
50
  "@sveltejs/kit": "^2.9.0",
44
51
  "@sveltejs/package": "^2.0.0",
45
52
  "@sveltejs/vite-plugin-svelte": "^5.0.0",
46
- "@tailwindcss/container-queries": "^0.1.1",
47
- "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
48
- "@tailwindcss/typography": "^0.5.15",
53
+ "autoprefixer": "^10.4.20",
49
54
  "eslint": "^9.7.0",
50
55
  "eslint-config-prettier": "^9.1.0",
51
56
  "eslint-plugin-svelte": "^2.36.0",
52
57
  "globals": "^15.0.0",
58
+ "postcss": "^8.4.49",
53
59
  "prettier": "^3.3.2",
54
60
  "prettier-plugin-svelte": "^3.2.6",
61
+ "prettier-plugin-tailwindcss": "^0.6.5",
55
62
  "publint": "^0.2.0",
63
+ "storybook": "^8.4.7",
56
64
  "svelte": "^5.0.0",
57
65
  "svelte-check": "^4.0.0",
58
- "tailwindcss": "^3.4.17",
66
+ "tailwindcss": "^3.4.9",
59
67
  "typescript": "^5.0.0",
60
68
  "typescript-eslint": "^8.0.0",
61
- "vite": "^6.0.0"
69
+ "vite": "^6.0.0",
70
+ "vitest": "^2.0.4"
71
+ },
72
+ "dependencies": {
73
+ "@tailwindcss/container-queries": "^0.1.1",
74
+ "@tailwindcss/typography": "^0.5.15"
62
75
  }
63
76
  }