@reshape-biotech/design-system 0.0.45 → 0.0.48

package/dist/index.d.ts

@@ -1,11 +1,16 @@
+export * from './components/activity/';
 export * from './components/avatar/';
 export * from './components/banner/';
 export * from './components/button/';
+export * as Collapsible from './components/collapsible/';
+export * as Combobox from './components/combobox/';
+export * from './components/graphs/';
 export * from './components/datepicker/';
 export * from './components/divider/';
 export * from './components/drawer/';
 export * from './components/drawer/';
 export * from './components/dropdown/';
+export * from './components/icons/';
 export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';

package/dist/index.js

@@ -1,12 +1,17 @@
 // Components
+export * from './components/activity/';
 export * from './components/avatar/';
 export * from './components/banner/';
 export * from './components/button/';
+export * as Collapsible from './components/collapsible/';
+export * as Combobox from './components/combobox/';
+export * from './components/graphs/';
 export * from './components/datepicker/';
 export * from './components/divider/';
 export * from './components/drawer/';
 export * from './components/drawer/';
 export * from './components/dropdown/';
+export * from './components/icons/';
 export * from './components/icon-button/';
 export * from './components/image';
 export * from './components/input/';

package/dist/tailwind-safelist.js

@@ -81,7 +81,7 @@ export const borders = [
 export const shadows = [
 	'shadow',
 	'shadow-none',
-	'shadow-field',
+	'shadow-menu',
 	'shadow-nav',
 	'shadow-calendar',
 	'shadow-container',

package/dist/tailwind.preset.d.ts

@@ -20,6 +20,7 @@ declare const config: {
                     midnight: {
                         default: string;
                         5: string;
+                        8: string;
                         10: string;
                         15: string;
                         25: string;
@@ -43,16 +44,19 @@ declare const config: {
                         default: string;
                         10: string;
                         25: string;
+                        50: string;
                     };
                     4: {
                         default: string;
                         10: string;
                         25: string;
+                        50: string;
                     };
                     5: {
                         default: string;
                         10: string;
                         25: string;
+                        50: string;
                     };
                     6: string;
                 };
@@ -156,6 +160,7 @@ declare const config: {
                 shadow: {
                     2: string;
                     4: string;
+                    6: string;
                     8: string;
                     12: string;
                     16: string;
@@ -233,6 +238,7 @@ declare const config: {
             };
             borderColor: {
                 'dark-static': string;
+                'dark-input': string;
                 'dark-interactive': string;
                 'dark-hover': string;
                 'dark-focus': string;
@@ -249,6 +255,7 @@ declare const config: {
                 'icon-secondary': string;
                 'icon-tertiary': string;
                 'icon-primary-inverse': string;
+                'icon-secondary-inverse': string;
                 'icon-accent': string;
                 'icon-success': string;
                 'icon-warning': string;
@@ -279,12 +286,19 @@ declare const config: {
             };
             boxShadow: {
                 input: string;
-                field: string;
-                nav: string;
-                calendar: string;
                 container: string;
-                panel: string;
-                outline: string;
+                menu: string;
+            };
+            outlineColor: {
+                'dark-static': string;
+                'dark-input': string;
+                'dark-interactive': string;
+                'dark-hover': string;
+                'dark-focus': string;
+                static: string;
+                input: string;
+                interactive: string;
+                hover: string;
                 focus: string;
             };
             fontFamily: {
@@ -301,7 +315,6 @@ declare const config: {
         config?: Partial<import("tailwindcss/types/config.js").Config> | undefined;
     })[];
     daisyui: {
-        base: boolean;
         styled: boolean;
         logs: boolean;
         themes: {

package/dist/tailwind.preset.js

@@ -1,7 +1,7 @@
 import daisyui from 'daisyui';
 import typography from '@tailwindcss/typography';
 import containerQueries from '@tailwindcss/container-queries';
-import { backgroundColor, borderColor, boxShadow, colors, textColor } from './tokens.js';
+import { backgroundColor, borderColor, boxShadow, colors, textColor, outlineColor } from './tokens.js';
 const config = {
     safelist: ['tailwind-safelist.txt'],
     theme: {
@@ -11,9 +11,10 @@ const config = {
             borderColor,
             textColor,
             boxShadow,
+            outlineColor,
             fontFamily: {
                 mono: ['"MD System Mono"', 'sans-serif'],
-                sans: ['"MD System"', 'sans-serif']
+                sans: ['"af Another Sans"', 'sans-serif']
             },
             fontSize: {
                 xxs: '10px'
@@ -22,7 +23,7 @@ const config = {
     },
     plugins: [daisyui, typography, containerQueries],
     daisyui: {
-        base: true,
+        // base: true,
         styled: true,
         logs: false,
         themes: [
@@ -36,7 +37,7 @@ const config = {
                     'accent-content': textColor.primary,
                     neutral: backgroundColor.neutral,
                     'neutral-content': textColor.primary,
-                    'base-100': backgroundColor['base'],
+                    'base-100': backgroundColor['surface'],
                     info: backgroundColor.sky,
                     'info-content': textColor.primary,
                     success: backgroundColor.success,

package/dist/tokens.d.ts

@@ -15,6 +15,7 @@ export declare const colors: {
         midnight: {
             default: string;
             5: string;
+            8: string;
             10: string;
             15: string;
             25: string;
@@ -38,16 +39,19 @@ export declare const colors: {
             default: string;
             10: string;
             25: string;
+            50: string;
         };
         4: {
             default: string;
             10: string;
             25: string;
+            50: string;
         };
         5: {
             default: string;
             10: string;
             25: string;
+            50: string;
         };
         6: string;
     };
@@ -151,6 +155,7 @@ export declare const colors: {
     shadow: {
         2: string;
         4: string;
+        6: string;
         8: string;
         12: string;
         16: string;
@@ -158,6 +163,7 @@ export declare const colors: {
 };
 export declare const borderColor: {
     'dark-static': string;
+    'dark-input': string;
     'dark-interactive': string;
     'dark-hover': string;
     'dark-focus': string;
@@ -174,6 +180,7 @@ export declare const textColor: {
     'icon-secondary': string;
     'icon-tertiary': string;
     'icon-primary-inverse': string;
+    'icon-secondary-inverse': string;
     'icon-accent': string;
     'icon-success': string;
     'icon-warning': string;
@@ -272,15 +279,22 @@ export declare const backgroundColor: {
     'sky-inverse': string;
     'sky-inverse-hover': string;
 };
+export declare const outlineColor: {
+    'dark-static': string;
+    'dark-input': string;
+    'dark-interactive': string;
+    'dark-hover': string;
+    'dark-focus': string;
+    static: string;
+    input: string;
+    interactive: string;
+    hover: string;
+    focus: string;
+};
 export declare const boxShadow: {
     input: string;
-    field: string;
-    nav: string;
-    calendar: string;
     container: string;
-    panel: string;
-    outline: string;
-    focus: string;
+    menu: string;
 };
 export declare const tokens: {
     colors: {
@@ -300,6 +314,7 @@ export declare const tokens: {
             midnight: {
                 default: string;
                 5: string;
+                8: string;
                 10: string;
                 15: string;
                 25: string;
@@ -323,16 +338,19 @@ export declare const tokens: {
                 default: string;
                 10: string;
                 25: string;
+                50: string;
             };
             4: {
                 default: string;
                 10: string;
                 25: string;
+                50: string;
             };
             5: {
                 default: string;
                 10: string;
                 25: string;
+                50: string;
             };
             6: string;
         };
@@ -436,6 +454,7 @@ export declare const tokens: {
         shadow: {
             2: string;
             4: string;
+            6: string;
             8: string;
             12: string;
             16: string;
@@ -443,6 +462,7 @@ export declare const tokens: {
     };
     borderColor: {
         'dark-static': string;
+        'dark-input': string;
         'dark-interactive': string;
         'dark-hover': string;
         'dark-focus': string;
@@ -459,6 +479,7 @@ export declare const tokens: {
         'icon-secondary': string;
         'icon-tertiary': string;
         'icon-primary-inverse': string;
+        'icon-secondary-inverse': string;
         'icon-accent': string;
         'icon-success': string;
         'icon-warning': string;
@@ -559,12 +580,19 @@ export declare const tokens: {
     };
     boxShadow: {
         input: string;
-        field: string;
-        nav: string;
-        calendar: string;
         container: string;
-        panel: string;
-        outline: string;
+        menu: string;
+    };
+    outlineColor: {
+        'dark-static': string;
+        'dark-input': string;
+        'dark-interactive': string;
+        'dark-hover': string;
+        'dark-focus': string;
+        static: string;
+        input: string;
+        interactive: string;
+        hover: string;
         focus: string;
     };
 };

package/dist/tokens.js

@@ -15,6 +15,7 @@ export const colors = {
         midnight: {
             default: '#12192a',
             5: '#12192a0d',
+            8: '#12192a14',
             10: '#12192A1A',
             15: '#12192A26',
             25: '#12192A40',
@@ -34,9 +35,9 @@ export const colors = {
     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' },
+        3: { default: '#8e8af4', 10: '#8e8af41A', 25: '#8e8af440', 50: '#8e8af480' },
+        4: { default: '#7973f1', 10: '#7973f11A', 25: '#7973f140', 50: '#7973f180' },
+        5: { default: '#5750ee', 10: '#5750ee1A', 25: '#5750ee40', 50: '#5750ee80' },
         6: '#4741c1'
     },
     orange: {
@@ -88,8 +89,9 @@ export const colors = {
         6: '#bf393a'
     },
     shadow: {
-        2: 'rgba(18, 25, 42 0.02)',
+        2: 'rgba(18, 25, 42, 0.02)',
         4: 'rgba(18, 25, 42, 0.04)',
+        6: 'rgba(18, 25, 42, 0.06)',
         8: 'rgba(18, 25, 42, 0.08)',
         12: 'rgba(18, 25, 42, 0.12)',
         16: 'rgba(18, 25, 42, 0.16)'
@@ -112,6 +114,7 @@ const lightIconColor = {
     'icon-secondary': colors.gray[5],
     'icon-tertiary': colors.gray[4],
     'icon-primary-inverse': colors.base.white.default,
+    'icon-secondary-inverse': colors.base.white[70],
     'icon-accent': colors.periwinkle[5].default,
     'icon-success': colors.green[5].default,
     'icon-warning': colors.yellow[5].default,
@@ -121,17 +124,24 @@ const lightIconColor = {
     'icon-sky': colors.sky[5].default
 };
 const lightBorderColor = {
-    static: colors.base.midnight[5],
+    static: colors.base.midnight[8],
     input: colors.base.midnight[10],
     interactive: colors.base.midnight[15],
     hover: colors.periwinkle[5][25],
     focus: colors.periwinkle[5].default,
     danger: colors.red[5].default
 };
+const lightOutlineColor = {
+    static: colors.base.midnight[8],
+    input: colors.base.midnight[10],
+    interactive: colors.base.midnight[15],
+    hover: colors.periwinkle[5][50],
+    focus: colors.periwinkle[5].default
+};
 const lightBackgroundColor = {
     surface: colors.base.white.default,
     'surface-secondary': colors.base.snow,
-    base: colors.sky[1],
+    base: colors.base.mist,
     'base-inverse': colors.gray[6],
     overlay: '#090D1566', // TODO: MAP TO A COLOR
     neutral: colors.base.midnight[5],
@@ -193,12 +203,20 @@ const darkIconColor = {
     'dark-sky': colors.sky[4].default
 };
 const darkBorderColor = {
-    'dark-static': colors.base.white[5],
+    'dark-static': colors.base.white[10],
+    'dark-input': colors.base.white[10],
     '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 darkOutlineColor = {
+    'dark-static': colors.base.white[10],
+    'dark-input': colors.base.white[10],
+    'dark-interactive': colors.base.white[15],
+    'dark-hover': colors.periwinkle[3][50],
+    'dark-focus': colors.periwinkle[3].default
+};
 const darkSurfaceColor = {
     'dark-primary': colors.gray[6],
     'dark-secondary': colors.base.midnight.default,
@@ -248,20 +266,20 @@ export const backgroundColor = {
     ...lightBackgroundColor,
     ...darkBackgroundColor
 };
+export const outlineColor = {
+    ...lightOutlineColor,
+    ...darkOutlineColor
+};
 export const boxShadow = {
-    input: `0px 1px 4px 0px ${colors.shadow[4]}`,
-    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}`
+    input: `0 1px 4px 0 ${colors.shadow[4]}`,
+    container: `0 2px 16px 0 ${colors.shadow[2]}`,
+    menu: `0 4px 20px 0 ${colors.shadow[6]}, 0 0 0 0.5px ${colors.shadow[8]}`
 };
 export const tokens = {
     colors,
     borderColor,
     textColor,
     backgroundColor,
-    boxShadow
+    boxShadow,
+    outlineColor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.45",
+	"version": "0.0.48",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -40,37 +40,40 @@
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
-		"@sveltejs/adapter-vercel": "^5.5.0",
-		"@sveltejs/kit": "^2.9.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"@sveltejs/adapter-vercel": "^5.6.2",
+		"@sveltejs/kit": "^2.17.2",
+		"@sveltejs/package": "^2.3.10",
+		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@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",
+		"echarts": "^5.6.0",
 		"eslint": "^9.7.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.36.0",
+		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^15.0.0",
 		"luxon": "^3.5.0",
+		"marked": "^15.0.0",
 		"phosphor-svelte": "^3.0.1",
-		"postcss": "^8.4.49",
-		"prettier": "^3.3.2",
+		"postcss": "^8.5.3",
+		"prettier": "^3.5.1",
 		"prettier-plugin-svelte": "^3.2.6",
 		"prettier-plugin-tailwindcss": "^0.6.5",
-		"publint": "^0.2.0",
-		"svelte": "^5.0.0",
+		"publint": "^0.3.0",
+		"svelte": "^5.20.2",
 		"svelte-check": "^4.0.0",
 		"svelte-select": "^5.8.1",
 		"tailwindcss": "^3.4.9",
 		"tailwindest": "^2.3.0",
-		"typescript": "^5.0.0",
+		"typescript": "^5.7.3",
 		"typescript-eslint": "^8.0.0",
-		"vite": "^5.4.4",
-		"vitest": "^2.1.4",
-		"marked": "^15.0.0"
+		"vite": "^6.1.1",
+		"vitest": "^3.0.6"
 	},
-	"dependencies": {}
+	"dependencies": {
+		"bits-ui": "^1.3.2"
+	}
 }