fix(theme): fix some styling for the editor (#100)

Author: SamVerschueren

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)',
   },
 });
 

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));
 }