@reshape-biotech/design-system 0.0.4 → 0.0.5
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/avatar/Avatar.svelte +47 -47
- package/dist/components/tooltip/Tooltip.stories.svelte +105 -105
- package/dist/components/tooltip/Tooltip.svelte +28 -28
- package/dist/tokens.d.ts +552 -552
- package/dist/tokens.js +27 -27
- package/package.json +9 -2
package/dist/tokens.js
CHANGED
|
@@ -10,7 +10,7 @@ export const colors = {
|
|
|
10
10
|
25: '#FFFFFF40',
|
|
11
11
|
50: '#FFFFFF80',
|
|
12
12
|
70: '#FFFFFFB3',
|
|
13
|
-
90: '#FFFFFFE6'
|
|
13
|
+
90: '#FFFFFFE6'
|
|
14
14
|
},
|
|
15
15
|
midnight: {
|
|
16
16
|
default: '#12192a',
|
|
@@ -20,8 +20,8 @@ export const colors = {
|
|
|
20
20
|
25: '#12192A40',
|
|
21
21
|
50: '#12192A80',
|
|
22
22
|
70: '#12192AB3',
|
|
23
|
-
90: '#12192AE6'
|
|
24
|
-
}
|
|
23
|
+
90: '#12192AE6'
|
|
24
|
+
}
|
|
25
25
|
},
|
|
26
26
|
gray: {
|
|
27
27
|
1: '#ecedee',
|
|
@@ -29,7 +29,7 @@ export const colors = {
|
|
|
29
29
|
3: '#c4c6ca',
|
|
30
30
|
4: '#888c94',
|
|
31
31
|
5: '#595e6a',
|
|
32
|
-
6: '#2A303F'
|
|
32
|
+
6: '#2A303F'
|
|
33
33
|
},
|
|
34
34
|
periwinkle: {
|
|
35
35
|
1: '#eeeefd',
|
|
@@ -37,7 +37,7 @@ export const colors = {
|
|
|
37
37
|
3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440' },
|
|
38
38
|
4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140' },
|
|
39
39
|
5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40' },
|
|
40
|
-
6: '#4741c1'
|
|
40
|
+
6: '#4741c1'
|
|
41
41
|
},
|
|
42
42
|
orange: {
|
|
43
43
|
1: '#fff2e6',
|
|
@@ -45,7 +45,7 @@ export const colors = {
|
|
|
45
45
|
3: '#ffa654',
|
|
46
46
|
4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
|
|
47
47
|
5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
|
|
48
|
-
6: '#cf6300'
|
|
48
|
+
6: '#cf6300'
|
|
49
49
|
},
|
|
50
50
|
sky: {
|
|
51
51
|
1: '#f3fafc',
|
|
@@ -53,7 +53,7 @@ export const colors = {
|
|
|
53
53
|
3: '#89D8E6',
|
|
54
54
|
4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
|
|
55
55
|
5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
|
|
56
|
-
6: '#3597a9'
|
|
56
|
+
6: '#3597a9'
|
|
57
57
|
},
|
|
58
58
|
blue: {
|
|
59
59
|
1: '#e8f4fe',
|
|
@@ -61,7 +61,7 @@ export const colors = {
|
|
|
61
61
|
3: '#66b8fb',
|
|
62
62
|
4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
|
|
63
63
|
5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
|
|
64
|
-
6: '#146db6'
|
|
64
|
+
6: '#146db6'
|
|
65
65
|
},
|
|
66
66
|
green: {
|
|
67
67
|
1: '#e7f7f1',
|
|
@@ -69,7 +69,7 @@ export const colors = {
|
|
|
69
69
|
3: '#65cba4',
|
|
70
70
|
4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
|
|
71
71
|
5: { default: '#0aad6e', 10: '#0aad6e1A', 25: '#0aad6e40' },
|
|
72
|
-
6: '#088756'
|
|
72
|
+
6: '#088756'
|
|
73
73
|
},
|
|
74
74
|
yellow: {
|
|
75
75
|
1: '#fff8e9',
|
|
@@ -77,7 +77,7 @@ export const colors = {
|
|
|
77
77
|
3: '#fed16c',
|
|
78
78
|
4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
|
|
79
79
|
5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
|
|
80
|
-
6: '#cc951e'
|
|
80
|
+
6: '#cc951e'
|
|
81
81
|
},
|
|
82
82
|
red: {
|
|
83
83
|
1: '#fdeded',
|
|
@@ -85,15 +85,15 @@ export const colors = {
|
|
|
85
85
|
3: '#f28384',
|
|
86
86
|
4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
|
|
87
87
|
5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
|
|
88
|
-
6: '#bf393a'
|
|
88
|
+
6: '#bf393a'
|
|
89
89
|
},
|
|
90
90
|
shadow: {
|
|
91
91
|
2: 'rgba(18, 25, 42 0.02)',
|
|
92
92
|
4: 'rgba(18, 25, 42, 0.04)',
|
|
93
93
|
8: 'rgba(18, 25, 42, 0.08)',
|
|
94
94
|
12: 'rgba(18, 25, 42, 0.12)',
|
|
95
|
-
16: 'rgba(18, 25, 42, 0.16)'
|
|
96
|
-
}
|
|
95
|
+
16: 'rgba(18, 25, 42, 0.16)'
|
|
96
|
+
}
|
|
97
97
|
};
|
|
98
98
|
const lightTextColor = {
|
|
99
99
|
primary: colors.base.midnight.default,
|
|
@@ -105,7 +105,7 @@ const lightTextColor = {
|
|
|
105
105
|
accent: colors.periwinkle[6],
|
|
106
106
|
success: colors.green[6],
|
|
107
107
|
warning: colors.yellow[6],
|
|
108
|
-
danger: colors.red[6]
|
|
108
|
+
danger: colors.red[6]
|
|
109
109
|
};
|
|
110
110
|
const lightIconColor = {
|
|
111
111
|
'icon-primary': colors.base.midnight.default,
|
|
@@ -118,14 +118,14 @@ const lightIconColor = {
|
|
|
118
118
|
'icon-danger': colors.red[5].default,
|
|
119
119
|
'icon-blue': colors.blue[5].default,
|
|
120
120
|
'icon-orange': colors.orange[5].default,
|
|
121
|
-
'icon-sky': colors.sky[5].default
|
|
121
|
+
'icon-sky': colors.sky[5].default
|
|
122
122
|
};
|
|
123
123
|
const lightBorderColor = {
|
|
124
124
|
static: colors.base.midnight[5],
|
|
125
125
|
interactive: colors.base.midnight[15],
|
|
126
126
|
hover: colors.periwinkle[5][25],
|
|
127
127
|
focus: colors.periwinkle[5].default,
|
|
128
|
-
danger: colors.red[5].default
|
|
128
|
+
danger: colors.red[5].default
|
|
129
129
|
};
|
|
130
130
|
const lightBackgroundColor = {
|
|
131
131
|
surface: colors.base.white.default,
|
|
@@ -164,7 +164,7 @@ const lightBackgroundColor = {
|
|
|
164
164
|
sky: colors.sky[5][10],
|
|
165
165
|
'sky-hover': colors.sky[5][25],
|
|
166
166
|
'sky-inverse': colors.sky[5].default,
|
|
167
|
-
'sky-inverse-hover': colors.sky[6]
|
|
167
|
+
'sky-inverse-hover': colors.sky[6]
|
|
168
168
|
};
|
|
169
169
|
const darkTextColor = {
|
|
170
170
|
'dark-primary': colors.base.white.default,
|
|
@@ -176,7 +176,7 @@ const darkTextColor = {
|
|
|
176
176
|
'dark-accent': colors.periwinkle[3].default,
|
|
177
177
|
'dark-success': colors.green[3],
|
|
178
178
|
'dark-warning': colors.yellow[3],
|
|
179
|
-
'dark-danger': colors.red[3]
|
|
179
|
+
'dark-danger': colors.red[3]
|
|
180
180
|
};
|
|
181
181
|
const darkIconColor = {
|
|
182
182
|
'dark-primary': colors.base.white.default,
|
|
@@ -189,21 +189,21 @@ const darkIconColor = {
|
|
|
189
189
|
'dark-danger': colors.red[4].default,
|
|
190
190
|
'dark-blue': colors.blue[4].default,
|
|
191
191
|
'dark-orange': colors.orange[4].default,
|
|
192
|
-
'dark-sky': colors.sky[4].default
|
|
192
|
+
'dark-sky': colors.sky[4].default
|
|
193
193
|
};
|
|
194
194
|
const darkBorderColor = {
|
|
195
195
|
'dark-static': colors.base.white[5],
|
|
196
196
|
'dark-interactive': colors.base.white[15],
|
|
197
197
|
'dark-hover': colors.periwinkle[3][25],
|
|
198
198
|
'dark-focus': colors.periwinkle[4].default,
|
|
199
|
-
'dark-danger': colors.red[4].default
|
|
199
|
+
'dark-danger': colors.red[4].default
|
|
200
200
|
};
|
|
201
201
|
const darkSurfaceColor = {
|
|
202
202
|
'dark-primary': colors.gray[6],
|
|
203
203
|
'dark-secondary': colors.base.midnight.default,
|
|
204
204
|
'dark-base': colors.base.midnight.default,
|
|
205
205
|
'dark-base-inverse': colors.base.snow,
|
|
206
|
-
'dark-overlay': '#090D1566'
|
|
206
|
+
'dark-overlay': '#090D1566' // TODO: MAP TO A COLOR
|
|
207
207
|
};
|
|
208
208
|
const darkBackgroundColor = {
|
|
209
209
|
...darkSurfaceColor,
|
|
@@ -232,20 +232,20 @@ const darkBackgroundColor = {
|
|
|
232
232
|
'dark-orange': colors.orange[4][10],
|
|
233
233
|
'dark-orange-hover': colors.orange[4][25],
|
|
234
234
|
'dark-sky': colors.sky[4][10],
|
|
235
|
-
'dark-sky-hover': colors.sky[4][25]
|
|
235
|
+
'dark-sky-hover': colors.sky[4][25]
|
|
236
236
|
};
|
|
237
237
|
export const borderColor = {
|
|
238
238
|
...lightBorderColor,
|
|
239
|
-
...darkBorderColor
|
|
239
|
+
...darkBorderColor
|
|
240
240
|
};
|
|
241
241
|
export const textColor = {
|
|
242
242
|
...lightTextColor,
|
|
243
243
|
...darkTextColor,
|
|
244
|
-
...lightIconColor
|
|
244
|
+
...lightIconColor
|
|
245
245
|
};
|
|
246
246
|
export const backgroundColor = {
|
|
247
247
|
...lightBackgroundColor,
|
|
248
|
-
...darkBackgroundColor
|
|
248
|
+
...darkBackgroundColor
|
|
249
249
|
};
|
|
250
250
|
export const boxShadow = {
|
|
251
251
|
field: `0px 8px 12px 0px ${colors.shadow[4]}`,
|
|
@@ -254,12 +254,12 @@ export const boxShadow = {
|
|
|
254
254
|
container: `0px 4px 17px 0px ${colors.shadow[2]}`,
|
|
255
255
|
panel: `0px 2px 8px 0px ${colors.shadow[8]}`,
|
|
256
256
|
outline: `0px 0px 0px 1px ${colors.periwinkle[5][25]}`,
|
|
257
|
-
focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}
|
|
257
|
+
focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
|
|
258
258
|
};
|
|
259
259
|
export const tokens = {
|
|
260
260
|
colors,
|
|
261
261
|
borderColor,
|
|
262
262
|
textColor,
|
|
263
263
|
backgroundColor,
|
|
264
|
-
boxShadow
|
|
264
|
+
boxShadow
|
|
265
265
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@reshape-biotech/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"public": false,
|
|
5
5
|
"scripts": {
|
|
6
6
|
"dev": "vite dev",
|
|
@@ -31,7 +31,10 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"peerDependencies": {
|
|
34
|
-
"svelte": "^5.0.0"
|
|
34
|
+
"svelte": "^5.0.0",
|
|
35
|
+
"flowbite": "^2.5.2",
|
|
36
|
+
"flowbite-svelte": "^0.47.3",
|
|
37
|
+
"postcss": "^8.4.49"
|
|
35
38
|
},
|
|
36
39
|
"devDependencies": {
|
|
37
40
|
"@eslint/compat": "^1.2.3",
|
|
@@ -39,6 +42,9 @@
|
|
|
39
42
|
"@sveltejs/kit": "^2.9.0",
|
|
40
43
|
"@sveltejs/package": "^2.0.0",
|
|
41
44
|
"@sveltejs/vite-plugin-svelte": "^5.0.0",
|
|
45
|
+
"@tailwindcss/container-queries": "^0.1.1",
|
|
46
|
+
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
|
|
47
|
+
"@tailwindcss/typography": "^0.5.15",
|
|
42
48
|
"eslint": "^9.7.0",
|
|
43
49
|
"eslint-config-prettier": "^9.1.0",
|
|
44
50
|
"eslint-plugin-svelte": "^2.36.0",
|
|
@@ -48,6 +54,7 @@
|
|
|
48
54
|
"publint": "^0.2.0",
|
|
49
55
|
"svelte": "^5.0.0",
|
|
50
56
|
"svelte-check": "^4.0.0",
|
|
57
|
+
"tailwindcss": "^3.4.17",
|
|
51
58
|
"typescript": "^5.0.0",
|
|
52
59
|
"typescript-eslint": "^8.0.0",
|
|
53
60
|
"vite": "^6.0.0"
|