@tooee/themes 0.2.4 → 0.3.0

package/src/context.tsx

@@ -1,148 +1,157 @@
-import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react"
-import { type SyntaxStyle } from "@opentui/core"
-import { writeGlobalConfig } from "@tooee/config"
-import type { ResolvedTheme } from "./types.js"
+import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import type { ReactNode } from "react";
+import type { SyntaxStyle } from "@opentui/core";
+import { writeGlobalConfig } from "@tooee/config";
+import type { ResolvedTheme } from "./types.js";
 import {
-  type Theme,
   buildTheme,
   getThemeNames,
   defaultTheme,
   DEFAULT_THEME_NAME,
   DEFAULT_MODE,
-} from "./loader.js"
+} from "./loader.js";
+import type { Theme } from "./loader.js";
 
 // ---------------------------------------------------------------------------
 // Context
 // ---------------------------------------------------------------------------
 
 interface ThemeContextValue {
-  theme: ResolvedTheme
-  syntax: SyntaxStyle
-  name: string
-  mode: "dark" | "light"
+  theme: ResolvedTheme;
+  syntax: SyntaxStyle;
+  name: string;
+  mode: "dark" | "light";
 }
 
 const ThemeContext = createContext<ThemeContextValue>({
-  theme: defaultTheme.colors,
-  syntax: defaultTheme.syntax,
-  name: defaultTheme.name,
   mode: defaultTheme.mode,
-})
+  name: defaultTheme.name,
+  syntax: defaultTheme.syntax,
+  theme: defaultTheme.colors,
+});
 
 export interface ThemeProviderProps {
   /** Theme name (e.g. "tokyonight", "catppuccin", "dracula") */
-  name?: string
+  name?: string;
   /** Color mode */
-  mode?: "dark" | "light"
+  mode?: "dark" | "light";
   /** Full Theme object (overrides name/mode if provided) */
-  theme?: Theme
-  children: ReactNode
+  theme?: Theme;
+  children: ReactNode;
 }
 
-export function ThemeProvider({ name, mode, theme: themeProp, children }: ThemeProviderProps) {
+export const ThemeProvider = function ThemeProvider({
+  name,
+  mode,
+  theme: themeProp,
+  children,
+}: ThemeProviderProps): ReactNode {
   const resolved = useMemo<ThemeContextValue>(() => {
     if (themeProp) {
       return {
-        theme: themeProp.colors,
-        syntax: themeProp.syntax,
-        name: themeProp.name,
         mode: themeProp.mode,
-      }
+        name: themeProp.name,
+        syntax: themeProp.syntax,
+        theme: themeProp.colors,
+      };
     }
 
-    const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE)
-    return { theme: t.colors, syntax: t.syntax, name: t.name, mode: t.mode }
-  }, [themeProp, name, mode])
+    const t = buildTheme(name ?? DEFAULT_THEME_NAME, mode ?? DEFAULT_MODE);
+    return { mode: t.mode, name: t.name, syntax: t.syntax, theme: t.colors };
+  }, [themeProp, name, mode]);
 
-  return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>
-}
+  return <ThemeContext.Provider value={resolved}>{children}</ThemeContext.Provider>;
+};
 
-export function useTheme(): ThemeContextValue {
-  return useContext(ThemeContext)
-}
+export const useTheme = function useTheme(): ThemeContextValue {
+  return useContext(ThemeContext);
+};
 
 // ---------------------------------------------------------------------------
 // ThemeSwitcherProvider + useThemeSwitcher
 // ---------------------------------------------------------------------------
 
 interface ThemeSwitcherContextValue extends ThemeContextValue {
-  nextTheme: () => void
-  prevTheme: () => void
-  setTheme: (name: string, opts?: { persist?: boolean }) => void
-  allThemes: string[]
+  nextTheme: () => void;
+  prevTheme: () => void;
+  setTheme: (name: string, opts?: { persist?: boolean }) => void;
+  allThemes: string[];
 }
 
-const ThemeSwitcherContext = createContext<ThemeSwitcherContextValue | null>(null)
+const ThemeSwitcherContext = createContext<ThemeSwitcherContextValue | null>(null);
 
 export interface ThemeSwitcherProviderProps {
-  initialTheme?: string
-  initialMode?: "dark" | "light"
-  children: ReactNode
+  initialTheme?: string;
+  initialMode?: "dark" | "light";
+  children: ReactNode;
 }
 
