@sanity/ui 2.12.0 → 2.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.12.0",
+  "version": "2.12.2",
   "keywords": [
     "sanity",
     "ui",
@@ -120,7 +120,7 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.5.7",
     "csstype": "^3.1.3",
-    "framer-motion": "^12.4.0",
+    "framer-motion": "^12.4.1",
     "react-compiler-runtime": "19.0.0-beta-714736e-20250131",
     "react-refractor": "^2.2.0",
     "use-effect-event": "^1.0.2"
@@ -196,7 +196,7 @@
     "semantic-release": "^24.2.1",
     "start-server-and-test": "^2.0.10",
     "storybook": "^8.5.3",
-    "styled-components": "^6.1.14",
+    "styled-components": "^6.1.15",
     "tsconfig-paths": "^4.2.0",
     "typescript": "5.7.3",
     "vite": "^5.4.14",

package/src/theme/getScopedTheme.ts

@@ -8,6 +8,7 @@ import {
   ThemeColorSchemeKey,
 } from './system'
 import {is_v2, v0_v2, v2_v0} from './versioning'
+import {themeColor_v0_v2_9} from './versioning/themeColor_v2_v2_9'
 
 // cache[scheme][tone][rootTheme] = theme
 const cache = new Map<
@@ -34,6 +35,7 @@ export function getScopedTheme(
 
   const colorScheme_v2 = v2.color[scheme] || v2.color.light
   const color_v2 = colorScheme_v2[tone] || colorScheme_v2.default
+  const color_v2_9 = themeColor_v0_v2_9(color_v2)
   const layer_v2 = v2.layer || defaultThemeConfig.layer
 
   const theme: Theme = {
@@ -44,7 +46,7 @@ export function getScopedTheme(
       v2: {
         ...v2,
         _resolved: true,
-        color: color_v2,
+        color: color_v2_9,
         layer: layer_v2,
       },
     },

package/src/theme/versioning/themeColor_v2_v2_9.ts

@@ -0,0 +1,49 @@
+import type {ThemeColorCard_v2} from '../system'
+
+/**
+ * Apply `neutral` and `suggest` if they're not already part of the color object,
+ * as this was introduced in v2.9, but is not compatible with v2.0.
+ *
+ * @param color - The color object to upgrade
+ * @returns The upgraded color object. Returns as-is if already upgraded.
+ * @internal
+ */
+export function themeColor_v0_v2_9(color: ThemeColorCard_v2): ThemeColorCard_v2 {
+  if ('neutral' in color.badge) {
+    return color // Already at >= v2.9
+  }
+
+  // TypeScript narrows to `never` because the above should always be true
+  const colors = color as ThemeColorCard_v2
+
+  return {
+    ...colors,
+    badge: {
+      ...colors.badge,
+      neutral: colors.badge.default,
+      suggest: colors.badge.primary,
+    },
+    button: {
+      bleed: {
+        ...colors.button.bleed,
+        neutral: colors.button.bleed.default,
+        suggest: colors.button.bleed.primary,
+      },
+      default: {
+        ...colors.button.default,
+        neutral: colors.button.default.default,
+        suggest: colors.button.default.primary,
+      },
+      ghost: {
+        ...colors.button.ghost,
+        neutral: colors.button.ghost.default,
+        suggest: colors.button.ghost.primary,
+      },
+    },
+    selectable: {
+      ...colors.selectable,
+      neutral: colors.selectable.default,
+      suggest: colors.selectable.primary,
+    },
+  }
+}