Merge pull request #19633 from overleaf/dp-tooltip-colour

Update styling for math-preview tooltip in dark editor themes

GitOrigin-RevId: bfd02793d1438cfeee173210f57b1fbb4c28ccc3
This commit is contained in:
David 2024-08-05 14:22:23 +01:00 committed by Copybot
parent 34e7f3182b
commit d2289379cd
2 changed files with 20 additions and 4 deletions

View file

@ -1,4 +1,5 @@
import { import {
EditorView,
repositionTooltips, repositionTooltips,
showTooltip, showTooltip,
Tooltip, Tooltip,
@ -29,7 +30,9 @@ export const mathPreview = (enabled: boolean): Extension => {
return [] return []
} }
return mathPreviewConf.of(enabled ? mathPreviewStateField : []) return mathPreviewConf.of(
enabled ? [mathPreviewTheme, mathPreviewStateField] : []
)
} }
const mathPreviewConf = new Compartment() const mathPreviewConf = new Compartment()
@ -162,3 +165,19 @@ const buildTooltipContent = (
return element return element
} }
/**
* Styles for the preview tooltip
*/
const mathPreviewTheme = EditorView.baseTheme({
'&light .ol-cm-math-tooltip': {
boxShadow: '0px 2px 4px 0px #1e253029',
border: '1px solid #e7e9ee !important',
backgroundColor: 'white !important',
},
'&dark .ol-cm-math-tooltip': {
boxShadow: '0px 2px 4px 0px #1e253029',
border: '1px solid #2f3a4c !important',
backgroundColor: '#1b222c !important',
},
})

View file

@ -1,8 +1,5 @@
.ol-cm-math-tooltip { .ol-cm-math-tooltip {
box-shadow: 0px 2px 4px 0px #1e253029;
border: 1px solid #e7e9ee !important;
border-radius: 4px; border-radius: 4px;
background-color: white !important;
max-height: 400px; max-height: 400px;
max-width: 800px; max-width: 800px;
overflow: auto; overflow: auto;