feat: highlight liquid objects/variables as pink

packages/catppuccin-vsc-storybook/stories/CodePreview.stories.ts

@@ -28,6 +28,7 @@ const highlighter = await getHighlighter({
     "json",
     "jsx",
     "kotlin",
+    "liquid",
     "lua",
     "markdown",
     "nix",
@@ -131,6 +132,10 @@ export const JavaScript = await StoryBuilder({
 export const Json = await StoryBuilder({ lang: "json", file: "json.json" });
 export const JSX = await StoryBuilder({ lang: "jsx", file: "jsx.jsx" });
 export const Kotlin = await StoryBuilder({ lang: "kotlin", file: "kotlin.kt" });
+export const Liquid = await StoryBuilder({
+  lang: "liquid",
+  file: "liquid.liquid",
+});
 export const Lua = await StoryBuilder({ lang: "lua", file: "lua.lua" });
 export const Markdown = await StoryBuilder({
   lang: "markdown",

packages/catppuccin-vsc/src/theme/tokens/index.ts

@@ -14,6 +14,7 @@ import java from "./java";
 import javascript from "./javascript";
 import julia from "./julia";
 import latex from "./latex";
+import liquid from "./liquid";
 import lua from "./lua";
 import markdown from "./markdown";
 import nix from "./nix";
@@ -296,6 +297,7 @@ export default function tokens(context: ThemeContext): TextmateColors {
       javascript,
       julia,
       latex,
+      liquid,
       lua,
       markdown,
       nix,

packages/catppuccin-vsc/src/theme/tokens/liquid.ts

@@ -0,0 +1,17 @@
+import type { TextmateColors, ThemeContext } from "@/types";
+
+const tokens = (context: ThemeContext): TextmateColors => {
+  const { palette } = context;
+
+  return [
+    {
+      name: "Liquid Builtin Objects & User Defined Variables",
+      scope: "variable.language.liquid",
+      settings: {
+        foreground: palette.pink,
+      },
+    },
+  ];
+};
+
+export default tokens;