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

docs/guides/upgrade-guide.md

@@ -135,9 +135,10 @@ type: example
   <TextInput renderLabel="Name" placeholder="Doe, John Doe"/>
 </InstUISettingsProvider>
 ```
+
 ### Breadcrumb
 
-#### New tokens 
+#### New tokens
 
 - gapSm - Gap spacing for small size breadcrumbs
 - gapMd - Gap spacing for medium size breadcrumbs
@@ -255,6 +256,10 @@ type: example
 - theme variable `invalidAsteriskColor` is now removed
 - `error` or `success` messages are no longer displayed when the component is '`readOnly` or `disabled`
 
+### SourceCodeEdtor
+
+- theme variable `focusBorderColor` is now removed and now uses `sharedTokens.focusOutline.infoColor`
+
 ### TextInput
 
 - theme variable `requiredInvalidColor` is now removed

packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx

@@ -87,12 +87,11 @@ import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils'
 import { ScreenReaderContent } from '@instructure/ui-a11y-content'
 import { textDirectionContextConsumer } from '@instructure/ui-i18n'
 
-import { withStyleRework as withStyle } from '@instructure/emotion'
+import { withStyle } from '@instructure/emotion'
 
 import customSearch from './SearchPanel'
 
 import generateStyle from './styles'
-import generateComponentTheme from './theme'
 
 import { rtlHorizontalArrowKeymap } from './customKeybinding'
 
@@ -105,7 +104,7 @@ category: components
 ---
 **/
 @withDeterministicId()
-@withStyle(generateStyle, generateComponentTheme)
+@withStyle(generateStyle)
 @textDirectionContextConsumer()
 class SourceCodeEditor extends Component<SourceCodeEditorProps> {
   static readonly componentId = 'SourceCodeEditor'

packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts

@@ -24,7 +24,7 @@
 
 import { tags } from '@lezer/highlight'
 
-import type { SourceCodeEditorTheme } from '@instructure/shared-types'
+import type { NewComponentTypes, SharedTokens } from '@instructure/ui-themes'
 import type { SourceCodeEditorProps, SourceCodeEditorStyle } from './props'
 
 /**
@@ -37,8 +37,9 @@ import type { SourceCodeEditorProps, SourceCodeEditorStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  componentTheme: SourceCodeEditorTheme,
-  props: SourceCodeEditorProps
+  componentTheme: NewComponentTypes['SourceCodeEditor'],
+  props: SourceCodeEditorProps,
+  sharedTokens: SharedTokens
 ): SourceCodeEditorStyle => {
   const { attachment, height, width } = props
 
@@ -121,7 +122,7 @@ const generateStyle = (
         // are, for some reason, drawn behind the element content, which
         // will cause things like the active line background to cover
         // the outline (#297).
-        outline: `${componentTheme?.borderWidth} solid ${componentTheme?.focusBorderColor}`
+        outline: `${componentTheme?.borderWidth} solid ${sharedTokens.focusOutline.infoColor}`
       },
 
       '.cm-content': {