refactor: split ui options into files

package.json

@@ -190,8 +190,8 @@
     "react-dom": "^18.2.0",
     "shikiji": "^0.6.10",
     "storybook": "^7.5.1",
-    "ts-node": "^10.9.1",
     "tsup": "^7.2.0",
+    "tsx": "^3.14.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.0"
   },
@@ -204,14 +204,14 @@
     "build-storybook": "storybook build",
     "chromatic": "chromatic --exit-zero-on-changes --exit-once-uploaded --project-token chpt_e3cba49738d7554",
     "compile": "tsup",
-    "compile:theme": "ts-node src/hooks/generateThemes.ts",
+    "compile:theme": "tsx src/hooks/generateThemes.ts",
     "dev": "DEBUG=1 yarn build",
     "lint": "eslint . --ext .ts",
     "package": "vsce package --allow-star-activation --yarn",
     "postbuild": "prettier -w ./themes",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",
-    "update-types": "ts-node src/hooks/updateVSCtypes.ts"
+    "update-types": "tsx src/hooks/updateVSCtypes.ts"
   },
   "packageManager": "[email protected]"
 }

src/hooks/generateThemes.ts

@@ -2,8 +2,8 @@ import * as fs from "fs/promises";
 import * as path from "path";
 import { variants } from "@catppuccin/palette";
 
-import { compileTheme, defaultOptions } from "../theme";
-import type { CatppuccinFlavor } from "../types";
+import { compileTheme, defaultOptions } from "@/theme";
+import type { CatppuccinFlavor } from "@/types";
 
 const themeDir = path.join(__dirname, "../../themes");
 const flavors = Object.keys(variants) as CatppuccinFlavor[];

src/theme/extensions/error-lens.ts

