fix(theme): "upgrade" v2 colors to v2.9 format (#1479)

Author: rexxars

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,
       },
     },

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,
+    },
+  }
+}