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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 7 deletions
Show Stats 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 { 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')) },
],
});
}