From 465e95fc8fe41adfa6b2a4c78f4b0a246eddf970 Mon Sep 17 00:00:00 2001 From: Luke Cotter <4013877+lukecotter@users.noreply.github.com> Date: Mon, 30 Mar 2026 14:06:42 +0100 Subject: [PATCH] feat: use VS Code hover widget colors for tooltip backgrounds Switch timeline and data grid tooltips from generic editor/widget background colors to the more specific editorHoverWidget theme variables, improving visual consistency with VS Code's native --- .../timeline/components/TimelineView.ts | 14 ++++++++++ .../optimised/rendering/tooltip-utils.ts | 6 ++--- .../features/timeline/styles/timeline.css.ts | 8 +++--- log-viewer/src/tabulator/style/DataGrid.scss | 26 ++++++++++--------- 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/log-viewer/src/features/timeline/components/TimelineView.ts b/log-viewer/src/features/timeline/components/TimelineView.ts index 608c775f..ff77aec2 100644 --- a/log-viewer/src/features/timeline/components/TimelineView.ts +++ b/log-viewer/src/features/timeline/components/TimelineView.ts @@ -89,6 +89,20 @@ export class TimelineView extends LitElement { --tl-widget-border: var(--vscode-editorWidget-border, #454545); --tl-widget-foreground: var(--vscode-editorWidget-foreground, #cccccc); + /* Hover/tooltip */ + --tl-hover-background: var( + --vscode-editorHoverWidget-background, + var(--vscode-editorWidget-background, #252526) + ); + --tl-hover-border: var( + --vscode-editorHoverWidget-border, + var(--vscode-editorWidget-border, #454545) + ); + --tl-hover-foreground: var( + --vscode-editorHoverWidget-foreground, + var(--vscode-editorWidget-foreground, #cccccc) + ); + /* Text */ --tl-description-foreground: var(--vscode-descriptionForeground, #999); --tl-font-family: var(--vscode-font-family, sans-serif); diff --git a/log-viewer/src/features/timeline/optimised/rendering/tooltip-utils.ts b/log-viewer/src/features/timeline/optimised/rendering/tooltip-utils.ts index f1192838..35b86bf3 100644 --- a/log-viewer/src/features/timeline/optimised/rendering/tooltip-utils.ts +++ b/log-viewer/src/features/timeline/optimised/rendering/tooltip-utils.ts @@ -39,11 +39,11 @@ export const PERCENT_THRESHOLD_BREACH = 1.0; */ export const TOOLTIP_CSS = { /** Background color */ - background: 'var(--tl-widget-background, #252526)', + background: 'var(--tl-hover-background, #252526)', /** Border color */ - border: 'var(--tl-widget-border, #454545)', + border: 'var(--tl-hover-border, #454545)', /** Text color */ - foreground: 'var(--tl-widget-foreground, #e3e3e3)', + foreground: 'var(--tl-hover-foreground, #e3e3e3)', /** Description/secondary text color */ descriptionForeground: 'var(--tl-description-foreground, #999)', /** Muted description text color */ diff --git a/log-viewer/src/features/timeline/styles/timeline.css.ts b/log-viewer/src/features/timeline/styles/timeline.css.ts index a914ea98..eb88882b 100644 --- a/log-viewer/src/features/timeline/styles/timeline.css.ts +++ b/log-viewer/src/features/timeline/styles/timeline.css.ts @@ -18,8 +18,8 @@ export const tooltipStyles = ` padding: 5px; border-radius: 4px; border-left: 4px solid; - background-color: var(--tl-editor-background); - color: var(--tl-editor-foreground); + background-color: var(--tl-hover-background); + color: var(--tl-hover-foreground); font-family: monospace; font-size: 0.92rem; pointer-events: auto; @@ -47,6 +47,8 @@ export const tooltipStyles = ` white-space: nowrap; text-overflow: ellipsis; padding-right: 12px; + color: var(--tl-description-foreground, #999); + opacity: 0.9; } .tooltip-value { @@ -54,9 +56,7 @@ export const tooltipStyles = ` font-variant-numeric: tabular-nums; font-weight: 500; font-family: monospace; - opacity: 0.9; text-align: right; white-space: pre-wrap; - color: var(--tl-description-foreground, #999) } `; diff --git a/log-viewer/src/tabulator/style/DataGrid.scss b/log-viewer/src/tabulator/style/DataGrid.scss index 240b3afa..bb925149 100644 --- a/log-viewer/src/tabulator/style/DataGrid.scss +++ b/log-viewer/src/tabulator/style/DataGrid.scss @@ -38,6 +38,7 @@ $footerTextColor: var(--vscode-editor-foreground); //footer text color $footerBorderColor: transparent; //footer border color $footerSeparatorColor: transparent; //footer bottom separator color $footerActiveColor: #d00 !default; //footer bottom active text color + @import '~tabulator-tables/src/scss/tabulator.scss'; @import '../editors/MinMax'; @import '../format/Progress'; @@ -102,18 +103,6 @@ $footerActiveColor: #d00 !default; //footer bottom active text color font-size: var(--vscode-editor-font-size, 0.9em); } - .tabulator-tooltip { - // Match timeline tooltip styling for consistency - background: var(--vscode-editor-background); - color: var(--vscode-editor-foreground); - overflow-wrap: anywhere; - font-family: monospace; - font-size: 0.92rem; - font-variant-numeric: tabular-nums; - padding: 5px; - border-radius: 4px; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); - } .tabulator-row.tabulator-selected { color: var(--vscode-list-activeSelectionForeground); } @@ -155,6 +144,19 @@ $footerActiveColor: #d00 !default; //footer bottom active text color } } +.tabulator-tooltip { + // Match timeline tooltip styling for consistency + background: var(--vscode-editorHoverWidget-background, var(--vscode-editorWidget-background)); + color: var(--vscode-editorHoverWidget-foreground, var(--vscode-editor-foreground)); + overflow-wrap: anywhere; + font-family: monospace; + font-size: 0.92rem; + font-variant-numeric: tabular-nums; + padding: 5px; + border-radius: 4px; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); +} + .tabulator-edit-list { border-color: var(--vscode-focusBorder, default);