From 0c9aed905ab5a96fab398c00a46019fd49cc0d81 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 9 Dec 2022 10:07:32 +0000
Subject: [PATCH] Chore: normalize monaco colors to hex string (#59784)

normalize monaco colors to hex string
---
 .../grafana-ui/src/components/Monaco/theme.ts | 27 ++++++++++++++-----
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/components/Monaco/theme.ts b/packages/grafana-ui/src/components/Monaco/theme.ts
index d073f40377e..d5d14dd3e30 100644
--- a/packages/grafana-ui/src/components/Monaco/theme.ts
+++ b/packages/grafana-ui/src/components/Monaco/theme.ts
@@ -1,3 +1,5 @@
+import tinycolor from 'tinycolor2';
+
 import { GrafanaTheme2 } from '@grafana/data';
 
 import { Monaco, monacoTypes } from './types';
@@ -6,13 +8,24 @@ function getColors(theme?: GrafanaTheme2): monacoTypes.editor.IColors {
   if (theme === undefined) {
     return {};
   } else {
-    return {
+    const colors: Record<string, string> = {
       'editor.background': theme.components.input.background,
       'minimap.background': theme.colors.background.secondary,
     };
+
+    Object.keys(colors).forEach((resultKey) => {
+      colors[resultKey] = normalizeColorForMonaco(colors[resultKey]);
+    });
+    return colors;
   }
 }
 
+function normalizeColorForMonaco(color?: string): string {
+  // monaco needs 6char hex colors
+  // see https://github.com/grafana/grafana/issues/43158
+  return tinycolor(color).toHexString();
+}
+
 // we support calling this without a theme, it will make sure the themes
 // are registered in monaco, even if the colors are not perfect.
 export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
@@ -24,9 +37,9 @@ export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
     colors: colors,
     // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
     rules: [
-      { token: 'predefined', foreground: theme?.visualization.getColorByName('purple') },
-      { token: 'operator', foreground: theme?.visualization.getColorByName('orange') },
-      { token: 'tag', foreground: theme?.visualization.getColorByName('green') },
+      { token: 'predefined', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('purple')) },
+      { token: 'operator', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('orange')) },
+      { token: 'tag', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('green')) },
     ],
   });
 
@@ -36,9 +49,9 @@ export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
     colors: colors,
     // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
     rules: [
-      { token: 'predefined', foreground: theme?.visualization.getColorByName('purple') },
-      { token: 'operator', foreground: theme?.visualization.getColorByName('orange') },
-      { token: 'tag', foreground: theme?.visualization.getColorByName('green') },
+      { token: 'predefined', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('purple')) },
+      { token: 'operator', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('orange')) },
+      { token: 'tag', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('green')) },
     ],
   });
 }