@reshape-biotech/design-system 2.7.42 → 2.7.44

package/dist/tailwind.preset.d.ts

@@ -1,500 +1,14 @@
-import typography from '@tailwindcss/typography';
-declare const config: {
-    safelist: string[];
-    theme: {
-        extend: {
-            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;
-                        8: string;
-                        10: string;
-                        15: string;
-                        25: string;
-                        50: string;
-                        70: string;
-                        90: string;
-                    };
-                };
-                gray: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    5: string;
-                    6: string;
-                };
-                periwinkle: {
-                    1: string;
-                    2: string;
-                    3: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                orange: {
-                    1: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    2: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                sky: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    6: string;
-                };
-                blue: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                green: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        5: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                yellow: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                red: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                shadow: {
-                    2: string;
-                    4: string;
-                    6: string;
-                    8: string;
-                    12: string;
-                    16: string;
-                };
-                pink: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    6: string;
-                };
-                plum: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    6: string;
-                };
-                lilac: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    6: string;
-                };
-                lime: {
-                    1: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    2: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: string;
-                };
-                pear: {
-                    1: string;
-                    2: string;
-                    3: string;
-                    4: {
-                        default: string;
-                        10: string;
-                        25: string;
-                    };
-                    5: {
-                        default: string;
-                        10: string;
-                        25: string;
-                        50: string;
-                        75: string;
-                    };
-                    6: 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-pink': string;
-                'dark-pink-hover': string;
-                'dark-plum': string;
-                'dark-plum-hover': string;
-                'dark-lilac': string;
-                'dark-lilac-hover': string;
-                'dark-lime': string;
-                'dark-lime-hover': string;
-                'dark-pear': string;
-                'dark-pear-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;
-                'blue-inverse': string;
-                'blue-inverse-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;
-                pink: string;
-                'pink-hover': string;
-                'pink-inverse': string;
-                'pink-inverse-hover': string;
-                plum: string;
-                'plum-hover': string;
-                'plum-inverse': string;
-                'plum-inverse-hover': string;
-                lilac: string;
-                'lilac-hover': string;
-                'lilac-inverse': string;
-                'lilac-inverse-hover': string;
-                lime: string;
-                'lime-hover': string;
-                'lime-inverse': string;
-                'lime-inverse-hover': string;
-                pear: string;
-                'pear-hover': string;
-                'pear-inverse': string;
-                'pear-inverse-hover': string;
-            };
-            borderColor: {
-                'dark-static': string;
-                'dark-input': string;
-                'dark-interactive': string;
-                'dark-hover': string;
-                'dark-focus': string;
-                'dark-danger': string;
-                static: string;
-                input: string;
-                interactive: string;
-                hover: string;
-                focus: string;
-                danger: string;
-                'static-inverse': string;
-                'interactive-inverse': string;
-                'blue-inverse': string;
-                'orange-inverse': string;
-                'pink-inverse': string;
-                'lime-inverse': string;
-                white: string;
-                axis: string;
-            };
-            textColor: {
-                'icon-primary': string;
-                'icon-secondary': string;
-                'icon-tertiary': string;
-                'icon-primary-inverse': string;
-                'icon-secondary-inverse': string;
-                'icon-accent': string;
-                'icon-success': string;
-                'icon-warning': string;
-                'icon-danger': string;
-                'icon-blue': string;
-                'icon-orange': string;
-                'icon-sky': string;
-                'icon-pink': string;
-                'icon-plum': string;
-                'icon-lilac': string;
-                'icon-lime': string;
-                'icon-pear': string;
-                'icon-white': 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;
-                'dark-blue': string;
-                'dark-orange': string;
-                'dark-sky': string;
-                'dark-pink': string;
-                'dark-plum': string;
-                'dark-lilac': string;
-                'dark-lime': string;
-                'dark-pear': string;
-                primary: string;
-                secondary: string;
-                tertiary: string;
-                'primary-inverse': string;
-                'secondary-inverse': string;
-                'tertiary-inverse': string;
-                accent: string;
-                success: string;
-                warning: string;
-                danger: string;
-                blue: string;
-                orange: string;
-                sky: string;
-                pink: string;
-                plum: string;
-                lilac: string;
-                lime: string;
-                pear: string;
-            };
-            boxShadow: {
-                input: string;
-                container: string;
-                menu: string;
-                hover: string;
-                focus: 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;
-            };
-            ringColor: {
+export default config;
+declare namespace config {
+    namespace theme {
+        namespace extend {
+            export { colors };
+            export { backgroundColor };
+            export { borderColor };
+            export { textColor };
+            export { boxShadow };
+            export { outlineColor };
+            export let ringColor: {
                 'dark-static': string;
                 'dark-input': string;
                 'dark-interactive': string;
@@ -516,19 +30,20 @@ declare const config: {
                 white: string;
                 axis: string;
             };
-            fontFamily: {
-                mono: string[];
-                sans: string[];
-            };
-            fontSize: {
-                xxs: string;
-                label: string;
-            };
-        };
-    };
-    plugins: (typeof typography | {
-        handler: import("tailwindcss/types/config.js").PluginCreator;
-        config?: Partial<import("tailwindcss/types/config.js").Config> | undefined;
-    })[];
-};
-export default config;
+            export namespace fontFamily {
+                let mono: string[];
+                let sans: string[];
+            }
+            export namespace fontSize {
+                let xxs: string;
+                let label: string;
+            }
+        }
+    }
+}
+import { colors } from './tokens';
+import { backgroundColor } from './tokens';
+import { borderColor } from './tokens';
+import { textColor } from './tokens';
+import { boxShadow } from './tokens';
+import { outlineColor } from './tokens';

