@reshape-biotech/design-system 0.0.14 → 0.0.16

package/dist/app.css

@@ -0,0 +1,103 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+@layer base {
+	@font-face {
+		font-family: 'MD System Mono';
+		font-style: normal;
+		font-weight: 400;
+		src: url('/fonts/MDSystemMono-Regular.woff2') format('woff2');
+	}
+	@font-face {
+		font-family: 'MD System';
+		font-style: normal;
+		font-weight: 400;
+		src: url('/fonts/MDSystem-Regular.woff2') format('woff2');
+	}
+	@font-face {
+		font-family: 'MD System';
+		src: url('/fonts/MDSystem-Medium.woff2') format('woff2');
+		font-weight: 500;
+		font-style: normal;
+	}
+	@font-face {
+		font-family: 'MD System';
+		font-style: normal;
+		font-weight: 600;
+		src: url('/fonts/MDSystem-Semibold.woff2') format('woff2');
+	}
+	body {
+		background-color: theme('backgroundColor.base');
+		color: theme('textColor.primary');
+		font-family: 'MD System', sans-serif;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 140%;
+		font-size: 16px;
+	}
+
+	a {
+		color: theme('textColor.accent');
+		font-family: 'MD System', sans-serif;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 140%; /* 19.6px */
+	}
+	a:hover {
+		text-decoration: underline;
+	}
+
+	h1 {
+		font-size: 80px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 100%; /* 80px */
+		letter-spacing: -1.6px;
+	}
+
+	h2 {
+		font-size: 48px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 130%; /* 62.4px */
+		letter-spacing: -0.96px;
+	}
+
+	h3 {
+		font-size: 28px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 130%; /* 36.4px */
+		letter-spacing: -0.56px;
+	}
+
+	h4 {
+		font-size: 20px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 130%; /* 26px */
+		letter-spacing: -0.4px;
+	}
+
+	h5 {
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 130%; /* 20.8px */
+	}
+
+	h6 {
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 130%; /* 18.2px */
+	}
+}
+
+@layer components {
+	html:has(.drawer-auto-gutter .drawer-toggle:checked) {
+		scrollbar-gutter: auto;
+	}
+}

package/dist/components/tooltip/Tooltip.stories.svelte

@@ -4,7 +4,7 @@
 	import { defineMeta } from '@storybook/addon-svelte-csf';
 	const { Story } = defineMeta({
 		component: Tooltip,
-		title: 'Design System/Tooltip',
+		title: 'Something/Tooltip',
 		tags: ['autodocs']
 	});
 </script>

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Avatar } from './components/avatar/Avatar.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
 export { tokens } from './tokens.js';
+import './app.css';

package/dist/index.js

@@ -2,3 +2,4 @@
 export { default as Avatar } from './components/avatar/Avatar.svelte';
 export { default as Tooltip } from './components/tooltip/Tooltip.svelte';
 export { tokens } from './tokens.js';
+import './app.css';

package/dist/tokens.d.ts