-export function ThemeSwitcherProvider({
+export const ThemeSwitcherProvider = function ThemeSwitcherProvider({
   initialTheme,
   initialMode,
   children,
-}: ThemeSwitcherProviderProps) {
-  const allThemes = useMemo(() => getThemeNames(), [])
-  const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME)
-  const [mode, _setMode] = useState<"dark" | "light">(initialMode ?? DEFAULT_MODE)
+}: ThemeSwitcherProviderProps): ReactNode {
+  const allThemes = useMemo(() => getThemeNames(), []);
+  const [themeName, setThemeName] = useState(initialTheme ?? DEFAULT_THEME_NAME);
+  const [mode, setMode] = useState<"dark" | "light">(initialMode ?? DEFAULT_MODE);
+  void setMode;
 
-  const theme = useMemo(() => buildTheme(themeName, mode), [themeName, mode])
+  const theme = useMemo(() => buildTheme(themeName, mode), [themeName, mode]);
 
   const nextTheme = useCallback(() => {
-    const idx = allThemes.indexOf(themeName)
-    const next = allThemes[(idx + 1) % allThemes.length]
-    setThemeName(next)
-    writeGlobalConfig({ theme: { name: next, mode } })
-  }, [allThemes, mode, themeName])
+    const idx = allThemes.indexOf(themeName);
+    const next = allThemes[(idx + 1) % allThemes.length];
+    setThemeName(next);
+    writeGlobalConfig({ theme: { mode, name: next } });
+  }, [allThemes, mode, themeName]);
 
   const prevTheme = useCallback(() => {
-    const idx = allThemes.indexOf(themeName)
-    const prev = allThemes[(idx - 1 + allThemes.length) % allThemes.length]
-    setThemeName(prev)
-    writeGlobalConfig({ theme: { name: prev, mode } })
-  }, [allThemes, mode, themeName])
+    const idx = allThemes.indexOf(themeName);
+    const prev = allThemes[(idx - 1 + allThemes.length) % allThemes.length];
+    setThemeName(prev);
+    writeGlobalConfig({ theme: { mode, name: prev } });
+  }, [allThemes, mode, themeName]);
 
   const setThemeByName = useCallback(
     (name: string, opts?: { persist?: boolean }) => {
-      setThemeName(name)
-      if (opts?.persist) {
-        writeGlobalConfig({ theme: { name, mode } })
+      setThemeName(name);
+      if (opts?.persist === true) {
+        writeGlobalConfig({ theme: { mode, name } });
       }
     },
     [mode],
-  )
+  );
 
   const value = useMemo<ThemeSwitcherContextValue>(
     () => ({
-      theme: theme.colors,
-      syntax: theme.syntax,
-      name: theme.name,
+      allThemes,
       mode,
+      name: theme.name,
       nextTheme,
       prevTheme,
       setTheme: setThemeByName,
-      allThemes,
+      syntax: theme.syntax,
+      theme: theme.colors,
     }),
     [theme, mode, nextTheme, prevTheme, setThemeByName, allThemes],
-  )
+  );
 
   const themeValue = useMemo<ThemeContextValue>(
-    () => ({ theme: theme.colors, syntax: theme.syntax, name: theme.name, mode }),
+    () => ({ mode, name: theme.name, syntax: theme.syntax, theme: theme.colors }),
     [theme, mode],
-  )
+  );
 
   return (
     <ThemeSwitcherContext.Provider value={value}>
       <ThemeContext.Provider value={themeValue}>{children}</ThemeContext.Provider>
     </ThemeSwitcherContext.Provider>
-  )
-}
-
-export function useThemeSwitcher(): ThemeSwitcherContextValue {
-  const ctx = useContext(ThemeSwitcherContext)
-  if (!ctx) throw new Error("useThemeSwitcher must be used within ThemeSwitcherProvider")
-  return ctx
-}
+  );
+};
+
+export const useThemeSwitcher = function useThemeSwitcher(): ThemeSwitcherContextValue {
+  const ctx = useContext(ThemeSwitcherContext);
+  if (!ctx) {
+    throw new Error("useThemeSwitcher must be used within ThemeSwitcherProvider");
+  }
+  return ctx;
+};

package/src/index.ts

@@ -1,15 +1,15 @@
-export { resolveTheme } from "./types.js"
-export type { ThemeJSON, ResolvedTheme } from "./types.js"
+export { resolveTheme } from "./types.js";
+export type { ThemeJSON, ResolvedTheme } from "./types.js";
 
