New Logs Panel: highlighting improvements (#108858)

* LogLine: emphasize values over keys

* LogLine: extend clickable area

* Revert "LogLine: extend clickable area"

This reverts commit 7e6906312c.
This commit is contained in:
Matias Chomicki 2025-07-29 17:53:30 +02:00 committed by GitHub
parent 41319f90bb
commit dd6a3ecd62
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 5 additions and 5 deletions

View File

@ -372,15 +372,16 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
debug: '#6E9FFF', debug: '#6E9FFF',
trace: '#6ed0e0', trace: '#6ed0e0',
info: '#6CCF8E', info: '#6CCF8E',
metadata: theme.colors.text.primary, metadata: theme.colors.text.secondary,
parsedField: theme.colors.text.primary, default: theme.colors.text.primary,
parsedField: theme.colors.text.secondary,
}; };
const hoverColor = tinycolor(theme.colors.background.canvas).darken(5).toRgbString(); const hoverColor = tinycolor(theme.colors.background.canvas).darken(5).toRgbString();
return { return {
logLine: css({ logLine: css({
color: tinycolor(theme.colors.text.secondary).setAlpha(0.75).toRgbString(), color: colors.default,
display: 'flex', display: 'flex',
gap: theme.spacing(0.5), gap: theme.spacing(0.5),
flexDirection: 'row', flexDirection: 'row',
@ -404,7 +405,7 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
}, },
'& .log-syntax-highlight': { '& .log-syntax-highlight': {
'.log-token-string': { '.log-token-string': {
color: tinycolor(theme.colors.text.secondary).setAlpha(0.75).toRgbString(), color: colors.default,
}, },
'.log-token-duration': { '.log-token-duration': {
color: theme.colors.success.text, color: theme.colors.success.text,
@ -417,7 +418,6 @@ export const getStyles = (theme: GrafanaTheme2, virtualization?: LogLineVirtuali
}, },
'.log-token-key': { '.log-token-key': {
color: colors.parsedField, color: colors.parsedField,
opacity: 0.9,
fontWeight: theme.typography.fontWeightMedium, fontWeight: theme.typography.fontWeightMedium,
}, },
'.log-token-json-key': { '.log-token-json-key': {