@@ -280,190 +280,285 @@ export declare const boxShadow: {
     focus: string;
 };
 export declare const tokens: {
-    field: string;
-    nav: string;
-    calendar: string;
-    container: string;
-    panel: string;
-    outline: string;
-    focus: string;
-    'dark-neutral': string;
-    'dark-neutral-hover': string;
-    'dark-neutral-darker': string;
-    'dark-neutral-darker-hover': string;
-    'dark-accent': string;
-    'dark-accent-hover': string;
-    'dark-accent-inverse': string;
-    'dark-accent-inverse-hover': string;
-    'dark-success': string;
-    'dark-success-hover': string;
-    'dark-success-inverse': string;
-    'dark-success-inverse-hover': string;
-    'dark-warning': string;
-    'dark-warning-hover': string;
-    'dark-warning-inverse': string;
-    'dark-warning-inverse-hover': string;
-    'dark-danger': string;
-    'dark-danger-hover': string;
-    'dark-danger-inverse': string;
-    'dark-danger-inverse-hover': string;
-    'dark-blue': string;
-    'dark-blue-hover': string;
-    'dark-orange': string;
-    'dark-orange-hover': string;
-    'dark-sky': string;
-    'dark-sky-hover': string;
-    'dark-primary': string;
-    'dark-secondary': string;
-    'dark-base': string;
-    'dark-base-inverse': string;
-    'dark-overlay': string;
-    surface: string;
-    'surface-secondary': string;
-    base: string;
-    'base-inverse': string;
-    overlay: string;
-    neutral: string;
-    'neutral-hover': string;
-    'neutral-darker': string;
-    'neutral-darker-hover': string;
-    'neutral-inverse': string;
-    'neutral-inverse-hover': string;
-    accent: string;
-    'accent-hover': string;
-    'accent-inverse': string;
-    'accent-inverse-hover': string;
-    success: string;
-    'success-hover': string;
-    'success-inverse': string;
-    'success-inverse-hover': string;
-    warning: string;
-    'warning-hover': string;
-    'warning-inverse': string;
-    'warning-inverse-hover': string;
-    danger: string;
-    'danger-hover': string;
-    'danger-inverse': string;
-    'danger-inverse-hover': string;
-    blue: string;
-    'blue-hover': string;
-    orange: string;
-    'orange-hover': string;
-    'orange-inverse': string;
-    'orange-inverse-hover': string;
-    sky: string;
-    'sky-hover': string;
-    'sky-inverse': string;
-    'sky-inverse-hover': string;
-    'icon-primary': string;
-    'icon-secondary': string;
-    'icon-tertiary': string;
-    'icon-primary-inverse': string;
-    'icon-accent': string;
-    'icon-success': string;
-    'icon-warning': string;
-    'icon-danger': string;
-    'icon-blue': string;
-    'icon-orange': string;
-    'icon-sky': string;
-    'dark-tertiary': string;
-    'dark-primary-inverse': string;
-    'dark-secondary-inverse': string;
-    'dark-tertiary-inverse': string;
-    primary: string;
-    secondary: string;
-    tertiary: string;
-    'primary-inverse': string;
-    'secondary-inverse': string;
-    'tertiary-inverse': string;
-    'dark-static': string;
-    'dark-interactive': string;
-    'dark-hover': string;
-    'dark-focus': string;
-    static: string;
-    interactive: string;
-    hover: string;
-    gray: {
-        1: string;
-        2: string;
-        3: string;
-        4: string;
-        5: string;
-        6: string;
-    };
-    periwinkle: {
-        1: string;
-        2: string;
-        3: {
-            default: string;
-            10: string;
-            25: string;
+    colors: {
+        base: {
+            mist: string;
+            snow: string;
+            white: {
+                default: string;
+                5: string;
+                10: string;
+                15: string;
+                25: string;
+                50: string;
+                70: string;
+                90: string;
+            };
+            midnight: {
+                default: string;
+                5: string;
+                10: string;
+                15: string;
+                25: string;
+                50: string;
+                70: string;
+                90: string;
+            };
         };
-        4: {
-            default: string;
-            10: string;
-            25: string;
+        gray: {
+            1: string;
+            2: string;
+            3: string;
+            4: string;
+            5: string;
+            6: string;
         };
-        5: {
-            default: string;
-            10: string;
-            25: string;
+        periwinkle: {
+            1: string;
+            2: string;
+            3: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        6: string;
-    };
-    green: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
+        orange: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        5: {
-            default: string;
-            10: string;
-            25: string;
+        sky: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        6: string;
-    };
-    yellow: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
+        blue: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        5: {
-            default: string;
-            10: string;
-            25: string;
+        green: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        6: string;
-    };
-    red: {
-        1: string;
-        2: string;
-        3: string;
-        4: {
-            default: string;
-            10: string;
-            25: string;
+        yellow: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
         };
-        5: {
-            default: string;
-            10: string;
-            25: string;
+        red: {
+            1: string;
+            2: string;
+            3: string;
+            4: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            5: {
+                default: string;
+                10: string;
+                25: string;
+            };
+            6: string;
+        };
+        shadow: {
+            2: string;
+            4: string;
+            8: string;
+            12: string;
+            16: string;
         };
-        6: string;
     };
-    shadow: {
-        2: string;
-        4: string;
-        8: string;
-        12: string;
-        16: string;
+    borderColor: {
+        'dark-static': string;
+        'dark-interactive': string;
+        'dark-hover': string;
+        'dark-focus': string;
+        'dark-danger': string;
+        static: string;
+        interactive: string;
+        hover: string;
+        focus: string;
+        danger: string;
+    };
+    textColor: {
+        'icon-primary': string;
+        'icon-secondary': string;
+        'icon-tertiary': string;
+        'icon-primary-inverse': string;
+        'icon-accent': string;
+        'icon-success': string;
+        'icon-warning': string;
+        'icon-danger': string;
+        'icon-blue': string;
+        'icon-orange': string;
+        'icon-sky': string;
+        'dark-primary': string;
+        'dark-secondary': string;
+        'dark-tertiary': string;
+        'dark-primary-inverse': string;
+        'dark-secondary-inverse': string;
+        'dark-tertiary-inverse': string;
+        'dark-accent': string;
+        'dark-success': string;
+        'dark-warning': string;
+        'dark-danger': string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        'primary-inverse': string;
+        'secondary-inverse': string;
+        'tertiary-inverse': string;
+        accent: string;
+        success: string;
+        warning: string;
+        danger: string;
+    };
+    backgroundColor: {
+        'dark-neutral': string;
+        'dark-neutral-hover': string;
+        'dark-neutral-darker': string;
+        'dark-neutral-darker-hover': string;
+        'dark-accent': string;
+        'dark-accent-hover': string;
+        'dark-accent-inverse': string;
+        'dark-accent-inverse-hover': string;
+        'dark-success': string;
+        'dark-success-hover': string;
+        'dark-success-inverse': string;
+        'dark-success-inverse-hover': string;
+        'dark-warning': string;
+        'dark-warning-hover': string;
+        'dark-warning-inverse': string;
+        'dark-warning-inverse-hover': string;
+        'dark-danger': string;
+        'dark-danger-hover': string;
+        'dark-danger-inverse': string;
+        'dark-danger-inverse-hover': string;
+        'dark-blue': string;
+        'dark-blue-hover': string;
+        'dark-orange': string;
+        'dark-orange-hover': string;
+        'dark-sky': string;
+        'dark-sky-hover': string;
+        'dark-primary': string;
+        'dark-secondary': string;
+        'dark-base': string;
+        'dark-base-inverse': string;
+        'dark-overlay': string;
+        surface: string;
+        'surface-secondary': string;
+        base: string;
+        'base-inverse': string;
+        overlay: string;
+        neutral: string;
+        'neutral-hover': string;
+        'neutral-darker': string;
+        'neutral-darker-hover': string;
+        'neutral-inverse': string;
+        'neutral-inverse-hover': string;
+        accent: string;
+        'accent-hover': string;
+        'accent-inverse': string;
+        'accent-inverse-hover': string;
+        success: string;
+        'success-hover': string;
+        'success-inverse': string;
+        'success-inverse-hover': string;
+        warning: string;
+        'warning-hover': string;
+        'warning-inverse': string;
+        'warning-inverse-hover': string;
+        danger: string;
+        'danger-hover': string;
+        'danger-inverse': string;
+        'danger-inverse-hover': string;
+        blue: string;
+        'blue-hover': string;
+        orange: string;
+        'orange-hover': string;
+        'orange-inverse': string;
+        'orange-inverse-hover': string;
+        sky: string;
+        'sky-hover': string;
+        'sky-inverse': string;
+        'sky-inverse-hover': string;
+    };
+    boxShadow: {
+        field: string;
+        nav: string;
+        calendar: string;
+        container: string;
+        panel: string;
+        outline: string;
+        focus: string;
     };
 };

package/dist/tokens.js

@@ -257,9 +257,9 @@ export const boxShadow = {
     focus: `0px 0px 0px 1px ${colors.periwinkle[5].default}`
 };
 export const tokens = {
-    ...colors,
-    ...borderColor,
-    ...textColor,
-    ...backgroundColor,
-    ...boxShadow
+    colors,
+    borderColor,
+    textColor,
+    backgroundColor,
+    boxShadow
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@reshape-biotech/design-system",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -30,7 +30,10 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"svelte": "./dist/index.js",
+			"css": "./dist/app.css",
+			"main": "./dist/index.js",
+			"default": "./dist/index.js"
 		}
 	},
 	"peerDependencies": {