fix(theme): fix some styling for the editor #100
Conversation
|
|
|
| }, | ||
| '.cm-tooltip.cm-tooltip-autocomplete ul li[aria-selected]': { | ||
| background: 'var(--cm-tooltip-backgroundColorSelected)', | ||
| color: 'var(--cm-tooltip-textColorSelected)', |
There was a problem hiding this comment.
It was not possible to set the text color for the text in the tooltip.
| /* 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)); |
There was a problem hiding this comment.
As discussed, cursorColor makes more sense.
Deploying tutorialkit-demo-page with
|
| Latest commit: |
f2bec5f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://3e3c20b3.tutorialkit-demo-page.pages.dev |
| Branch Preview URL: | https://fix-theming-editor.tutorialkit-demo-page.pages.dev |
| --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); |
There was a problem hiding this comment.
I renamed these to match a bit closer to how the terminal does the styling for the selection (--tk-elements-terminal-selection-backgroundColor). And renamed blured to inactive which matches more closely with others which we named activeBackgroundColor for instance.
Feel free to make suggestions, or we can also revert them.
While documenting the editor, I found some things that couldn't be styled. And I also renamed a couple. I'll comment inline.