-export { buildSyntaxStyle } from "./syntax-rules.js"
+export { buildSyntaxStyle } from "./syntax-rules.js";
 
-export { loadThemes, getThemeNames, defaultTheme } from "./loader.js"
-export type { Theme } from "./loader.js"
+export { loadThemes, getThemeNames, defaultTheme } from "./loader.js";
+export type { Theme } from "./loader.js";
 
-export { ThemeProvider, ThemeSwitcherProvider, useTheme, useThemeSwitcher } from "./context.js"
-export type { ThemeProviderProps, ThemeSwitcherProviderProps } from "./context.js"
+export { ThemeProvider, ThemeSwitcherProvider, useTheme, useThemeSwitcher } from "./context.js";
+export type { ThemeProviderProps, ThemeSwitcherProviderProps } from "./context.js";
 
-export { ThemePicker } from "./ThemePicker.js"
-export type { ThemePickerEntry } from "./ThemePicker.js"
+export { ThemePicker } from "./theme-picker.js";
+export type { ThemePickerEntry } from "./theme-picker.js";
 
-export { CloseButton } from "./CloseButton.js"
+export { CloseButton } from "./close-button.js";

package/src/loader.ts

@@ -1,32 +1,42 @@
-import { type SyntaxStyle } from "@opentui/core"
-import { readFileSync, readdirSync, existsSync } from "fs"
-import { join, basename, dirname } from "path"
-import { type ThemeJSON, type ResolvedTheme, resolveTheme } from "./types.js"
-import { buildSyntaxStyle } from "./syntax-rules.js"
+import type { SyntaxStyle } from "@opentui/core";
+import { readFileSync, readdirSync, existsSync } from "node:fs";
+import path from "node:path";
+import { resolveTheme } from "./types.js";
+import type { ThemeJSON, ResolvedTheme } from "./types.js";
+import { buildSyntaxStyle } from "./syntax-rules.js";
 
 // ---------------------------------------------------------------------------
 // Theme loading
 // ---------------------------------------------------------------------------
 
 export interface Theme {
-  name: string
-  mode: "dark" | "light"
-  colors: ResolvedTheme
-  syntax: SyntaxStyle
+  name: string;
+  mode: "dark" | "light";
+  colors: ResolvedTheme;
+  syntax: SyntaxStyle;
 }
 
 /** Cache of loaded theme JSONs by name */
-const themeJsonCache = new Map<string, ThemeJSON>()
+const themeJsonCache = new Map<string, ThemeJSON>();
 
