@reshape-biotech/design-system 2.7.47 → 2.7.49

package/dist/tokens.d.ts

@@ -13,6 +13,13 @@ declare const borderColor: {
     'dark-hover': string;
     'dark-focus': string;
     'dark-danger': string;
+    'dark-static-inverse': string;
+    'dark-interactive-inverse': string;
+    'dark-blue-inverse': string;
+    'dark-orange-inverse': string;
+    'dark-pink-inverse': string;
+    'dark-lime-inverse': string;
+    'dark-axis': string;
     static: string;
     input: string;
     interactive: string;
@@ -29,6 +36,24 @@ declare const borderColor: {
     axis: string;
 };
 declare const textColor: {
+    'dark-icon-primary': string;
+    'dark-icon-secondary': string;
+    'dark-icon-tertiary': string;
+    'dark-icon-primary-inverse': string;
+    'dark-icon-secondary-inverse': string;
+    'dark-icon-accent': string;
+    'dark-icon-success': string;
+    'dark-icon-warning': string;
+    'dark-icon-danger': string;
+    'dark-icon-blue': string;
+    'dark-icon-orange': string;
+    'dark-icon-sky': string;
+    'dark-icon-pink': string;
+    'dark-icon-plum': string;
+    'dark-icon-lilac': string;
+    'dark-icon-lime': string;
+    'dark-icon-pear': string;
+    'dark-icon-white': string;
     'icon-primary': string;
     'icon-secondary': string;
     'icon-tertiary': string;
@@ -89,6 +114,8 @@ declare const backgroundColor: {
     'dark-neutral-hover': string;
     'dark-neutral-darker': string;
     'dark-neutral-darker-hover': string;
+    'dark-neutral-inverse': string;
+    'dark-neutral-inverse-hover': string;
     'dark-accent': string;
     'dark-accent-hover': string;
     'dark-accent-inverse': string;
@@ -107,20 +134,36 @@ declare const backgroundColor: {
     'dark-danger-inverse-hover': string;
     'dark-blue': string;
     'dark-blue-hover': string;
+    'dark-blue-inverse': string;
+    'dark-blue-inverse-hover': string;
     'dark-orange': string;
     'dark-orange-hover': string;
+    'dark-orange-inverse': string;
+    'dark-orange-inverse-hover': string;
     'dark-sky': string;
     'dark-sky-hover': string;
+    'dark-sky-inverse': string;
+    'dark-sky-inverse-hover': string;
     'dark-pink': string;
     'dark-pink-hover': string;
+    'dark-pink-inverse': string;
+    'dark-pink-inverse-hover': string;
     'dark-plum': string;
     'dark-plum-hover': string;
+    'dark-plum-inverse': string;
+    'dark-plum-inverse-hover': string;
     'dark-lilac': string;
     'dark-lilac-hover': string;
+    'dark-lilac-inverse': string;
+    'dark-lilac-inverse-hover': string;
     'dark-lime': string;
     'dark-lime-hover': string;
+    'dark-lime-inverse': string;
+    'dark-lime-inverse-hover': string;
     'dark-pear': string;
     'dark-pear-hover': string;
+    'dark-pear-inverse': string;
+    'dark-pear-inverse-hover': string;
     'dark-primary': string;
     'dark-secondary': string;
     'dark-base': string;
@@ -228,6 +271,10 @@ export declare const tokens: {
         base: {
             mist: string;
             snow: string;
+            obsidian: {
+                default: string;
+                50: string;
+            };
             white: {
                 default: string;
                 5: string;
@@ -523,6 +570,13 @@ export declare const tokens: {
         'dark-hover': string;
         'dark-focus': string;
         'dark-danger': string;
+        'dark-static-inverse': string;
+        'dark-interactive-inverse': string;
+        'dark-blue-inverse': string;
+        'dark-orange-inverse': string;
+        'dark-pink-inverse': string;
+        'dark-lime-inverse': string;
+        'dark-axis': string;
         static: string;
         input: string;
         interactive: string;
@@ -539,6 +593,24 @@ export declare const tokens: {
         axis: string;
     };
     textColor: {
+        'dark-icon-primary': string;
+        'dark-icon-secondary': string;
+        'dark-icon-tertiary': string;
+        'dark-icon-primary-inverse': string;
+        'dark-icon-secondary-inverse': string;
+        'dark-icon-accent': string;
+        'dark-icon-success': string;
+        'dark-icon-warning': string;
+        'dark-icon-danger': string;
+        'dark-icon-blue': string;
+        'dark-icon-orange': string;
+        'dark-icon-sky': string;
+        'dark-icon-pink': string;
+        'dark-icon-plum': string;
+        'dark-icon-lilac': string;
+        'dark-icon-lime': string;
+        'dark-icon-pear': string;
+        'dark-icon-white': string;
         'icon-primary': string;
         'icon-secondary': string;
         'icon-tertiary': string;
@@ -599,6 +671,8 @@ export declare const tokens: {
         'dark-neutral-hover': string;
         'dark-neutral-darker': string;
         'dark-neutral-darker-hover': string;
+        'dark-neutral-inverse': string;
+        'dark-neutral-inverse-hover': string;
         'dark-accent': string;
         'dark-accent-hover': string;
         'dark-accent-inverse': string;
@@ -617,20 +691,36 @@ export declare const tokens: {
         'dark-danger-inverse-hover': string;
         'dark-blue': string;
         'dark-blue-hover': string;
+        'dark-blue-inverse': string;
+        'dark-blue-inverse-hover': string;
         'dark-orange': string;
         'dark-orange-hover': string;
+        'dark-orange-inverse': string;
+        'dark-orange-inverse-hover': string;
         'dark-sky': string;
         'dark-sky-hover': string;
+        'dark-sky-inverse': string;
+        'dark-sky-inverse-hover': string;
         'dark-pink': string;
         'dark-pink-hover': string;
+        'dark-pink-inverse': string;
+        'dark-pink-inverse-hover': string;
         'dark-plum': string;
         'dark-plum-hover': string;
+        'dark-plum-inverse': string;
+        'dark-plum-inverse-hover': string;
         'dark-lilac': string;
         'dark-lilac-hover': string;
+        'dark-lilac-inverse': string;
+        'dark-lilac-inverse-hover': string;
         'dark-lime': string;
         'dark-lime-hover': string;
+        'dark-lime-inverse': string;
+        'dark-lime-inverse-hover': string;
         'dark-pear': string;
         'dark-pear-hover': string;
+        'dark-pear-inverse': string;
+        'dark-pear-inverse-hover': string;
         'dark-primary': string;
         'dark-secondary': string;
         'dark-base': string;

package/dist/tokens.js

@@ -67,7 +67,7 @@ const lightBackgroundColor = {
     'surface-secondary': colors.base.snow,
     base: colors.base.mist,
     'base-inverse': colors.gray[6],
-    overlay: '#090D1566', // TODO: MAP TO A COLOR
+    overlay: colors.base.obsidian[50],
     neutral: colors.base.midnight[5],
     'neutral-hover': colors.base.midnight[10],
     'neutral-darker': colors.base.midnight[15],
@@ -266,22 +266,24 @@ const darkTextColor = {
     'dark-pear': colors.pear[3],
 };
 const darkIconColor = {
-    'dark-primary': colors.base.white.default,
-    'dark-secondary': colors.gray[3],
-    'dark-tertiary': colors.gray[4].default,
-    '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-pink': colors.pink[5].default,
-    'dark-plum': colors.plum[5].default,
-    'dark-lilac': colors.lilac[5].default,
-    'dark-lime': colors.lime[5].default,
-    'dark-pear': colors.sky[5].default,
+    'dark-icon-primary': colors.base.white.default,
+    'dark-icon-secondary': colors.gray[3],
+    'dark-icon-tertiary': colors.gray[4].default,
+    'dark-icon-primary-inverse': colors.base.midnight.default,
+    'dark-icon-secondary-inverse': colors.base.midnight[70],
+    'dark-icon-accent': colors.periwinkle[4].default,
+    'dark-icon-success': colors.green[4].default,
+    'dark-icon-warning': colors.yellow[4].default,
+    'dark-icon-danger': colors.red[4].default,
+    'dark-icon-blue': colors.blue[4].default,
+    'dark-icon-orange': colors.orange[4].default,
+    'dark-icon-sky': colors.sky[4].default,
+    'dark-icon-pink': colors.pink[5].default,
+    'dark-icon-plum': colors.plum[5].default,
+    'dark-icon-lilac': colors.lilac[5].default,
+    'dark-icon-lime': colors.lime[5].default,
+    'dark-icon-pear': colors.pear[5].default,
+    'dark-icon-white': colors.base.white.default,
 };
 const darkBorderColor = {
     'dark-static': colors.base.white[10],
@@ -290,6 +292,13 @@ const darkBorderColor = {
     'dark-hover': colors.periwinkle[3][25],
     'dark-focus': colors.periwinkle[4].default,
     'dark-danger': colors.red[4].default,
+    'dark-static-inverse': colors.base.midnight[8],
+    'dark-interactive-inverse': colors.base.midnight[15],
+    'dark-blue-inverse': colors.blue[4].default,
+    'dark-orange-inverse': colors.orange[4].default,
+    'dark-pink-inverse': colors.pink[4].default,
+    'dark-lime-inverse': colors.lime[4].default,
+    'dark-axis': colors.base.white[15],
 };
 const darkOutlineColor = {
     'dark-static': colors.base.white[10],
@@ -303,7 +312,7 @@ const darkSurfaceColor = {
     '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-overlay': colors.base.obsidian[50],
 };
 const darkBackgroundColor = {
     ...darkSurfaceColor,
@@ -311,6 +320,8 @@ const darkBackgroundColor = {
     'dark-neutral-hover': colors.base.white[15],
     'dark-neutral-darker': colors.base.white[15],
     'dark-neutral-darker-hover': colors.base.white[25],
+    'dark-neutral-inverse': colors.base.midnight[5],
+    'dark-neutral-inverse-hover': colors.base.midnight[15],
     'dark-accent': colors.periwinkle[3][10],
     'dark-accent-hover': colors.periwinkle[3][25],
     'dark-accent-inverse': colors.periwinkle[4].default,
@@ -329,20 +340,36 @@ const darkBackgroundColor = {
     'dark-danger-inverse-hover': colors.red[5].default,
     'dark-blue': colors.blue[4][10],
     'dark-blue-hover': colors.blue[4][25],
+    'dark-blue-inverse': colors.blue[4].default,
+    'dark-blue-inverse-hover': colors.blue[5].default,
     'dark-orange': colors.orange[4][10],
     'dark-orange-hover': colors.orange[4][25],
+    'dark-orange-inverse': colors.orange[4].default,
+    'dark-orange-inverse-hover': colors.orange[5].default,
     'dark-sky': colors.sky[4][10],
     'dark-sky-hover': colors.sky[4][25],
+    'dark-sky-inverse': colors.sky[4].default,
+    'dark-sky-inverse-hover': colors.sky[5].default,
     'dark-pink': colors.pink[4][10],
     'dark-pink-hover': colors.pink[4][25],
+    'dark-pink-inverse': colors.pink[4].default,
+    'dark-pink-inverse-hover': colors.pink[5].default,
     'dark-plum': colors.plum[4][10],
     'dark-plum-hover': colors.plum[4][25],
+    'dark-plum-inverse': colors.plum[4].default,
+    'dark-plum-inverse-hover': colors.plum[5].default,
     'dark-lilac': colors.lilac[4][10],
     'dark-lilac-hover': colors.lilac[4][25],
+    'dark-lilac-inverse': colors.lilac[4].default,
+    'dark-lilac-inverse-hover': colors.lilac[5].default,
     'dark-lime': colors.lime[4][10],
     'dark-lime-hover': colors.lime[4][25],
+    'dark-lime-inverse': colors.lime[4].default,
+    'dark-lime-inverse-hover': colors.lime[5].default,
     'dark-pear': colors.pear[4][10],
     'dark-pear-hover': colors.pear[4][25],
+    'dark-pear-inverse': colors.pear[4].default,
+    'dark-pear-inverse-hover': colors.pear[5].default,
 };
 const borderColor = {
     ...lightBorderColor,
@@ -352,6 +379,7 @@ const textColor = {
     ...lightTextColor,
     ...darkTextColor,
     ...lightIconColor,
+    ...darkIconColor,
 };
 const backgroundColor = {
     ...lightBackgroundColor,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reshape-biotech/design-system",
-  "version": "2.7.47",
+  "version": "2.7.49",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -382,16 +382,19 @@
     }
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "marked": "^15.0.0",
     "luxon": "^3.5.0",
+    "marked": "^15.0.0",
+    "svelte": "^5.0.0",
     "svelte-select": "^5.8.1"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.1",
     "@eslint/compat": "^1.2.3",
+    "@storybook/addon-a11y": "^10.2.14",
     "@storybook/addon-docs": "^10.2.0",
     "@storybook/addon-links": "^10.2.0",
     "@storybook/addon-svelte-csf": "^5.0.11",
+    "@storybook/addon-vitest": "^10.2.13",
     "@storybook/svelte": "^10.2.0",
     "@storybook/sveltekit": "^10.2.0",
     "@sveltejs/adapter-vercel": "^6.0.0",
@@ -401,6 +404,8 @@
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.0.0",
     "@testing-library/svelte": "^5.2.6",
+    "@vitest/browser": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
     "eslint": "^9.7.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^3.0.0",
@@ -409,6 +414,7 @@
     "luxon": "^3.5.0",
     "marked": "^15.0.0",
     "phosphor-svelte": "^3.0.1",
+    "playwright": "^1.58.2",
     "prettier": "^3.5.1",
     "prettier-plugin-svelte": "^3.2.6",
     "prettier-plugin-tailwindcss": "^0.7.0",
@@ -423,7 +429,7 @@
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.0.0",
     "vite": "^6.1.1",
-    "vitest": "^3.0.6",
+    "vitest": "3.2.4",
     "webpack-bundle-analyzer": "^4.10.2"
   },
   "dependencies": {