-
-
Notifications
You must be signed in to change notification settings - Fork 80
Description
We should make the theme differentiate between const variables and const variables that are all caps / in shouting snake case (const fooBar vs const FOO_BAR). The shouting snake case convention is often used to mark "actual" constant values. Our Helix and Neovim ports highlight the aforementioned example "correctly" since those editors' grammars (https://github.com/nvim-treesitter/nvim-treesitter/blob/42fc28ba918343ebfd5565147a42a26580579482/queries/ecma/highlights.scm#L27-L28, https://github.com/helix-editor/helix/blob/b6ccbddc77bc2e2c2d02cfd5444594e3cc46c938/runtime/queries/ecma/highlights.scm#L249-L254) do distinguish constants in that way. However, currently VS Code's grammar for JavaScript doesn't differentiate that way - tracking upstream microsoft/TypeScript-TmLanguage#645.
| Neovim | Helix | VS Code (current) | VS Code (attempted fix) |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
I attempted a fix by removing our overrides that made constants text instead of peach in specific languages, but since VS Code doesn't yet differentiate it isn't a good change.
diff --git c/packages/catppuccin-vsc/src/theme/semanticTokens.ts i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
index 267c245..6b28820 100644
--- c/packages/catppuccin-vsc/src/theme/semanticTokens.ts
+++ i/packages/catppuccin-vsc/src/theme/semanticTokens.ts
@@ -16,17 +16,6 @@ export const getSemanticTokens = (context: ThemeContext): SemanticTokens => {
"variable.typeHint:python": { foreground: palette.yellow },
"function.decorator:python": { foreground: palette.peach },
- // ignore `const`s being peach in JS & TS
- "variable.readonly:javascript": { foreground: palette.text },
- "variable.readonly:typescript": { foreground: palette.text },
- "property.readonly:javascript": { foreground: palette.text },
- "property.readonly:typescript": { foreground: palette.text },
- // ditto for React
- "variable.readonly:javascriptreact": { foreground: palette.text },
- "variable.readonly:typescriptreact": { foreground: palette.text },
- "property.readonly:javascriptreact": { foreground: palette.text },
- "property.readonly:typescriptreact": { foreground: palette.text },
-
// Scala, also dealing with constants
"variable.readonly:scala": { foreground: palette.text },
diff --git c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
index 8e8d67f..6850e96 100644
--- c/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
+++ i/packages/catppuccin-vsc/src/theme/tokens/javascript.ts
@@ -12,13 +12,8 @@ const tokens = (context: ThemeContext): TextmateColors => {
},
},
{
- name: "JS/TS constants & properties",
- scope: [
- "variable.other.constant.js",
- "variable.other.constant.ts",
- "variable.other.property.js",
- "variable.other.property.ts",
- ],
+ name: "JS/TS properties",
+ scope: ["variable.other.property.js", "variable.other.property.ts"],
settings: {
foreground: palette.text,
},