-function loadJsonThemesFromDir(dir: string, target: Map<string, ThemeJSON>) {
+const loadJsonThemesFromDir = function loadJsonThemesFromDir(
+  dir: string,
+  target: Map<string, ThemeJSON>,
+) {
   try {
-    if (!existsSync(dir)) return
+    if (!existsSync(dir)) {
+      return;
+    }
     for (const file of readdirSync(dir)) {
-      if (!file.endsWith(".json")) continue
-      const name = basename(file, ".json")
+      if (!file.endsWith(".json")) {
+        continue;
+      }
+      const name = path.basename(file, ".json");
       try {
-        const content = readFileSync(join(dir, file), "utf-8")
-        target.set(name, JSON.parse(content) as ThemeJSON)
+        const content = readFileSync(path.join(dir, file), "utf-8");
+        // Deferred(lint-sweep): replace with schema-based validation of untrusted JSON
+        // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- untrusted external JSON, validated in a later sweep
+        target.set(name, JSON.parse(content) as ThemeJSON);
       } catch {
         // skip invalid files
       }
@@ -34,126 +44,130 @@ function loadJsonThemesFromDir(dir: string, target: Map<string, ThemeJSON>) {
   } catch {
     // dir not readable
   }
-}
+};
 
 /** Load all bundled themes from packages/themes/themes/ */
-function loadBundledThemes(): Map<string, ThemeJSON> {
-  if (themeJsonCache.size > 0) return themeJsonCache
+const loadBundledThemes = function loadBundledThemes(): Map<string, ThemeJSON> {
+  if (themeJsonCache.size > 0) {
+    return themeJsonCache;
+  }
 
   // Bundled themes
-  const bundledDir = join(dirname(new URL(import.meta.url).pathname), "..", "themes")
-  loadJsonThemesFromDir(bundledDir, themeJsonCache)
+  const bundledDir = path.join(path.dirname(new URL(import.meta.url).pathname), "..", "themes");
+  loadJsonThemesFromDir(bundledDir, themeJsonCache);
 
   // XDG config: ~/.config/tooee/themes/
-  const xdgConfig = process.env.XDG_CONFIG_HOME ?? join(process.env.HOME ?? "", ".config")
-  loadJsonThemesFromDir(join(xdgConfig, "tooee", "themes"), themeJsonCache)
+  const xdgConfig = process.env.XDG_CONFIG_HOME ?? path.join(process.env.HOME ?? "", ".config");
+  loadJsonThemesFromDir(path.join(xdgConfig, "tooee", "themes"), themeJsonCache);
 
   // Project-local: search upward for .tooee/themes/
-  let dir = process.cwd()
-  const seen = new Set<string>()
+  let dir = process.cwd();
+  const seen = new Set<string>();
   while (dir && !seen.has(dir)) {
-    seen.add(dir)
-    loadJsonThemesFromDir(join(dir, ".tooee", "themes"), themeJsonCache)
-    const parent = dirname(dir)
-    if (parent === dir) break
-    dir = parent
+    seen.add(dir);
+    loadJsonThemesFromDir(path.join(dir, ".tooee", "themes"), themeJsonCache);
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      break;
+    }
+    dir = parent;
   }
 
-  return themeJsonCache
-}
+  return themeJsonCache;
+};
 
-export function loadThemes(): Map<string, ThemeJSON> {
-  return loadBundledThemes()
-}
+export const loadThemes = function loadThemes(): Map<string, ThemeJSON> {
+  return loadBundledThemes();
+};
 
-export function getThemeNames(): string[] {
-  return Array.from(loadThemes().keys()).sort()
-}
+export const getThemeNames = function getThemeNames(): string[] {
+  return [...loadThemes().keys()].toSorted();
+};
 
 // ---------------------------------------------------------------------------
 // Default theme
 // ---------------------------------------------------------------------------
 
-export const DEFAULT_THEME_NAME = "tokyonight"
-export const DEFAULT_MODE: "dark" | "light" = "dark"
-
-export function buildTheme(name: string, mode: "dark" | "light"): Theme {
-  const themes = loadThemes()
-  const json = themes.get(name)
-  if (!json) {
-    // Fall back to tokyonight, then first available, then hardcoded
-    const fallbackJson = themes.get(DEFAULT_THEME_NAME) ?? themes.values().next().value
-    if (fallbackJson) {
-      const resolved = resolveTheme(fallbackJson, mode)
-      return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
-    }
-    // Absolute fallback — hardcoded Tokyo Night colors
-    return hardcodedDefaultTheme
-  }
-  try {
-    const resolved = resolveTheme(json, mode)
-    return { name, mode, colors: resolved, syntax: buildSyntaxStyle(resolved) }
-  } catch {
-    return hardcodedDefaultTheme
-  }
-}
+export const DEFAULT_THEME_NAME = "tokyonight";
+export const DEFAULT_MODE: "dark" | "light" = "dark";
 
 const hardcodedDefaultTheme: Theme = (() => {
   const colors: ResolvedTheme = {
-    primary: "#7aa2f7",
-    secondary: "#bb9af7",
     accent: "#7dcfff",
-    error: "#f7768e",
-    warning: "#e0af68",
-    success: "#9ece6a",
-    info: "#7aa2f7",
-    text: "#c0caf5",
-    textMuted: "#565f89",
     background: "#1a1b26",
-    backgroundPanel: "#1e2030",
     backgroundElement: "#222436",
-    cursorLine: "#222436",
-    selection: "#1e2030",
+    backgroundPanel: "#1e2030",
     border: "#565f89",
     borderActive: "#737aa2",
     borderSubtle: "#414868",
+    cursorLine: "#222436",
     diffAdded: "#4fd6be",
-    diffRemoved: "#c53b53",
+    diffAddedBg: "#20303b",
+    diffAddedLineNumberBg: "#1b2b34",
     diffContext: "#828bb8",
-    diffHunkHeader: "#828bb8",
+    diffContextBg: "#1e2030",
     diffHighlightAdded: "#b8db87",
     diffHighlightRemoved: "#e26a75",
-    diffAddedBg: "#20303b",
-    diffRemovedBg: "#37222c",
-    diffContextBg: "#1e2030",
+    diffHunkHeader: "#828bb8",
     diffLineNumber: "#222436",
-    diffAddedLineNumberBg: "#1b2b34",
+    diffRemoved: "#c53b53",
+    diffRemovedBg: "#37222c",
     diffRemovedLineNumberBg: "#2d1f26",
-    markdownText: "#c0caf5",
-    markdownHeading: "#bb9af7",
-    markdownLink: "#7aa2f7",
-    markdownLinkText: "#7dcfff",
-    markdownCode: "#9ece6a",
+    error: "#f7768e",
+    info: "#7aa2f7",
     markdownBlockQuote: "#e0af68",
+    markdownCode: "#9ece6a",
+    markdownCodeBlock: "#c0caf5",
     markdownEmph: "#e0af68",
-    markdownStrong: "#ff966c",
+    markdownHeading: "#bb9af7",
     markdownHorizontalRule: "#565f89",
-    markdownListItem: "#7aa2f7",
-    markdownListEnumeration: "#7dcfff",
     markdownImage: "#7aa2f7",
     markdownImageText: "#7dcfff",
-    markdownCodeBlock: "#c0caf5",
+    markdownLink: "#7aa2f7",
+    markdownLinkText: "#7dcfff",
+    markdownListEnumeration: "#7dcfff",
+    markdownListItem: "#7aa2f7",
+    markdownStrong: "#ff966c",
+    markdownText: "#c0caf5",
+    primary: "#7aa2f7",
+    secondary: "#bb9af7",
+    selection: "#1e2030",
+    success: "#9ece6a",
     syntaxComment: "#565f89",
-    syntaxKeyword: "#bb9af7",
     syntaxFunction: "#7aa2f7",
-    syntaxVariable: "#c0caf5",
-    syntaxString: "#9ece6a",
+    syntaxKeyword: "#bb9af7",
     syntaxNumber: "#ff9e64",
-    syntaxType: "#2ac3de",
     syntaxOperator: "#89ddff",
     syntaxPunctuation: "#a9b1d6",
-  }
-  return { name: DEFAULT_THEME_NAME, mode: DEFAULT_MODE, colors, syntax: buildSyntaxStyle(colors) }
-})()
+    syntaxString: "#9ece6a",
+    syntaxType: "#2ac3de",
+    syntaxVariable: "#c0caf5",
+    text: "#c0caf5",
+    textMuted: "#565f89",
+    warning: "#e0af68",
+  };
+  return { colors, mode: DEFAULT_MODE, name: DEFAULT_THEME_NAME, syntax: buildSyntaxStyle(colors) };
+})();
+
+export const defaultTheme: Theme = hardcodedDefaultTheme;
 
