[v12] feat(ui-source-code-editor): rework SourceCodeEditor

[ToMESSKa]

INSTUI-4879

ISSUE:
SourceCodeEditor needs to be migrated to the new theming system

TEST PLAN:

• check if all tokens are used in styles.ts
• check if the component works the same as before, should no visual change compared to v11
• check if focus ring works the same

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-01-23 14:59 UTC

[adamlobler]

There are a lot of raw hex values in this component that doesn't have good contrast in the dark theme, I would add these as tokens if you agree..

[matyasf]

The contrast looks very bad in dark theme when something is selected:

I think you are setting the selection color wrong, this works for me: https://stackoverflow.com/a/78037621/319473

'.cm-selectionBackground, .cm-editor::selection': {
    backgroundColor: componentTheme.focusedSelectionBackgroundColor + ' !important'
      },

[ToMESSKa]

The contrast looks very bad in dark theme when something is selected:

I think you are setting the selection color wrong, this works for me: https://stackoverflow.com/a/78037621/319473

'.cm-selectionBackground, .cm-editor::selection': {
    backgroundColor: componentTheme.focusedSelectionBackgroundColor + ' !important'
      },

Thanks, I fixed this, please check.

[matyasf]

looks good now!

[adamlobler]

The activeLineColor should be applied that we discussed on slack, but other than that, I think it’s okay

[ToMESSKa]

The activeLineColor should be applied that we discussed on slack, but other than that, I think it’s okay

@adamlobler Updated it with the activeLineColor token, please check it

[adamlobler]

Just one minor thing, the cursor is still black in dark mode as well, but if you insert this style it should work:

'&.cm-focused .cm-cursor': { borderLeftColor: componentTheme.color },

[ToMESSKa]

Just one minor thing, the cursor is still black in dark mode as well, but if you insert this style it should work:

'&.cm-focused .cm-cursor': { borderLeftColor: componentTheme.color },
@adamlobler Thanks, I fixed this.

[adamlobler]

Perfect 🙌 Thank you!