[APP-2160] Render alf Context directly in StandardSiteThemeProvider

Nesting a full ThemeProvider spun up its own font-scale state, freezing
the SubscribeButton subtree from runtime parent updates. Reuse the
parent alf value and only swap the themes map.

src/components/Post/Embed/StandardSiteEmbed/StandardSiteThemeProvider.tsx

@@ -1,10 +1,12 @@
-import {useMemo} from 'react'
 import {type AppBskyEmbedExternal} from '@atproto/api'
 
-import {ThemeProvider, useAlf, utils} from '#/alf'
+import {Context, useAlf, utils} from '#/alf'
 
 /**
  * Overrides only the values needed for `secondary_inverted` buttons atm.
+ *
+ * Renders the alf Context directly (rather than nesting a ThemeProvider) so
+ * that font-scale and other parent state stay live in the subtree.
  */
 export function StandardSiteThemeProvider({
   view,
@@ -14,77 +16,52 @@ export function StandardSiteThemeProvider({
   children: React.ReactNode
 }) {
   const alf = useAlf()
-  const themesOverride = useMemo(() => {
-    const {accentRGB, accentForegroundRGB} = view.source?.theme || {}
-    if (!accentRGB || !accentForegroundRGB) return alf.themes
+  const {accentRGB, accentForegroundRGB} = view.source?.theme || {}
+  if (!accentRGB || !accentForegroundRGB) return children
 
-    const accent = utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b)
-    const accentForeground = utils.rgbToHex(
-      accentForegroundRGB.r,
-      accentForegroundRGB.g,
-      accentForegroundRGB.b,
-    )
-    const atoms = {
-      text_inverted: {color: accentForeground},
-    }
-    const palette = {
-      contrast_975: utils.darken(accent, 5), // hover
-      contrast_900: accent, // bg
-      contrast_600: utils.lighten(accent, 5), // disabled bg
-      contrast_300: accentForeground, // disabled text
-    }
-    return {
-      lightPalette: {
-        ...alf.themes.lightPalette,
-        ...palette,
-      },
-      darkPalette: {
-        ...alf.themes.darkPalette,
-        ...palette,
-      },
-      dimPalette: {
-        ...alf.themes.dimPalette,
-        ...palette,
-      },
-      light: {
-        ...alf.themes.light,
-        atoms: {
-          ...alf.themes.light.atoms,
-          ...atoms,
-        },
-        palette: {
-          ...alf.themes.light.palette,
-          ...palette,
-        },
-      },
-      dark: {
-        ...alf.themes.dark,
-        atoms: {
-          ...alf.themes.dark.atoms,
-          ...atoms,
-        },
-        palette: {
-          ...alf.themes.dark.palette,
-          ...palette,
-        },
-      },
-      dim: {
-        ...alf.themes.dim,
-        atoms: {
-          ...alf.themes.dim.atoms,
-          ...atoms,
-        },
-        palette: {
-          ...alf.themes.dim.palette,
-          ...palette,
-        },
-      },
-    }
-  }, [alf, view])
-
-  return (
-    <ThemeProvider theme={alf.themeName} themesOverride={themesOverride}>
-      {children}
-    </ThemeProvider>
+  const accent = utils.rgbToHex(accentRGB.r, accentRGB.g, accentRGB.b)
+  const accentForeground = utils.rgbToHex(
+    accentForegroundRGB.r,
+    accentForegroundRGB.g,
+    accentForegroundRGB.b,
   )
+  const atomsOverride = {
+    text_inverted: {color: accentForeground},
+  }
+  const paletteOverride = {
+    contrast_975: utils.darken(accent, 5), // hover
+    contrast_900: accent, // bg
+    contrast_600: utils.lighten(accent, 5), // disabled bg
+    contrast_300: accentForeground, // disabled text
+  }
+
+  const themes = {
+    ...alf.themes,
+    lightPalette: {...alf.themes.lightPalette, ...paletteOverride},
+    darkPalette: {...alf.themes.darkPalette, ...paletteOverride},
+    dimPalette: {...alf.themes.dimPalette, ...paletteOverride},
+    light: {
+      ...alf.themes.light,
+      atoms: {...alf.themes.light.atoms, ...atomsOverride},
+      palette: {...alf.themes.light.palette, ...paletteOverride},
+    },
+    dark: {
+      ...alf.themes.dark,
+      atoms: {...alf.themes.dark.atoms, ...atomsOverride},
+      palette: {...alf.themes.dark.palette, ...paletteOverride},
+    },
+    dim: {
+      ...alf.themes.dim,
+      atoms: {...alf.themes.dim.atoms, ...atomsOverride},
+      palette: {...alf.themes.dim.palette, ...paletteOverride},
+    },
+  }
+
+  const value = {
+    ...alf,
+    themes,
+    theme: themes[alf.themeName],
+  }
+
+  return <Context.Provider value={value}>{children}</Context.Provider>
 }