1 files changed, 35 insertions, 3 deletions

diff --git a/subprojects/frontend/src/editor/EditorTheme.ts b/subprojects/frontend/src/editor/EditorTheme.ts
index 9f560dfb..1cad4a36 100644
--- a/subprojects/frontend/src/editor/EditorTheme.ts
+++ b/subprojects/frontend/src/editor/EditorTheme.ts
@@ -1,5 +1,5 @@
 /*
- * SPDX-FileCopyrightText: 2021-2023 The Refinery Authors <https://refinery.tools/>
+ * SPDX-FileCopyrightText: 2021-2024 The Refinery Authors <https://refinery.tools/>
  *
  * SPDX-License-Identifier: EPL-2.0
  */
@@ -8,10 +8,35 @@ import cancelSVG from '@material-icons/svg/svg/cancel/baseline.svg?raw';
 import expandMoreSVG from '@material-icons/svg/svg/expand_more/baseline.svg?raw';
 import infoSVG from '@material-icons/svg/svg/info/baseline.svg?raw';
 import warningSVG from '@material-icons/svg/svg/warning/baseline.svg?raw';
-import { alpha, styled, type CSSObject } from '@mui/material/styles';
+import {
+  alpha,
+  styled,
+  type CSSObject,
+  type Theme,
+} from '@mui/material/styles';
+import { range } from 'lodash-es';
 
 import svgURL from '../utils/svgURL';
 
+function createTypeHashStyles(
+  theme: Theme,
+  colorIdentifiers: boolean,
+): CSSObject {
+  if (!colorIdentifiers) {
+    return {};
+  }
+  const result: CSSObject = {};
+  range(theme.palette.highlight.typeHash.length).forEach((i) => {
+    result[`.tok-problem-typeHash-${i}`] = {
+      '&, .tok-typeName': {
+        color: theme.palette.highlight.typeHash[i]?.text,
+        fontWeight: theme.typography.fontWeightEditorTypeHash,
+      },
+    };
+  });
+  return result;
+}
+
 export default styled('div', {
   name: 'EditorTheme',
   shouldForwardProp: (propName) =>
@@ -19,7 +44,8 @@ export default styled('div', {
 })<{
   showLineNumbers: boolean;
   showActiveLine: boolean;
-}>(({ theme, showLineNumbers, showActiveLine }) => {
+  colorIdentifiers: boolean;
+}>(({ theme, showLineNumbers, showActiveLine, colorIdentifiers }) => {
   const editorFontStyle: CSSObject = {
     ...theme.typography.editor,
     fontWeight: theme.typography.fontWeightEditorNormal,
@@ -114,6 +140,11 @@ export default styled('div', {
     },
     '.tok-problem-error': {
       '&, & .tok-typeName': {
+        color: theme.palette.highlight.comment,
+      },
+    },
+    '.tok-invalid': {
+      '&, & .tok-typeName': {
         color: theme.palette.error.main,
       },
     },
@@ -124,6 +155,7 @@ export default styled('div', {
         fontStyle: 'normal',
       },
     },
+    ...createTypeHashStyles(theme, colorIdentifiers),
   };
 
   const matchingStyle: CSSObject = {