@@ -1,5 +1,5 @@
-import type { ErrorLensColors, ThemeContext } from "../../types";
-import { opacity } from "../utils";
+import type { ErrorLensColors, ThemeContext } from "@/types";
+import { opacity } from "@/theme/utils";
 
 export default function colors(
   context: ThemeContext,

src/theme/extensions/gitlens.ts

@@ -1,5 +1,5 @@
-import type { GitLensColors, ThemeContext } from "../../types";
-import { opacity, shade, transparent } from "../utils";
+import type { GitLensColors, ThemeContext } from "@/types";
+import { opacity, shade, transparent } from "@/theme/utils";
 
 export default function colors(context: ThemeContext): Partial<GitLensColors> {
   const { palette, options } = context;

src/theme/extensions/index.ts

@@ -1,4 +1,4 @@
-import type { ThemeContext } from "../../types";
+import type { ThemeContext } from "@/types";
 import errorLens from "./error-lens";
 import gitLens from "./gitlens";
 

src/theme/index.ts

@@ -5,7 +5,7 @@ import type {
   CatppuccinPalette,
   ThemeContext,
   ThemeOptions,
-} from "../types";
+} from "@/types";
 import { getTokenColors } from "./tokenColors";
 import { getSemanticTokens } from "./semanticTokens";
 import { getUiColors } from "./uiColors";

src/theme/semanticTokens.ts

@@ -1,4 +1,4 @@
-import type { SemanticTokens, ThemeContext } from "../types";
+import type { SemanticTokens, ThemeContext } from "@/types";
 
 export const getSemanticTokens = (context: ThemeContext): SemanticTokens => {
   const { palette } = context;

src/theme/tokenColors.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 import tokens from "./tokens";
 
 export const getTokenColors = (context: ThemeContext): TextmateColors => {

src/theme/tokens/cpp.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/cs.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/css.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/data.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/diff.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/dotenv.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/gdscript.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/golang.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/graphql.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/html.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/index.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 import cpp from "./cpp";
 import cs from "./cs";

src/theme/tokens/java.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/javascript.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/julia.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/latex.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/lua.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/markdown.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/nix.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/php.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/python.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/rust.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/tokens/shell.ts

@@ -1,4 +1,4 @@
-import type { TextmateColors, ThemeContext } from "../../types";
+import type { TextmateColors, ThemeContext } from "@/types";
 
 const tokens = (context: ThemeContext): TextmateColors => {
   const { palette } = context;

src/theme/ui/brackets.ts

@@ -0,0 +1,64 @@
+import { shade } from "@/theme/utils";
+import { ThemeContext, WorkbenchColors } from "@/types";
+
+type PickStartsWith<T extends object, S extends string> = {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  [K in keyof T as K extends `${S}${infer R}` ? K : never]: T[K];
+};
+
+type BracketHLs = keyof PickStartsWith<
+  WorkbenchColors,
+  "editorBracketHighlight"
+>;
+
+const brackets = (context: ThemeContext): Record<BracketHLs, string> => {
+  const { isLatte, options, palette } = context;
+
+  // invert the shade if current theme is latte
+  const L = isLatte ? -1 : 1;
+  const styles = {
+    rainbow: {
+      "editorBracketHighlight.foreground1": palette.red,
+      "editorBracketHighlight.foreground2": palette.peach,
+      "editorBracketHighlight.foreground3": palette.yellow,
+      "editorBracketHighlight.foreground4": palette.green,
+      "editorBracketHighlight.foreground5": palette.sapphire,
+      "editorBracketHighlight.foreground6": palette.mauve,
+      "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon,
+    },
+    dimmed: {
+      "editorBracketHighlight.foreground1": shade(palette.red, -0.6 * L),
+      "editorBracketHighlight.foreground2": shade(palette.peach, -0.6 * L),
+      "editorBracketHighlight.foreground3": shade(palette.yellow, -0.6 * L),
+      "editorBracketHighlight.foreground4": shade(palette.green, -0.6 * L),
+      "editorBracketHighlight.foreground5": shade(palette.sapphire, -0.6 * L),
+      "editorBracketHighlight.foreground6": shade(palette.mauve, -0.6 * L),
+      "editorBracketHighlight.unexpectedBracket.foreground": shade(
+        palette.maroon,
+        -0.6 * L,
+      ),
+    },
+    monochromatic: {
+      "editorBracketHighlight.foreground1": palette.subtext1,
+      "editorBracketHighlight.foreground2": palette.subtext0,
+      "editorBracketHighlight.foreground3": palette.overlay2,
+      "editorBracketHighlight.foreground4": palette.overlay1,
+      "editorBracketHighlight.foreground5": palette.overlay0,
+      "editorBracketHighlight.foreground6": palette.surface2,
+      "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon,
+    },
+    neovim: {
+      "editorBracketHighlight.foreground1": palette.red,
+      "editorBracketHighlight.foreground2": palette.teal,
+      "editorBracketHighlight.foreground3": palette.yellow,
+      "editorBracketHighlight.foreground4": palette.blue,
+      "editorBracketHighlight.foreground5": palette.pink,
+      "editorBracketHighlight.foreground6": palette.flamingo,
+      "editorBracketHighlight.unexpectedBracket.foreground": palette.maroon,
+    },
+  };
+
+  return styles[options.bracketMode];
+};
+
+export default brackets;

src/theme/ui/customNames.ts

@@ -0,0 +1,59 @@
+import { CatppuccinPalette, ThemeContext } from "@/types";
+import { opacity } from "@/theme/utils";
+
+type CustomNamedColors = Record<string, string>;
+
+const customNamedColors = (context: ThemeContext): CustomNamedColors => {
+  const { palette, options } = context;
+  const accent = palette[options.accent];
+
+  return {
+    ...Object.entries({
+      // collect the options, overwrite the "all" config with the current palette config
+      ...options.customUIColors.all,
+      ...options.customUIColors[palette.name],
+    })
+      .map(([k, v]) => {
+        // deal with accents
+        if (v.startsWith("accent")) {
+          const entry = v.split(" ");
+          if (entry.length !== 1) {
+            return {
+              [k]: opacity(accent, Number(entry[1])),
+            };
+          } else {
+            return {
+              [k]: accent,
+            };
+          }
+        }
+
+        // allow custom hex colors
+        if (v.startsWith("#")) {
+          return {
+            [k]: v,
+          };
+        }
+
+        //check if the entry is a "color opacity" mapping
+        const entry = v.split(" ");
+        if (entry.length !== 1) {
+          // call the opacity function
+          v = opacity(
+            palette[entry[0] as keyof CatppuccinPalette],
+            Number(entry[1]),
+          );
+        } else {
+          // resolve to the palette color
+          v = palette[v as keyof CatppuccinPalette];
+        }
+
+        return {
+          [k]: v,
+        };
+      })
+      .reduce((prev, cur) => ({ ...prev, ...cur }), {}),
+  };
+};
+
+export default customNamedColors;

src/theme/ui/index.ts

@@ -0,0 +1,15 @@
+import { ThemeContext } from "@/types";
+import brackets from "./brackets";
+import workbench from "./workbench";
+
+import customNamedColors from "./customNames";
+
+const uiCustomizations = (context: ThemeContext) => {
+  return {
+    ...brackets(context),
+    ...workbench(context),
+    ...customNamedColors(context),
+  };
+};
+
+export default uiCustomizations;