diff --git a/docs/guides/upgrade-guide.md b/docs/guides/upgrade-guide.md
index 5519666d9d..86ee803e15 100644
--- a/docs/guides/upgrade-guide.md
+++ b/docs/guides/upgrade-guide.md
@@ -135,9 +135,10 @@ type: example
```
+
### 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
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx b/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx
index 7460fb0452..0ccb5fb9b6 100644
--- a/packages/ui-source-code-editor/src/SourceCodeEditor/index.tsx
+++ b/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 {
static readonly componentId = 'SourceCodeEditor'
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts
index 564ba59317..2b1fbbccea 100644
--- a/packages/ui-source-code-editor/src/SourceCodeEditor/styles.ts
+++ b/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': {
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts
deleted file mode 100644
index b528a04f27..0000000000
--- a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-import type { Theme } from '@instructure/ui-themes'
-import type { SourceCodeEditorTheme } from '@instructure/shared-types'
-
-/**
- * Generates the theme object for the component from the theme and provided additional information
- * @param {Object} theme The actual theme object.
- * @return {Object} The final theme object with the overrides and component variables
- */
-const generateComponentTheme = (theme: Theme): SourceCodeEditorTheme => {
- const { colors, borders, typography, spacing } = theme
-
- const componentVariables: SourceCodeEditorTheme = {
- fontFamily: typography?.fontFamilyMonospace,
- fontSize: typography?.fontSizeSmall,
- background: colors?.contrasts?.white1010,
- color: colors?.contrasts?.grey125125,
- gutterBackground: colors?.contrasts?.grey1111,
- borderWidth: borders?.widthSmall,
- borderColor: colors?.contrasts?.grey3045,
- borderRadius: borders?.radiusMedium,
- focusBorderColor: colors?.contrasts?.blue4570,
- horizontalPadding: spacing?.xSmall,
- verticalPadding: spacing?.xxSmall
- }
-
- return {
- ...componentVariables
- }
-}
-
-export default generateComponentTheme