Refine appearance settings and syntax highlighting

Keep parsed chat and tool detail content in sync with appearance token changes. Hide font-family controls on native, use One as the default syntax theme, add Swift highlighting, and give Nord a distinct light palette.
2026-05-31 21:40:38 +07:00
parent 4cc72a84e8
commit 9f88b4e69c
21 changed files with 310 additions and 53 deletions
@@ -0,0 +1,66 @@
+import { Fragment, type ReactNode } from "react";
+import { withUnistyles } from "react-native-unistyles";
+import type { Theme } from "@/styles/theme";
+
+interface AppearanceStyleBoundaryProps {
+  appearanceKey?: string;
+  children: ReactNode;
+}
+
+function AppearanceStyleBoundaryBase({ appearanceKey, children }: AppearanceStyleBoundaryProps) {
+  return <Fragment key={appearanceKey}>{children}</Fragment>;
+}
+
+const appearanceStyleBoundaryMapping = (theme: Theme): Partial<AppearanceStyleBoundaryProps> => ({
+  appearanceKey: [
+    theme.fontFamily.ui,
+    theme.fontFamily.mono,
+    theme.fontSize.xs,
+    theme.fontSize.sm,
+    theme.fontSize.base,
+    theme.fontSize.lg,
+    theme.fontSize.xl,
+    theme.fontSize["2xl"],
+    theme.fontSize["3xl"],
+    theme.fontSize["4xl"],
+    theme.fontSize.code,
+    theme.lineHeight.diff,
+    theme.colors.foreground,
+    theme.colors.foregroundMuted,
+    theme.colors.mutedForeground,
+    theme.colors.surface1,
+    theme.colors.surface2,
+    theme.colors.border,
+    theme.colors.accentBright,
+    theme.colors.syntax.keyword,
+    theme.colors.syntax.comment,
+    theme.colors.syntax.string,
+    theme.colors.syntax.number,
+    theme.colors.syntax.literal,
+    theme.colors.syntax.function,
+    theme.colors.syntax.definition,
+    theme.colors.syntax.class,
+    theme.colors.syntax.type,
+    theme.colors.syntax.tag,
+    theme.colors.syntax.attribute,
+    theme.colors.syntax.property,
+    theme.colors.syntax.variable,
+    theme.colors.syntax.operator,
+    theme.colors.syntax.punctuation,
+    theme.colors.syntax.regexp,
+    theme.colors.syntax.escape,
+    theme.colors.syntax.meta,
+    theme.colors.syntax.heading,
+    theme.colors.syntax.link,
+  ].join("\u0000"),
+});
+
+const ThemedAppearanceStyleBoundary = withUnistyles(AppearanceStyleBoundaryBase);
+
+export function AppearanceStyleBoundary({ children }: { children: ReactNode }) {
+  return (
+    <ThemedAppearanceStyleBoundary uniProps={appearanceStyleBoundaryMapping}>
+      {children}
+    </ThemedAppearanceStyleBoundary>
+  );
+}