-export const defaultTheme: Theme = hardcodedDefaultTheme
+export const buildTheme = function buildTheme(name: string, mode: "dark" | "light"): Theme {
+  const themes = loadThemes();
+  const json = themes.get(name);
+  if (!json) {
+    // Fall back to tokyonight, then first available, then hardcoded
+    const fallbackJson = themes.get(DEFAULT_THEME_NAME) ?? themes.values().next().value;
+    if (fallbackJson) {
+      const resolved = resolveTheme(fallbackJson, mode);
+      return { colors: resolved, mode, name, syntax: buildSyntaxStyle(resolved) };
+    }
+    // Absolute fallback — hardcoded Tokyo Night colors
+    return hardcodedDefaultTheme;
+  }
+  try {
+    const resolved = resolveTheme(json, mode);
+    return { colors: resolved, mode, name, syntax: buildSyntaxStyle(resolved) };
+  } catch {
+    return hardcodedDefaultTheme;
+  }
+};

package/src/syntax-rules.ts

@@ -1,11 +1,11 @@
-import { RGBA, SyntaxStyle } from "@opentui/core"
-import type { ResolvedTheme } from "./types.js"
+import { RGBA, SyntaxStyle } from "@opentui/core";
+import type { ResolvedTheme } from "./types.js";
 
 // ---------------------------------------------------------------------------
 // SyntaxStyle builder
 // ---------------------------------------------------------------------------
 
