Mohamed Boudra
9f88b4e69c
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.
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
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>
|
|
);
|
|
}
|