IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: normalize monaco colors to hex string (#59784)

Browse Source 
normalize monaco colors to hex string
This commit is contained in:
Ashley Harrison
2022-12-09 10:07:32 +00:00
committed by GitHub
parent 10c2bdea3e
commit 0c9aed905a
1 changed files with 20 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
packages/grafana-ui/src/components/Monaco/theme.ts
View File

@@ -1,3 +1,5 @@
import tinycolor from 'tinycolor2';
import { GrafanaTheme2 } from '@grafana/data'; import { GrafanaTheme2 } from '@grafana/data';
import { Monaco, monacoTypes } from './types'; import { Monaco, monacoTypes } from './types';
@@ -6,13 +8,24 @@ function getColors(theme?: GrafanaTheme2): monacoTypes.editor.IColors {
if (theme === undefined) { if (theme === undefined) {
return {}; return {};
} else { } else {
return { const colors: Record<string, string> = {
'editor.background': theme.components.input.background, 'editor.background': theme.components.input.background,
'minimap.background': theme.colors.background.secondary, '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 // we support calling this without a theme, it will make sure the themes
// are registered in monaco, even if the colors are not perfect. // are registered in monaco, even if the colors are not perfect.
export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) { export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
@@ -24,9 +37,9 @@ export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
colors: colors, colors: colors,
// fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math) // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
rules: [ rules: [
{ token: 'predefined', foreground: theme?.visualization.getColorByName('purple') }, { token: 'predefined', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('purple')) },
{ token: 'operator', foreground: theme?.visualization.getColorByName('orange') }, { token: 'operator', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('orange')) },
{ token: 'tag', foreground: theme?.visualization.getColorByName('green') }, { token: 'tag', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('green')) },
], ],
}); });
@@ -36,9 +49,9 @@ export default function defineThemes(monaco: Monaco, theme?: GrafanaTheme2) {
colors: colors, colors: colors,
// fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math) // fallback syntax highlighting for languages that microsoft doesn't handle (ex cloudwatch's metric math)
rules: [ rules: [
{ token: 'predefined', foreground: theme?.visualization.getColorByName('purple') }, { token: 'predefined', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('purple')) },
{ token: 'operator', foreground: theme?.visualization.getColorByName('orange') }, { token: 'operator', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('orange')) },
{ token: 'tag', foreground: theme?.visualization.getColorByName('green') }, { token: 'tag', foreground: normalizeColorForMonaco(theme?.visualization.getColorByName('green')) },
], ],
}); });
} }