@reshape-biotech/design-system 0.0.23 → 0.0.25

package/dist/tokens.js

@@ -1,278 +1,265 @@
 export const colors = {
-	base: {
-		mist: '#fbfbfb',
-		snow: '#f6f7f7',
-		white: {
-			default: '#FFFFFF',
-			5: '#FFFFFF0D',
-			10: '#FFFFFF1A',
-			15: '#FFFFFF26',
-			25: '#FFFFFF40',
-			50: '#FFFFFF80',
-			70: '#FFFFFFB3',
-			90: '#FFFFFFE6'
-		},
-		midnight: {
-			default: '#12192a',
-			5: '#12192a0d',
-			10: '#12192A1A',
-			15: '#12192A26',
-			25: '#12192A40',
-			50: '#12192A80',
-			70: '#12192AB3',
-			90: '#12192AE6'
-		}
-	},
-	gray: {
-		1: '#ecedee',
-		2: '#dbdddf',
-		3: '#c4c6ca',
-		4: '#888c94',
-		5: '#595e6a',
-		6: '#2A303F'
-	},
-	periwinkle: {
-		1: '#eeeefd',
-		2: '#cbc9fa',
-		3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440' },
-		4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140' },
-		5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40' },
-		6: '#4741c1'
-	},
-	orange: {
-		1: '#fff2e6',
-		2: '#ffd6b0',
-		3: '#ffa654',
-		4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
-		5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
-		6: '#cf6300'
-	},
-	sky: {
-		1: '#f3fafc',
-		2: '#D2F0F6',
-		3: '#89D8E6',
-		4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
-		5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
-		6: '#3597a9'
-	},
-	blue: {
-		1: '#e8f4fe',
-		2: '#b8defd',
-		3: '#66b8fb',
-		4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
-		5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
-		6: '#146db6'
-	},
-	green: {
-		1: '#e7f7f1',
-		2: '#c4ebdc',
-		3: '#65cba4',
-		4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
-		5: { default: '#0aad6e', 10: '#0aad6e1A', 25: '#0aad6e40' },
-		6: '#088756'
-	},
-	yellow: {
-		1: '#fff8e9',
-		2: '#feeabb',
-		3: '#fed16c',
-		4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
-		5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
-		6: '#cc951e'
-	},
-	red: {
-		1: '#fdeded',
-		2: '#f9c6c6',
-		3: '#f28384',
-		4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
-		5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
-		6: '#bf393a'
-	},
-	shadow: {
-		2: 'rgba(18, 25, 42 0.02)',
-		4: 'rgba(18, 25, 42, 0.04)',
-		8: 'rgba(18, 25, 42, 0.08)',
-		12: 'rgba(18, 25, 42, 0.12)',
-		16: 'rgba(18, 25, 42, 0.16)'
-	}
+    base: {
+        mist: '#fbfbfb',
+        snow: '#f6f7f7',
+        white: {
+            default: '#FFFFFF',
+            5: '#FFFFFF0D',
+            10: '#FFFFFF1A',
+            15: '#FFFFFF26',
+            25: '#FFFFFF40',
+            50: '#FFFFFF80',
+            70: '#FFFFFFB3',
+            90: '#FFFFFFE6'
+        },
+        midnight: {
+            default: '#12192a',
+            5: '#12192a0d',
+            10: '#12192A1A',
+            15: '#12192A26',
+            25: '#12192A40',
+            50: '#12192A80',
+            70: '#12192AB3',
+            90: '#12192AE6'
+        }
+    },
+    gray: {
+        1: '#ecedee',
+        2: '#dbdddf',
+        3: '#c4c6ca',
+        4: '#888c94',
+        5: '#595e6a',
+        6: '#2A303F'
+    },
+    periwinkle: {
+        1: '#eeeefd',
+        2: '#cbc9fa',
+        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40' },
+        6: '#4741c1'
+    },
+    orange: {
+        1: '#fff2e6',
+        2: '#ffd6b0',
+        3: '#ffa654',
+        4: { default: '#ff9533', 10: '#ff95331A', 25: '#ff953340' },
+        5: { default: '#ff7a00', 10: '#ff7a001A', 25: '#ff7a0040' },
+        6: '#cf6300'
+    },
+    sky: {
+        1: '#f3fafc',
+        2: '#D2F0F6',
+        3: '#89D8E6',
+        4: { default: '#65CCDF', 10: '#65CCDF1A', 25: '#65CCDF40' },
+        5: { default: '#43C1D8', 10: '#43C1D81A', 25: '#43C1D840' },
+        6: '#3597a9'
+    },
+    blue: {
+        1: '#e8f4fe',
+        2: '#b8defd',
+        3: '#66b8fb',
+        4: { default: '#49aafa', 10: '#49aafa1A', 25: '#49aafa40' },
+        5: { default: '#1b95f9', 10: '#1b95f91A', 25: '#1b95f940' },
+        6: '#146db6'
+    },
+    green: {
+        1: '#e7f7f1',
+        2: '#c4ebdc',
+        3: '#65cba4',
+        4: { default: '#36bc88', 10: '#36bc881A', 25: '#36bc8840' },
+        5: { default: '#0aad6e', 5: '#0aad6e0D', 10: '#0aad6e1A', 25: '#0aad6e40' },
+        6: '#088756'
+    },
+    yellow: {
+        1: '#fff8e9',
+        2: '#feeabb',
+        3: '#fed16c',
+        4: { default: '#fdc850', 10: '#fdc8501A', 25: '#fdc85040' },
+        5: { default: '#f1b123', 10: '#f1b1231A', 25: '#f1b12340' },
+        6: '#cc951e'
+    },
+    red: {
+        1: '#fdeded',
+        2: '#f9c6c6',
+        3: '#f28384',
+        4: { default: '#ef6b6c', 10: '#ef6b6c1A', 25: '#ef6b6c40' },
+        5: { default: '#eb4647', 10: '#eb46471A', 25: '#eb464740' },
+        6: '#bf393a'
+    },
+    shadow: {
+        2: 'rgba(18, 25, 42 0.02)',
+        4: 'rgba(18, 25, 42, 0.04)',
+        8: 'rgba(18, 25, 42, 0.08)',
+        12: 'rgba(18, 25, 42, 0.12)',
+        16: 'rgba(18, 25, 42, 0.16)'
+    }
 };