-function getSyntaxRules(resolved: ResolvedTheme) {
+const getSyntaxRules = function getSyntaxRules(resolved: ResolvedTheme) {
   return [
     { scope: ["default"], style: { foreground: RGBA.fromHex(resolved.text) } },
     { scope: ["prompt"], style: { foreground: RGBA.fromHex(resolved.accent) } },
@@ -22,7 +22,7 @@ function getSyntaxRules(resolved: ResolvedTheme) {
     },
     {
       scope: ["keyword.type"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxType), bold: true, italic: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.syntaxType), italic: true },
     },
     {
       scope: ["keyword.function", "function.method"],
@@ -100,11 +100,11 @@ function getSyntaxRules(resolved: ResolvedTheme) {
         "markup.heading.5",
         "markup.heading.6",
       ],
-      style: { foreground: RGBA.fromHex(resolved.markdownHeading), bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.markdownHeading) },
     },
     {
       scope: ["markup.bold", "markup.strong"],
-      style: { foreground: RGBA.fromHex(resolved.markdownStrong), bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.markdownStrong) },
     },
     {
       scope: ["markup.italic"],
@@ -122,8 +122,8 @@ function getSyntaxRules(resolved: ResolvedTheme) {
     {
       scope: ["markup.raw.inline"],
       style: {
-        foreground: RGBA.fromHex(resolved.markdownCode),
         background: RGBA.fromHex(resolved.background),
+        foreground: RGBA.fromHex(resolved.markdownCode),
       },
     },
     {
@@ -149,21 +149,21 @@ function getSyntaxRules(resolved: ResolvedTheme) {
     { scope: ["float"], style: { foreground: RGBA.fromHex(resolved.syntaxNumber) } },
     {
       scope: ["comment.error"],
-      style: { foreground: RGBA.fromHex(resolved.error), italic: true, bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.error), italic: true },
     },
     {
       scope: ["comment.warning"],
-      style: { foreground: RGBA.fromHex(resolved.warning), italic: true, bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.warning), italic: true },
     },
     {
       scope: ["comment.todo", "comment.note"],
-      style: { foreground: RGBA.fromHex(resolved.info), italic: true, bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.info), italic: true },
     },
     { scope: ["namespace"], style: { foreground: RGBA.fromHex(resolved.syntaxType) } },
     { scope: ["field"], style: { foreground: RGBA.fromHex(resolved.syntaxVariable) } },
     {
       scope: ["type.definition"],
-      style: { foreground: RGBA.fromHex(resolved.syntaxType), bold: true },
+      style: { bold: true, foreground: RGBA.fromHex(resolved.syntaxType) },
     },
     { scope: ["keyword.export"], style: { foreground: RGBA.fromHex(resolved.syntaxKeyword) } },
     { scope: ["attribute", "annotation"], style: { foreground: RGBA.fromHex(resolved.warning) } },
@@ -180,31 +180,31 @@ function getSyntaxRules(resolved: ResolvedTheme) {
     {
       scope: ["diff.plus"],
       style: {
-        foreground: RGBA.fromHex(resolved.diffAdded),
         background: RGBA.fromHex(resolved.diffAddedBg),
+        foreground: RGBA.fromHex(resolved.diffAdded),
       },
     },
     {
       scope: ["diff.minus"],
       style: {
-        foreground: RGBA.fromHex(resolved.diffRemoved),
         background: RGBA.fromHex(resolved.diffRemovedBg),
+        foreground: RGBA.fromHex(resolved.diffRemoved),
       },
     },
     {
       scope: ["diff.delta"],
       style: {
-        foreground: RGBA.fromHex(resolved.diffContext),
         background: RGBA.fromHex(resolved.diffContextBg),
+        foreground: RGBA.fromHex(resolved.diffContext),
       },
     },
-    { scope: ["error"], style: { foreground: RGBA.fromHex(resolved.error), bold: true } },
-    { scope: ["warning"], style: { foreground: RGBA.fromHex(resolved.warning), bold: true } },
+    { scope: ["error"], style: { bold: true, foreground: RGBA.fromHex(resolved.error) } },
+    { scope: ["warning"], style: { bold: true, foreground: RGBA.fromHex(resolved.warning) } },
     { scope: ["info"], style: { foreground: RGBA.fromHex(resolved.info) } },
     { scope: ["debug"], style: { foreground: RGBA.fromHex(resolved.textMuted) } },
-  ]
-}
+  ];
+};
 
-export function buildSyntaxStyle(resolved: ResolvedTheme): SyntaxStyle {
-  return SyntaxStyle.fromTheme(getSyntaxRules(resolved))
-}
+export const buildSyntaxStyle = function buildSyntaxStyle(resolved: ResolvedTheme): SyntaxStyle {
+  return SyntaxStyle.fromTheme(getSyntaxRules(resolved));
+};