docs: fix alert doc page Default Theme Variables section in v11.7

Author: git-nandor

docs/upgrading/upgrade-guide.md

@@ -40,18 +40,20 @@ Focus rings are now styled in a central pseudo-component called `SharedTokens`.
 type: example
 ---
 <InstUISettingsProvider
-  theme={{
-    newTheme: { // TODO remove this when we remove the old theme
-      sharedTokens: {
-        focusOutline: {
-          infoColor: 'green',
-          width: '0.4rem',
-          offset: '0rem'
+  themeOverride={{
+    sharedTokens: {
+      focusOutline: {
+        infoColor: 'green',
+        width: '0.4rem',
+        offset: '0rem'
         }
       }
-    }
-  }}>
-  <TextInput renderLabel="Name" placeholder="Note: Change example when the old theme is renamed!"/>
+  }}
+>
+  <TextInput
+    renderLabel="Name"
+    placeholder="Note: Change example when the old theme is renamed!"
+  />
 </InstUISettingsProvider>
 ```
 

packages/__docs__/buildScripts/build-docs.mts

@@ -362,11 +362,27 @@ function tryParseReadme(dirName: string) {
   return undefined
 }
 
+function resolveComponents(theme: typeof legacyCanvas | typeof legacyCanvasHighContrast) {
+  const sem = theme.semantics(theme.primitives)
+  const resolved: Record<string, any> = {}
+  for (const [key, fn] of Object.entries(theme.components)) {
+    if (typeof fn === 'function') {
+      resolved[key] = fn(sem)
+    }
+  }
+  return resolved
+}
+
 function parseThemes() {
   const parsed: MainDocsData['themes'] = {}
   // legacy-canvas first so it becomes the default rendering theme
-  parsed['legacy-canvas'] = { resource: canvas }
-  parsed['legacy-canvas-high-contrast'] = { resource: canvasHighContrast }
+  // resolvedComponents: pre-computed plain objects (functions can't survive JSON.stringify)
+  parsed['legacy-canvas'] = {
+    resource: { ...canvas, resolvedComponents: resolveComponents(legacyCanvas) }
+  }
+  parsed['legacy-canvas-high-contrast'] = {
+    resource: { ...canvasHighContrast, resolvedComponents: resolveComponents(legacyCanvasHighContrast) }
+  }
   parsed['canvas'] = { resource: legacyCanvas }
   parsed['canvas-high-contrast'] = { resource: legacyCanvasHighContrast }
   parsed[light.key] = { resource: light }

packages/__docs__/src/Document/index.tsx

@@ -94,7 +94,10 @@ class Document extends Component<DocumentProps, DocumentState> {
     const isLegacyTheme = this.context?.componentVersion == 'v11_6'
     // new theme
     if (!isLegacyTheme) {
-      const newThemeEntry = themeVariables?.newTheme?.components?.[themeKey]
+      // resolvedComponents contains pre-computed plain objects (built at build time)
+      const resolvedComponents = (themeVariables as Record<string, unknown>)
+        ?.resolvedComponents as Record<string, unknown> | undefined
+      const newThemeEntry = resolvedComponents?.[themeKey as string]
       const componentInstance =
         selectedId === doc.id
           ? doc?.componentInstance
@@ -104,7 +107,9 @@ class Document extends Component<DocumentProps, DocumentState> {
         typeof componentInstance?.generateComponentTheme !== 'function'
       ) {
         // new theme - use pre-computed theme object directly
-        this.setState({ componentTheme: newThemeEntry })
+        this.setState({
+          componentTheme: newThemeEntry as DocumentState['componentTheme']
+        })
         return
       }
     }