-
 const lightTextColor = {
-	primary: colors.base.midnight.default,
-	secondary: colors.gray[5],
-	tertiary: colors.gray[4],
-	'primary-inverse': colors.base.white.default,
-	'secondary-inverse': colors.base.white[70],
-	'tertiary-inverse': colors.base.white[50],
-	accent: colors.periwinkle[6],
-	success: colors.green[6],
-	warning: colors.yellow[6],
-	danger: colors.red[6]
+    primary: colors.base.midnight.default,
+    secondary: colors.gray[5],
+    tertiary: colors.gray[4],
+    'primary-inverse': colors.base.white.default,
+    'secondary-inverse': colors.base.white[70],
+    'tertiary-inverse': colors.base.white[50],
+    accent: colors.periwinkle[6],
+    success: colors.green[6],
+    warning: colors.yellow[6],
+    danger: colors.red[6]
 };
-
 const lightIconColor = {
-	'icon-primary': colors.base.midnight.default,
-	'icon-secondary': colors.gray[5],
-	'icon-tertiary': colors.gray[4],
-	'icon-primary-inverse': colors.base.white.default,
-	'icon-accent': colors.periwinkle[5].default,
-	'icon-success': colors.green[5].default,
-	'icon-warning': colors.yellow[5].default,
-	'icon-danger': colors.red[5].default,
-	'icon-blue': colors.blue[5].default,
-	'icon-orange': colors.orange[5].default,
-	'icon-sky': colors.sky[5].default
+    'icon-primary': colors.base.midnight.default,
+    'icon-secondary': colors.gray[5],
+    'icon-tertiary': colors.gray[4],
+    'icon-primary-inverse': colors.base.white.default,
+    'icon-accent': colors.periwinkle[5].default,
+    'icon-success': colors.green[5].default,
+    'icon-warning': colors.yellow[5].default,
+    'icon-danger': colors.red[5].default,
+    'icon-blue': colors.blue[5].default,
+    'icon-orange': colors.orange[5].default,
+    'icon-sky': colors.sky[5].default
 };
-
 const lightBorderColor = {
-	static: colors.base.midnight[5],
-	interactive: colors.base.midnight[15],
-	hover: colors.periwinkle[5][25],
-	focus: colors.periwinkle[5].default,
-	danger: colors.red[5].default
+    static: colors.base.midnight[5],
+    interactive: colors.base.midnight[15],
+    hover: colors.periwinkle[5][25],
+    focus: colors.periwinkle[5].default,
+    danger: colors.red[5].default
 };