package/dist/tailwind.preset.js

@@ -1,29 +1,34 @@
-import typography from '@tailwindcss/typography';
-import containerQueries from '@tailwindcss/container-queries';
-import { backgroundColor, borderColor, boxShadow, colors, textColor, outlineColor, } from './tokens.js';
+import {
+  backgroundColor,
+  borderColor,
+  boxShadow,
+  colors,
+  textColor,
+  outlineColor,
+} from './tokens';
+
 const config = {
-    safelist: ['tailwind-safelist.txt'],
-    theme: {
-        extend: {
-            colors,
-            backgroundColor,
-            borderColor,
-            textColor,
-            boxShadow,
-            outlineColor,
-            ringColor: {
-                ...borderColor,
-            },
-            fontFamily: {
-                mono: ['"Geist Mono"', 'monospace'],
-                sans: ['"af Another Sans"', 'sans-serif'],
-            },
-            fontSize: {
-                xxs: '10px',
-                label: '13px',
-            },
-        },
+  theme: {
+    extend: {
+      colors,
+      backgroundColor,
+      borderColor,
+      textColor,
+      boxShadow,
+      outlineColor,
+      ringColor: {
+        ...borderColor,
+      },
+      fontFamily: {
+        mono: ['"Geist Mono"', 'monospace'],
+        sans: ['"af Another Sans"', 'sans-serif'],
+      },
+      fontSize: {
+        xxs: '10px',
+        label: '13px',
+      },
     },
-    plugins: [typography, containerQueries],
+  },
 };
+
 export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.42",
+  "version": "2.7.44",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -18,11 +18,15 @@
   "files": [
     "dist",
     "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
+    "!dist/**/*.spec.*",
+    "safelist.css",
+    "base.css"
   ],
   "sideEffects": [
     "**/*.css",
-    "./dist/app.css"
+    "./dist/app.css",
+    "./dist/safelist.css",
+    "./dist/base.css"
   ],
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -342,7 +346,21 @@
       "import": "./dist/styles.js",
       "default": "./dist/styles.js"
     },
-    "./styles.css": "./dist/app.css",
+    "./styles.css": {
+      "style": "./dist/app.css",
+      "import": "./dist/app.css",
+      "default": "./dist/app.css"
+    },
+    "./safelist.css": {
+      "style": "./dist/safelist.css",
+      "import": "./dist/safelist.css",
+      "default": "./dist/safelist.css"
+    },
+    "./base.css": {
+      "style": "./dist/base.css",
+      "import": "./dist/base.css",
+      "default": "./dist/base.css"
+    },
     "./tailwind": {
       "types": "./dist/tailwind.d.ts",
       "import": "./dist/tailwind.preset.js",
@@ -372,15 +390,13 @@
     "@storybook/addon-svelte-csf": "^5.0.11",
     "@storybook/svelte": "^10.2.0",
     "@storybook/sveltekit": "^10.2.0",
-    "@sveltejs/adapter-vercel": "^5.6.2",
+    "@sveltejs/adapter-vercel": "^6.0.0",
     "@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",
+    "@tailwindcss/vite": "^4.0.0",
     "@testing-library/svelte": "^5.2.6",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^3.0.0",
@@ -389,17 +405,16 @@
     "luxon": "^3.5.0",
     "marked": "^15.0.0",
     "phosphor-svelte": "^3.0.1",
-    "postcss": "^8.5.3",
     "prettier": "^3.5.1",
     "prettier-plugin-svelte": "^3.2.6",
-    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prettier-plugin-tailwindcss": "^0.7.0",
     "publint": "^0.3.0",
     "rollup-plugin-visualizer": "^6.0.3",
     "storybook": "^10.2.0",
     "svelte": "^5.20.2",
     "svelte-check": "^4.0.0",
     "svelte-select": "^5.8.1",
-    "tailwindcss": "^3.4.9",
+    "tailwindcss": "^4.0.0",
     "tailwindest": "^2.3.0",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.0.0",

package/safelist.css

@@ -0,0 +1 @@
+@import './dist/safelist.css';