diff --git a/packages/components/react/src/CodeMirrorEditor/cm-theme.ts b/packages/components/react/src/CodeMirrorEditor/cm-theme.ts index fb129a02f..43b560ab1 100644 --- a/packages/components/react/src/CodeMirrorEditor/cm-theme.ts +++ b/packages/components/react/src/CodeMirrorEditor/cm-theme.ts @@ -128,9 +128,11 @@ export const editorTheme = EditorView.theme({ '.cm-tooltip': { background: 'var(--cm-tooltip-backgroundColor)', borderColor: 'var(--cm-tooltip-borderColor)', + color: 'var(--cm-tooltip-textColor)', }, '.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': { background: 'var(--cm-tooltip-backgroundColorSelected)', + color: 'var(--cm-tooltip-textColorSelected)', }, }); diff --git a/packages/components/react/src/styles/cm.css b/packages/components/react/src/styles/cm.css index 5186a398f..e1bbb1f66 100644 --- a/packages/components/react/src/styles/cm.css +++ b/packages/components/react/src/styles/cm.css @@ -16,16 +16,16 @@ /* Cursor */ --cm-cursor-width: 2px; - --cm-cursor-backgroundColor: var(--tk-elements-editor-cursor-textColor, var(--tk-text-primary)); + --cm-cursor-backgroundColor: var(--tk-elements-editor-cursorColor, var(--tk-text-primary)); /* Matching Brackets */ --cm-matching-bracket: var(--tk-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3)); /* Selection */ - --cm-selection-backgroundColorFocused: var(--tk-elements-editor-selection-backgroundColorFocused, #42b4ff); - --cm-selection-backgroundOpacityFocused: var(--tk-elements-editor-selection-backgroundOpacityFocused, 0.3); - --cm-selection-backgroundColorBlured: var(--tk-elements-editor-selection-backgroundColorBlured, #c9e9ff); - --cm-selection-backgroundOpacityBlured: var(--tk-elements-editor-selection-backgroundOpacityBlured, 0.3); + --cm-selection-backgroundColorFocused: var(--tk-elements-editor-selection-backgroundColor, #42b4ff); + --cm-selection-backgroundOpacityFocused: var(--tk-elements-editor-selection-backgroundOpacity, 0.3); + --cm-selection-backgroundColorBlured: var(--tk-elements-editor-selection-inactiveBackgroundColor, #c9e9ff); + --cm-selection-backgroundOpacityBlured: var(--tk-elements-editor-selection-inactiveBackgroundOpacity, 0.3); /* Panels */ --cm-panels-borderColor: var(--tk-elements-editor-panels-borderColor, var(--tk-elements-app-borderColor)); @@ -77,10 +77,12 @@ --tk-elements-editor-tooltip-backgroundColor, var(--tk-elements-app-backgroundColor) ); + --cm-tooltip-textColor: var(--tk-elements-editor-tooltip-textColor, var(--tk-text-primary)); --cm-tooltip-backgroundColorSelected: var( --tk-elements-editor-tooltip-backgroundColorSelected, var(--tk-background-accent) ); + --cm-tooltip-textColorSelected: var(--tk-elements-editor-tooltip-textColorSelected, var(--tk-text-primary)); --cm-tooltip-borderColor: var(--tk-elements-editor-tooltip-borderColor, var(--tk-elements-app-borderColor)); }