-
 const lightBackgroundColor = {
-	surface: colors.base.white.default,
-	'surface-secondary': colors.base.snow,
-	base: colors.sky[1],
-	'base-inverse': colors.gray[6],
-	overlay: '#090D1566', // TODO: MAP TO A COLOR
-	neutral: colors.base.midnight[5],
-	'neutral-hover': colors.base.midnight[10],
-	'neutral-darker': colors.base.midnight[15],
-	'neutral-darker-hover': colors.base.midnight[25],
-	'neutral-inverse': colors.base.white[5],
-	'neutral-inverse-hover': colors.base.white[15],
-	accent: colors.periwinkle[5][10],
-	'accent-hover': colors.periwinkle[5][25],
-	'accent-inverse': colors.periwinkle[5].default,
-	'accent-inverse-hover': colors.periwinkle[6],
-	success: colors.green[5][10],
-	'success-hover': colors.green[5][25],
-	'success-inverse': colors.green[5].default,
-	'success-inverse-hover': colors.green[6],
-	warning: colors.yellow[5][10],
-	'warning-hover': colors.yellow[5][25],
-	'warning-inverse': colors.yellow[5].default,
-	'warning-inverse-hover': colors.yellow[6],
-	danger: colors.red[5][10],
-	'danger-hover': colors.red[5][25],
-	'danger-inverse': colors.red[5].default,
-	'danger-inverse-hover': colors.red[6],
-	blue: colors.blue[5][10],
-	'blue-hover': colors.blue[5][25],
-	orange: colors.orange[5][10],
-	'orange-hover': colors.orange[5][25],
-	'orange-inverse': colors.orange[5].default,
-	'orange-inverse-hover': colors.orange[6],
-	sky: colors.sky[5][10],
-	'sky-hover': colors.sky[5][25],
-	'sky-inverse': colors.sky[5].default,
-	'sky-inverse-hover': colors.sky[6]
+    surface: colors.base.white.default,
+    'surface-secondary': colors.base.snow,
+    base: colors.sky[1],
+    'base-inverse': colors.gray[6],
+    overlay: '#090D1566', // TODO: MAP TO A COLOR
+    neutral: colors.base.midnight[5],
+    'neutral-hover': colors.base.midnight[10],
+    'neutral-darker': colors.base.midnight[15],
+    'neutral-darker-hover': colors.base.midnight[25],
+    'neutral-inverse': colors.base.white[5],
+    'neutral-inverse-hover': colors.base.white[15],
+    accent: colors.periwinkle[5][10],
+    'accent-hover': colors.periwinkle[5][25],
+    'accent-inverse': colors.periwinkle[5].default,
+    'accent-inverse-hover': colors.periwinkle[6],
+    success: colors.green[5][10],
+    'success-hover': colors.green[5][25],
+    'success-inverse': colors.green[5].default,
+    'success-inverse-hover': colors.green[6],
+    warning: colors.yellow[5][10],
+    'warning-hover': colors.yellow[5][25],
+    'warning-inverse': colors.yellow[5].default,
+    'warning-inverse-hover': colors.yellow[6],
+    danger: colors.red[5][10],
+    'danger-hover': colors.red[5][25],
+    'danger-inverse': colors.red[5].default,
+    'danger-inverse-hover': colors.red[6],
+    blue: colors.blue[5][10],
+    'blue-hover': colors.blue[5][25],
+    orange: colors.orange[5][10],
+    'orange-hover': colors.orange[5][25],
+    'orange-inverse': colors.orange[5].default,
+    'orange-inverse-hover': colors.orange[6],
+    sky: colors.sky[5][10],
+    'sky-hover': colors.sky[5][25],
+    'sky-inverse': colors.sky[5].default,
+    'sky-inverse-hover': colors.sky[6]
 };
-
 const darkTextColor = {
-	'dark-primary': colors.base.white.default,
-	'dark-secondary': colors.gray[3],
-	'dark-tertiary': colors.gray[4],
-	'dark-primary-inverse': colors.base.midnight.default,
-	'dark-secondary-inverse': colors.base.midnight[70],
-	'dark-tertiary-inverse': colors.base.midnight[50],
-	'dark-accent': colors.periwinkle[3].default,
-	'dark-success': colors.green[3],
-	'dark-warning': colors.yellow[3],
-	'dark-danger': colors.red[3]
+    'dark-primary': colors.base.white.default,
+    'dark-secondary': colors.gray[3],
+    'dark-tertiary': colors.gray[4],
+    'dark-primary-inverse': colors.base.midnight.default,
+    'dark-secondary-inverse': colors.base.midnight[70],
+    'dark-tertiary-inverse': colors.base.midnight[50],
+    'dark-accent': colors.periwinkle[3].default,
+    'dark-success': colors.green[3],
+    'dark-warning': colors.yellow[3],
+    'dark-danger': colors.red[3]
 };
-
 const darkIconColor = {
-	'dark-primary': colors.base.white.default,
-	'dark-secondary': colors.gray[3],
-	'dark-tertiary': colors.gray[4],
-	'dark-primary-inverse': colors.base.midnight.default,
-	'dark-accent': colors.periwinkle[4].default,
-	'dark-success': colors.green[4].default,
-	'dark-warning': colors.yellow[4].default,
-	'dark-danger': colors.red[4].default,
-	'dark-blue': colors.blue[4].default,
-	'dark-orange': colors.orange[4].default,
-	'dark-sky': colors.sky[4].default
+    'dark-primary': colors.base.white.default,
+    'dark-secondary': colors.gray[3],
+    'dark-tertiary': colors.gray[4],
+    'dark-primary-inverse': colors.base.midnight.default,
+    'dark-accent': colors.periwinkle[4].default,
+    'dark-success': colors.green[4].default,
+    'dark-warning': colors.yellow[4].default,
+    'dark-danger': colors.red[4].default,
+    'dark-blue': colors.blue[4].default,
+    'dark-orange': colors.orange[4].default,
+    'dark-sky': colors.sky[4].default
 };
-
 const darkBorderColor = {
-	'dark-static': colors.base.white[5],
-	'dark-interactive': colors.base.white[15],
-	'dark-hover': colors.periwinkle[3][25],
-	'dark-focus': colors.periwinkle[4].default,
-	'dark-danger': colors.red[4].default
+    'dark-static': colors.base.white[5],
+    'dark-interactive': colors.base.white[15],
+    'dark-hover': colors.periwinkle[3][25],
+    'dark-focus': colors.periwinkle[4].default,
+    'dark-danger': colors.red[4].default
 };
-
 const darkSurfaceColor = {
-	'dark-primary': colors.gray[6],
-	'dark-secondary': colors.base.midnight.default,
-	'dark-base': colors.base.midnight.default,
-	'dark-base-inverse': colors.base.snow,
-	'dark-overlay': '#090D1566' // TODO: MAP TO A COLOR
+    'dark-primary': colors.gray[6],
+    'dark-secondary': colors.base.midnight.default,
+    'dark-base': colors.base.midnight.default,
+    'dark-base-inverse': colors.base.snow,
+    'dark-overlay': '#090D1566' // TODO: MAP TO A COLOR
 };
 const darkBackgroundColor = {
-	...darkSurfaceColor,
-	'dark-neutral': colors.base.white[5],
-	'dark-neutral-hover': colors.base.white[15],
-	'dark-neutral-darker': colors.base.white[15],
-	'dark-neutral-darker-hover': colors.base.white[25],
-	'dark-accent': colors.periwinkle[3][10],
-	'dark-accent-hover': colors.periwinkle[3][25],
-	'dark-accent-inverse': colors.periwinkle[4].default,
-	'dark-accent-inverse-hover': colors.periwinkle[5].default,
-	'dark-success': colors.green[4][10],
-	'dark-success-hover': colors.green[4][25],
-	'dark-success-inverse': colors.green[4].default,
-	'dark-success-inverse-hover': colors.green[5].default,
-	'dark-warning': colors.yellow[4][10],
-	'dark-warning-hover': colors.yellow[4][25],
-	'dark-warning-inverse': colors.yellow[4].default,
-	'dark-warning-inverse-hover': colors.yellow[5].default,
-	'dark-danger': colors.red[4][10],
-	'dark-danger-hover': colors.red[4][25],
-	'dark-danger-inverse': colors.red[4].default,
-	'dark-danger-inverse-hover': colors.red[5].default,
-	'dark-blue': colors.blue[4][10],
-	'dark-blue-hover': colors.blue[4][25],
-	'dark-orange': colors.orange[4][10],
-	'dark-orange-hover': colors.orange[4][25],
-	'dark-sky': colors.sky[4][10],
-	'dark-sky-hover': colors.sky[4][25]
+    ...darkSurfaceColor,
+    'dark-neutral': colors.base.white[5],
+    'dark-neutral-hover': colors.base.white[15],
+    'dark-neutral-darker': colors.base.white[15],
+    'dark-neutral-darker-hover': colors.base.white[25],
+    'dark-accent': colors.periwinkle[3][10],
+    'dark-accent-hover': colors.periwinkle[3][25],
+    'dark-accent-inverse': colors.periwinkle[4].default,
+    'dark-accent-inverse-hover': colors.periwinkle[5].default,
+    'dark-success': colors.green[4][10],
+    'dark-success-hover': colors.green[4][25],
+    'dark-success-inverse': colors.green[4].default,
+    'dark-success-inverse-hover': colors.green[5].default,
+    'dark-warning': colors.yellow[4][10],
+    'dark-warning-hover': colors.yellow[4][25],
+    'dark-warning-inverse': colors.yellow[4].default,
+    'dark-warning-inverse-hover': colors.yellow[5].default,
+    'dark-danger': colors.red[4][10],
+    'dark-danger-hover': colors.red[4][25],
+    'dark-danger-inverse': colors.red[4].default,
+    'dark-danger-inverse-hover': colors.red[5].default,
+    'dark-blue': colors.blue[4][10],
+    'dark-blue-hover': colors.blue[4][25],
+    'dark-orange': colors.orange[4][10],
+    'dark-orange-hover': colors.orange[4][25],
+    'dark-sky': colors.sky[4][10],
+    'dark-sky-hover': colors.sky[4][25]
 };
-
 export const borderColor = {
-	...lightBorderColor,
-	...darkBorderColor
+    ...lightBorderColor,
+    ...darkBorderColor
 };
-
 export const textColor = {
-	...lightTextColor,
-	...darkTextColor,
-	...lightIconColor
+    ...lightTextColor,
+    ...darkTextColor,
+    ...lightIconColor
 };
-
 export const backgroundColor = {
-	...lightBackgroundColor,
-	...darkBackgroundColor
+    ...lightBackgroundColor,
+    ...darkBackgroundColor
 };
-
 export const boxShadow = {
-	field: `0px 8px 12px 0px ${colors.shadow[4]}`,
-	nav: `0px 0px 24px 0px ${colors.shadow[12]}`,
-	calendar: `0px 16px 24px 0px ${colors.shadow[16]}`,
-	container: `0px 4px 17px 0px ${colors.shadow[2]}`,
-	panel: `0px 2px 8px 0px ${colors.shadow[8]}`,
-	outline: `0px 0px 0px 1px ${colors.periwinkle[5][25]}`,
-	focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
+    field: `0px 8px 12px 0px ${colors.shadow[4]}`,
+    nav: `0px 0px 24px 0px ${colors.shadow[12]}`,
+    calendar: `0px 16px 24px 0px ${colors.shadow[16]}`,
+    container: `0px 4px 17px 0px ${colors.shadow[2]}`,
+    panel: `0px 2px 8px 0px ${colors.shadow[8]}`,
+    outline: `0px 0px 0px 1px ${colors.periwinkle[5][25]}`,
+    focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
 };
-
 export const tokens = {
-	colors,
-	borderColor,
-	textColor,
-	backgroundColor,
-	boxShadow
+    colors,
+    borderColor,
+    textColor,
+    backgroundColor,
+    boxShadow
 };

package/dist/types/fonts.d.ts

@@ -0,0 +1,4 @@
+declare module '*.woff2' {
+	const content: string;
+	export default content;
+}

package/package.json

@@ -1,20 +1,13 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.23",
+	"version": "0.0.25",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --write .",
-		"lint": "prettier --check . && eslint .",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build",
-		"test:unit": "vitest",
-		"test": "npm run test:unit -- --run"
+		"package": "svelte-package --input ./src/lib --output ./dist",
+		"check": "svelte-check",
+		"test": "vitest run",
+		"test:watch": "vitest"
 	},
 	"files": [
 		"dist",
@@ -40,12 +33,12 @@
 		"./tailwind-safelist": "./dist/tailwind-safelist.js"
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"tailwindcss": "^3.4.9",
-		"daisyui": "^4.10.5"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
+		"@storybook/addon-svelte-csf": "^4.2.0",
+		"@storybook/svelte": "^8.4.7",
 		"@sveltejs/adapter-vercel": "^5.5.0",
 		"@sveltejs/kit": "^2.9.0",
 		"@sveltejs/package": "^2.0.0",
@@ -53,6 +46,7 @@
 		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
 		"@tailwindcss/typography": "^0.5.15",
+		"@testing-library/svelte": "^5.2.6",
 		"autoprefixer": "^10.4.20",
 		"daisyui": "^4.10.5",
 		"eslint": "^9.7.0",