diff --git a/packages/shared-types/src/Colors.ts b/packages/shared-types/src/Colors.ts
index f2efa1ad75..0f58a6b689 100644
--- a/packages/shared-types/src/Colors.ts
+++ b/packages/shared-types/src/Colors.ts
@@ -30,6 +30,7 @@ type Primitives = {
   grey12: string
   grey14: string
   grey24: string
+  grey30: string
   grey45: string
   grey57: string
   grey70: string
@@ -195,6 +196,7 @@ type Contrasts = {
   grey1214: Primitives['grey12'] | Primitives['grey14']
   grey1424: Primitives['grey14'] | Primitives['grey24']
   grey2424: Primitives['grey24']
+  grey3045: Primitives['grey30'] | Primitives['grey45']
   grey4570: Primitives['grey45'] | Primitives['grey70']
   grey5782: Primitives['grey57'] | Primitives['grey82']
   grey100100: Primitives['grey100']
diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 2096f19444..3c26031b36 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -343,6 +343,8 @@ export type ToggleFacadeTheme = {
   labelFontSizeSmall: Typography['fontSizeSmall']
   labelFontSizeMedium: Typography['fontSizeMedium']
   labelFontSizeLarge: Typography['fontSizeLarge']
+  uncheckedIconBorderColor: Colors['contrasts']['grey3045']
+  checkedIconBorderColor: Colors['contrasts']['green5782']
 }
 
 export type CodeEditorTheme = {
@@ -534,6 +536,8 @@ export type DrilldownTheme = {
   headerTitleFontWeight: Typography['fontWeightBold']
   headerActionColor: Colors['contrasts']['blue4570']
   labelInfoPadding: Spacing['small']
+  labelInfoColor: Colors['contrasts']['grey5782']
+  borderColor: Colors['contrasts']['grey3045']
 }
 
 export type FileDropTheme = {
@@ -960,6 +964,10 @@ export type PillTheme = {
   borderRadius: string | 0
 }
 
+export type PopoverTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type PositionTheme = {
   zIndex: Stacking['topmost']
 }
@@ -1417,6 +1425,10 @@ export type ToggleDetailsTheme = {
   filledPadding: Spacing['small']
 }
 
+export type ToggleGroupTheme = {
+  borderColor: Colors['contrasts']['grey3045']
+}
+
 export type TooltipTheme = {
   fontFamily: Typography['fontFamily']
   fontWeight: Typography['fontWeightNormal']
@@ -1586,6 +1598,7 @@ export type ContextViewTheme = {
   arrowBorderColor: Colors['contrasts']['grey1214']
   arrowBackgroundColorInverse: Colors['contrasts']['grey125125']
   arrowBorderColorInverse: string
+  borderColorForView: string
 }
 
 export type ViewTheme = {
@@ -1739,6 +1752,7 @@ export interface ThemeVariables {
   Pages: PagesTheme
   PaginationPageInput: PaginationPageInputTheme
   'Pagination.PageInput': PaginationPageInputTheme
+  Popover: PopoverTheme
   Position: PositionTheme
   Pill: PillTheme
   ProgressBar: ProgressBarTheme
@@ -1775,6 +1789,8 @@ export interface ThemeVariables {
   TextArea: TextAreaTheme
   TextInput: TextInputTheme
   ToggleDetails: ToggleDetailsTheme
+  ToggleGroup: ToggleGroupTheme
+  'ToggleDetails.ToggleGroup': ToggleGroupTheme
   Tooltip: TooltipTheme
   TopNavBarBrand: TopNavBarBrandTheme
   'TopNavBar.Brand': TopNavBarBrandTheme
diff --git a/packages/ui-avatar/src/Avatar/theme.ts b/packages/ui-avatar/src/Avatar/theme.ts
index 746a011edc..c1605f67a0 100644
--- a/packages/ui-avatar/src/Avatar/theme.ts
+++ b/packages/ui-avatar/src/Avatar/theme.ts
@@ -38,7 +38,7 @@ const generateComponentTheme = (theme: Theme): AvatarTheme => {
     background: colors?.contrasts?.white1010,
     borderWidthSmall: borders?.widthSmall,
     borderWidthMedium: borders?.widthMedium,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     boxShadowColor: alpha('#2d3b45', 12),
     boxShadowBlur: '1rem',
     fontFamily: typography?.fontFamily,
diff --git a/packages/ui-buttons/src/BaseButton/theme.ts b/packages/ui-buttons/src/BaseButton/theme.ts
index 0fc2735b17..9cc50fa34d 100644
--- a/packages/ui-buttons/src/BaseButton/theme.ts
+++ b/packages/ui-buttons/src/BaseButton/theme.ts
@@ -79,10 +79,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     primaryHoverBackground: colors?.contrasts?.blue5782,
     primaryActiveBackground: colors?.contrasts?.blue5782,
     primaryActiveBoxShadow: `${activeShadow} ${colors?.contrasts?.white1010}`,
-    primaryGhostColor: colors?.contrasts?.blue4570,
+    primaryGhostColor: colors?.contrasts?.blue5782,
     primaryGhostBorderColor: colors?.contrasts?.blue4570,
     primaryGhostBackground: 'transparent',
-    primaryGhostHoverBackground: alpha(colors?.contrasts?.blue4570, 10),
+    primaryGhostHoverBackground: colors?.contrasts?.blue1212,
     primaryGhostActiveBackground: 'transparent',
     primaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
       colors?.contrasts?.blue1212,
@@ -98,7 +98,7 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     secondaryGhostColor: colors?.contrasts?.grey125125,
     secondaryGhostBorderColor: colors?.contrasts?.grey125125,
     secondaryGhostBackground: 'transparent',
-    secondaryGhostHoverBackground: alpha(colors?.contrasts?.grey125125, 10),
+    secondaryGhostHoverBackground: colors?.contrasts?.grey1111,
     secondaryGhostActiveBackground: 'transparent',
     secondaryGhostActiveBoxShadow: `${activeShadow} ${alpha(
       colors?.contrasts?.grey125125,
diff --git a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
index 540ed67a6a..5e7f2fdcd6 100644
--- a/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
+++ b/packages/ui-checkbox/src/Checkbox/CheckboxFacade/theme.ts
@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): CheckboxFacadeTheme => {
   const componentVariables: CheckboxFacadeTheme = {
     color: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
     background: colors?.contrasts?.white1010,
     marginRight: spacing?.xSmall,
diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts
index 3766579ced..373c5e5fda 100644
--- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts
+++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/styles.ts
@@ -158,13 +158,16 @@ const generateStyle = (
       '&::before': {
         content: '""',
         position: 'absolute',
-        top: componentTheme.borderWidth,
-        left: componentTheme.borderWidth,
-        height: `calc(100% - (${componentTheme.borderWidth} * 2))`,
-        width: `calc(100% - (${componentTheme.borderWidth} * 2))`,
+        height: `calc(100% - (${componentTheme.borderWidth} * 6))`,
+        width: `calc(100% - (${componentTheme.borderWidth} * 6))`,
         background: componentTheme.toggleBackground,
         boxShadow: componentTheme.toggleShadow,
-        borderRadius: '100%'
+        borderRadius: '100%',
+        border: `${componentTheme.borderWidth} solid ${
+          checked
+            ? componentTheme.checkedIconBorderColor
+            : componentTheme.uncheckedIconBorderColor
+        }`
       }
     },
 
diff --git a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
index ba8e321e28..d34a92be72 100644
--- a/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
+++ b/packages/ui-checkbox/src/Checkbox/ToggleFacade/theme.ts
@@ -55,7 +55,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
   const componentVariables: ToggleFacadeTheme = {
     color: colors?.contrasts?.white1010,
     background: colors?.contrasts?.grey1111,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderRadius: '4rem',
     marginEnd: spacing?.small,
@@ -63,7 +63,7 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
     marginVertical: spacing?.xSmall,
     checkedBackground: colors?.contrasts?.green4570,
     uncheckedIconColor: colors?.contrasts?.grey125125,
-    checkedIconColor: colors?.contrasts?.green4570,
+    checkedIconColor: colors?.contrasts?.green5782,
     focusOutlineColor: colors?.contrasts?.blue4570,
     focusBorderWidth: borders?.widthMedium,
     focusBorderStyle: borders?.style,
@@ -76,7 +76,9 @@ const generateComponentTheme = (theme: Theme): ToggleFacadeTheme => {
     labelLineHeight: typography?.lineHeightCondensed,
     labelFontSizeSmall: typography?.fontSizeSmall,
     labelFontSizeMedium: typography?.fontSizeMedium,
-    labelFontSizeLarge: typography?.fontSizeLarge
+    labelFontSizeLarge: typography?.fontSizeLarge,
+    uncheckedIconBorderColor: colors?.contrasts?.grey5782,
+    checkedIconBorderColor: colors?.contrasts?.green5782
   }
 
   return {
diff --git a/packages/ui-drilldown/src/Drilldown/index.tsx b/packages/ui-drilldown/src/Drilldown/index.tsx
index 55f1867675..74304240ef 100644
--- a/packages/ui-drilldown/src/Drilldown/index.tsx
+++ b/packages/ui-drilldown/src/Drilldown/index.tsx
@@ -1377,6 +1377,7 @@ class Drilldown extends Component<DrilldownProps, DrilldownState> {
           getDisabledOptionProps
         }) => (
           <View
+            borderWidth="small"
             as="div"
             elementRef={this.handleDrilldownRef}
             tabIndex={0}
diff --git a/packages/ui-drilldown/src/Drilldown/styles.ts b/packages/ui-drilldown/src/Drilldown/styles.ts
index 516e67b210..19e5b2334b 100644
--- a/packages/ui-drilldown/src/Drilldown/styles.ts
+++ b/packages/ui-drilldown/src/Drilldown/styles.ts
@@ -50,6 +50,7 @@ const generateStyle = (
     drilldown: {
       label: 'drilldown',
       overflow: 'visible', // needed for focus ring!
+      borderColor: componentTheme.borderColor,
 
       ...(hasHighlightedOption && {
         '&:focus::before': {
@@ -80,7 +81,8 @@ const generateStyle = (
       flexShrink: 0,
       height: '100%',
       alignItems: 'center',
-      paddingInlineStart: componentTheme.labelInfoPadding
+      paddingInlineStart: componentTheme.labelInfoPadding,
+      color: componentTheme.labelInfoColor
     },
     optionContent: {
       label: 'drilldown__optionContent',
diff --git a/packages/ui-drilldown/src/Drilldown/theme.ts b/packages/ui-drilldown/src/Drilldown/theme.ts
index cf8bfd4f44..1d19cb274f 100644
--- a/packages/ui-drilldown/src/Drilldown/theme.ts
+++ b/packages/ui-drilldown/src/Drilldown/theme.ts
@@ -36,7 +36,9 @@ const generateComponentTheme = (theme: Theme): DrilldownTheme => {
   const componentVariables: DrilldownTheme = {
     headerTitleFontWeight: typography.fontWeightBold,
     headerActionColor: colors?.contrasts?.blue4570,
-    labelInfoPadding: spacing?.small
+    labelInfoPadding: spacing?.small,
+    labelInfoColor: colors?.contrasts?.grey3045,
+    borderColor: colors?.contrasts?.grey3045
   }
 
   return {
diff --git a/packages/ui-menu/src/Menu/MenuItem/theme.ts b/packages/ui-menu/src/Menu/MenuItem/theme.ts
index 4635509f1e..c9120e5fcf 100644
--- a/packages/ui-menu/src/Menu/MenuItem/theme.ts
+++ b/packages/ui-menu/src/Menu/MenuItem/theme.ts
@@ -36,8 +36,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => {
   const themeSpecificStyle: ThemeSpecificStyle<MenuItemTheme> = {
     canvas: {
       labelColor: theme['ic-brand-font-color-dark'],
-      iconColor: theme['ic-brand-font-color-dark'],
-      activeBackground: theme['ic-brand-primary']
+      iconColor: theme['ic-brand-font-color-dark']
     }
   }
 
@@ -56,7 +55,7 @@ const generateComponentTheme = (theme: Theme): MenuItemTheme => {
     iconColor: colors?.contrasts?.grey125125,
     iconPadding: spacing?.small,
 
-    activeBackground: colors?.contrasts?.blue4570,
+    activeBackground: colors?.contrasts?.grey4570,
     activeLabelColor: colors?.contrasts?.white1010,
     activeIconColor: colors?.contrasts?.white1010
   }
diff --git a/packages/ui-number-input/src/NumberInput/theme.ts b/packages/ui-number-input/src/NumberInput/theme.ts
index 65d7594206..aa219eab58 100644
--- a/packages/ui-number-input/src/NumberInput/theme.ts
+++ b/packages/ui-number-input/src/NumberInput/theme.ts
@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): NumberInputTheme => {
 
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
 
     color: colors?.contrasts?.grey125125,
diff --git a/packages/ui-options/src/Options/Item/theme.ts b/packages/ui-options/src/Options/Item/theme.ts
index 5d2d172eb2..14213534da 100644
--- a/packages/ui-options/src/Options/Item/theme.ts
+++ b/packages/ui-options/src/Options/Item/theme.ts
@@ -64,7 +64,7 @@ const generateComponentTheme = (theme: Theme): OptionsItemTheme => {
     descriptionFontWeight: typography.fontWeightNormal,
     descriptionLineHeight: typography.lineHeight,
     descriptionPaddingStart: '0.25em',
-    descriptionColor: colors?.contrasts?.grey4570
+    descriptionColor: colors?.contrasts?.grey5782
   }
 
   return {
diff --git a/packages/ui-popover/src/Popover/index.tsx b/packages/ui-popover/src/Popover/index.tsx
index 732894b9da..93ff38ad54 100644
--- a/packages/ui-popover/src/Popover/index.tsx
+++ b/packages/ui-popover/src/Popover/index.tsx
@@ -55,10 +55,14 @@ import type { ViewProps, ContextViewProps } from '@instructure/ui-view'
 import type { PositionProps } from '@instructure/ui-position'
 import type { DialogProps } from '@instructure/ui-dialog'
 
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 import type { PopoverProps, PopoverState } from './props'
 import { allowedProps, propTypes } from './props'
 import type { Renderable } from '@instructure/shared-types'
-
 /**
 ---
 category: components
@@ -67,6 +71,7 @@ tags: overlay, portal, dialog
 **/
 @withDeterministicId()
 @textDirectionContextConsumer()
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class Popover extends Component<PopoverProps, PopoverState> {
   static readonly componentId = 'Popover'
@@ -558,6 +563,7 @@ class Popover extends Component<PopoverProps, PopoverState> {
       }
 
       const { placement } = this.state
+      const { styles } = this.props
 
       if (this.props.withArrow) {
         viewProps = {
@@ -570,7 +576,17 @@ class Popover extends Component<PopoverProps, PopoverState> {
               : placement
         } as Partial<ContextViewProps> & { ref: any }
 
-        return <ContextView {...viewProps}>{content}</ContextView>
+        return (
+          <ContextView
+            {...viewProps}
+            themeOverride={{
+              borderColorForView: styles?.borderColor,
+              arrowBorderColor: styles?.borderColor
+            }}
+          >
+            {content}
+          </ContextView>
+        )
       } else {
         viewProps = {
           ...viewProps,
@@ -579,7 +595,14 @@ class Popover extends Component<PopoverProps, PopoverState> {
           ...(color === 'primary-inverse' && { borderColor: 'transparent' })
         } as Partial<ViewProps> & { ref: any }
 
-        return <View {...viewProps}>{content}</View>
+        return (
+          <View
+            {...viewProps}
+            themeOverride={{ borderColorPrimary: styles?.borderColor }}
+          >
+            {content}
+          </View>
+        )
       }
     } else {
       return null
diff --git a/packages/ui-popover/src/Popover/props.ts b/packages/ui-popover/src/Popover/props.ts
index e2833525f0..f5af97bd47 100644
--- a/packages/ui-popover/src/Popover/props.ts
+++ b/packages/ui-popover/src/Popover/props.ts
@@ -28,7 +28,7 @@ import { element } from '@instructure/ui-prop-types'
 import { ThemeablePropTypes } from '@instructure/emotion'
 import { PositionPropTypes } from '@instructure/ui-position'
 
-import type { Shadow, Stacking } from '@instructure/emotion'
+import type { Shadow, Stacking, WithStyleProps } from '@instructure/emotion'
 
 import type {
   PlacementPropValues,
@@ -41,7 +41,8 @@ import type {
   PropValidators,
   LiveRegion,
   UIElement,
-  Renderable
+  Renderable,
+  PopoverTheme
 } from '@instructure/shared-types'
 import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 
@@ -278,7 +279,8 @@ type PopoverOwnProps = {
 
 type PopoverProps = PopoverOwnProps &
   TextDirectionContextConsumerProps &
-  WithDeterministicIdProps
+  WithDeterministicIdProps &
+  WithStyleProps<PopoverTheme, PopoverStyle>
 
 type PopoverState = {
   placement: PopoverOwnProps['placement']
@@ -291,6 +293,8 @@ type PropKeys = keyof PopoverOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type PopoverStyle = { borderColor: string }
+
 const propTypes: PropValidators<PropKeys> = {
   isShowingContent: PropTypes.bool,
   defaultIsShowingContent: PropTypes.bool,
@@ -388,5 +392,5 @@ const allowedProps: AllowedPropKeys = [
   'elementRef'
 ]
 
-export type { PopoverOwnProps, PopoverProps, PopoverState }
+export type { PopoverOwnProps, PopoverProps, PopoverState, PopoverStyle }
 export { propTypes, allowedProps }
diff --git a/packages/ui-popover/src/Popover/styles.ts b/packages/ui-popover/src/Popover/styles.ts
new file mode 100644
index 0000000000..7b733cb415
--- /dev/null
+++ b/packages/ui-popover/src/Popover/styles.ts
@@ -0,0 +1,44 @@
+/*
+ * 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 { PopoverTheme } from '@instructure/shared-types'
+import type { PopoverStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (componentTheme: PopoverTheme): PopoverStyle => {
+  return {
+    borderColor: componentTheme.borderColor
+  }
+}
+
+export default generateStyle
diff --git a/packages/ui-popover/src/Popover/theme.ts b/packages/ui-popover/src/Popover/theme.ts
new file mode 100644
index 0000000000..3db0d6af4f
--- /dev/null
+++ b/packages/ui-popover/src/Popover/theme.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 { PopoverTheme } 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): PopoverTheme => {
+  const { colors } = theme
+
+  const componentVariables: PopoverTheme = {
+    borderColor: colors?.contrasts?.grey3045
+  }
+  return {
+    ...componentVariables
+  }
+}
+export default generateComponentTheme
diff --git a/packages/ui-progress/src/ProgressBar/theme.ts b/packages/ui-progress/src/ProgressBar/theme.ts
index cc33f34677..42e82fc9d4 100644
--- a/packages/ui-progress/src/ProgressBar/theme.ts
+++ b/packages/ui-progress/src/ProgressBar/theme.ts
@@ -93,7 +93,7 @@ const generateComponentTheme = (theme: Theme): ProgressBarTheme => {
     trackColor: colors?.contrasts?.white1010,
     trackColorInverse: 'transparent',
     trackBottomBorderWidth: borders?.widthSmall,
-    trackBottomBorderColor: colors?.contrasts?.grey1214,
+    trackBottomBorderColor: colors?.contrasts?.grey3045,
     trackBottomBorderColorInverse: colors?.contrasts?.white1010
   }
 
diff --git a/packages/ui-progress/src/ProgressCircle/theme.ts b/packages/ui-progress/src/ProgressCircle/theme.ts
index 8bd27bc3a7..b5a2283d27 100644
--- a/packages/ui-progress/src/ProgressCircle/theme.ts
+++ b/packages/ui-progress/src/ProgressCircle/theme.ts
@@ -126,7 +126,7 @@ const generateComponentTheme = (theme: Theme): ProgressCircleTheme => {
     trackColor: colors?.contrasts?.white1010,
     trackColorInverse: 'transparent',
 
-    trackBorderColor: colors?.contrasts?.grey125125,
+    trackBorderColor: colors?.contrasts?.grey3045,
     trackBorderColorInverse: colors?.contrasts?.white1010,
 
     // variables are split out for inverse to allow
diff --git a/packages/ui-radio-input/src/RadioInput/theme.ts b/packages/ui-radio-input/src/RadioInput/theme.ts
index 5091a1b3e6..3e856caf34 100644
--- a/packages/ui-radio-input/src/RadioInput/theme.ts
+++ b/packages/ui-radio-input/src/RadioInput/theme.ts
@@ -60,7 +60,7 @@ const generateComponentTheme = (theme: Theme): RadioInputTheme => {
 
     background: colors?.contrasts?.white1010,
     borderWidth: borders?.widthSmall,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     hoverBorderColor: colors?.contrasts?.grey125125,
     controlSize: '0.1875rem',
 
diff --git a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts
index f3205498c7..b528a04f27 100644
--- a/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts
+++ b/packages/ui-source-code-editor/src/SourceCodeEditor/theme.ts
@@ -40,7 +40,7 @@ const generateComponentTheme = (theme: Theme): SourceCodeEditorTheme => {
     color: colors?.contrasts?.grey125125,
     gutterBackground: colors?.contrasts?.grey1111,
     borderWidth: borders?.widthSmall,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
     focusBorderColor: colors?.contrasts?.blue4570,
     horizontalPadding: spacing?.xSmall,
diff --git a/packages/ui-table/src/Table/ColHeader/theme.ts b/packages/ui-table/src/Table/ColHeader/theme.ts
index 4703988a1f..1afd2c20aa 100644
--- a/packages/ui-table/src/Table/ColHeader/theme.ts
+++ b/packages/ui-table/src/Table/ColHeader/theme.ts
@@ -49,7 +49,7 @@ const generateComponentTheme = (theme: Theme): TableColHeaderTheme => {
     focusOutlineWidth: borders?.widthMedium,
     focusOutlineStyle: borders?.style,
 
-    unSortedIconColor: colors?.contrasts?.grey4570,
+    unSortedIconColor: colors?.contrasts?.grey3045,
     sortedIconColor: colors?.contrasts?.blue4570
   }
 
diff --git a/packages/ui-table/src/Table/Row/theme.ts b/packages/ui-table/src/Table/Row/theme.ts
index b5a468df12..fc9c3b3f79 100644
--- a/packages/ui-table/src/Table/Row/theme.ts
+++ b/packages/ui-table/src/Table/Row/theme.ts
@@ -47,7 +47,7 @@ const generateComponentTheme = (theme: Theme): TableRowTheme => {
     color: colors?.contrasts?.grey125125,
     background: colors?.contrasts?.white1010,
 
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     hoverBorderColor: colors?.contrasts?.blue4570,
 
     padding: `${spacing?.xSmall} 0`
diff --git a/packages/ui-tabs/src/Tabs/Panel/theme.ts b/packages/ui-tabs/src/Tabs/Panel/theme.ts
index f168353ab7..dcdb48ead3 100644
--- a/packages/ui-tabs/src/Tabs/Panel/theme.ts
+++ b/packages/ui-tabs/src/Tabs/Panel/theme.ts
@@ -46,7 +46,7 @@ const generateComponentTheme = (theme: Theme): TabsPanelTheme => {
     lineHeight: typography?.lineHeight,
     color: colors?.contrasts?.grey125125,
     background: colors?.contrasts?.white1010,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
     defaultOverflowY: 'auto'
diff --git a/packages/ui-tabs/src/Tabs/Tab/theme.ts b/packages/ui-tabs/src/Tabs/Tab/theme.ts
index ee6af36b74..8deaba48a4 100644
--- a/packages/ui-tabs/src/Tabs/Tab/theme.ts
+++ b/packages/ui-tabs/src/Tabs/Tab/theme.ts
@@ -54,7 +54,7 @@ const generateComponentTheme = (theme: Theme): TabsTabTheme => {
 
     secondaryColor: colors?.contrasts?.grey125125,
     secondarySelectedBackground: colors?.contrasts?.white1010,
-    secondarySelectedBorderColor: colors?.contrasts?.grey1214,
+    secondarySelectedBorderColor: colors?.contrasts?.grey3045,
 
     zIndex: stacking?.above
   }
diff --git a/packages/ui-text-area/src/TextArea/theme.ts b/packages/ui-text-area/src/TextArea/theme.ts
index 6989ea6847..a38284300d 100644
--- a/packages/ui-text-area/src/TextArea/theme.ts
+++ b/packages/ui-text-area/src/TextArea/theme.ts
@@ -49,10 +49,10 @@ const generateComponentTheme = (theme: Theme): TextAreaTheme => {
 
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
-    borderTopColor: colors?.contrasts?.grey1214,
-    borderRightColor: colors?.contrasts?.grey1214,
-    borderBottomColor: colors?.contrasts?.grey1214,
-    borderLeftColor: colors?.contrasts?.grey1214,
+    borderTopColor: colors?.contrasts?.grey3045,
+    borderRightColor: colors?.contrasts?.grey3045,
+    borderBottomColor: colors?.contrasts?.grey3045,
+    borderLeftColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
 
     padding: spacing?.small,
diff --git a/packages/ui-text-input/src/TextInput/theme.ts b/packages/ui-text-input/src/TextInput/theme.ts
index a573e95e3a..7787b8a949 100644
--- a/packages/ui-text-input/src/TextInput/theme.ts
+++ b/packages/ui-text-input/src/TextInput/theme.ts
@@ -46,7 +46,7 @@ const generateComponentTheme = (theme: Theme): TextInputTheme => {
 
     borderWidth: borders?.widthSmall,
     borderStyle: borders?.style,
-    borderColor: colors?.contrasts?.grey1214,
+    borderColor: colors?.contrasts?.grey3045,
     borderRadius: borders?.radiusMedium,
 
     color: colors?.contrasts?.grey125125,
diff --git a/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts b/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts
index 8bb3e09e4b..6476cd9a4b 100644
--- a/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts
+++ b/packages/ui-themes/src/sharedThemeTokens/colors/primitives.ts
@@ -32,6 +32,7 @@ export const primitives: Primitives = {
   grey12: '#E8EAEC',
   grey14: '#D7DADE',
   grey24: '#9EA6AD',
+  grey30: '#8D959F',
   grey45: '#6A7883',
   grey57: '#586874',
   grey70: '#4A5B68',
diff --git a/packages/ui-themes/src/themes/canvas/colors.ts b/packages/ui-themes/src/themes/canvas/colors.ts
index 756f9b8fef..713bb71cca 100644
--- a/packages/ui-themes/src/themes/canvas/colors.ts
+++ b/packages/ui-themes/src/themes/canvas/colors.ts
@@ -39,6 +39,7 @@ const contrasts: Contrasts = {
   grey1214: primitives.grey12,
   grey1424: primitives.grey14,
   grey2424: primitives.grey24,
+  grey3045: primitives.grey30,
   grey4570: primitives.grey45,
   grey5782: primitives.grey57,
   grey100100: primitives.grey100,
diff --git a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
index 9dd761557b..f27b18220a 100644
--- a/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
+++ b/packages/ui-themes/src/themes/canvasHighContrast/colors.ts
@@ -39,6 +39,7 @@ const contrasts: Contrasts = {
   grey1214: primitives.grey14,
   grey1424: primitives.grey24,
   grey2424: primitives.grey24,
+  grey3045: primitives.grey45,
   grey4570: primitives.grey70,
   grey5782: primitives.grey82,
   grey100100: primitives.grey100,
diff --git a/packages/ui-toggle-details/src/ToggleGroup/index.tsx b/packages/ui-toggle-details/src/ToggleGroup/index.tsx
index fca48c6f44..fbacdc0d5e 100644
--- a/packages/ui-toggle-details/src/ToggleGroup/index.tsx
+++ b/packages/ui-toggle-details/src/ToggleGroup/index.tsx
@@ -45,11 +45,17 @@ import { testable } from '@instructure/ui-testable'
 import type { ToggleGroupProps } from './props'
 import { allowedProps, propTypes } from './props'
 
+import { withStyle } from '@instructure/emotion'
+
+import generateStyle from './styles'
+import generateComponentTheme from './theme'
+
 /**
 ---
 category: components
 ---
 **/
+@withStyle(generateStyle, generateComponentTheme)
 @testable()
 class ToggleGroup extends Component<ToggleGroupProps> {
   static readonly componentId = 'ToggleGroup'
@@ -97,6 +103,10 @@ class ToggleGroup extends Component<ToggleGroupProps> {
     this._shouldTransition = true
   }
 
+  componentDidUpdate() {
+    this.props.makeStyles?.(this.state)
+  }
+
   renderIcon(expanded: boolean) {
     const Icon = expanded ? this.props.iconExpanded : this.props.icon
     return Icon ? callRenderProp(Icon) : null
@@ -130,11 +140,13 @@ class ToggleGroup extends Component<ToggleGroupProps> {
   }
 
   renderDetails(detailsProps: { id: string }) {
+    const { styles } = this.props
     return (
       <View
         {...detailsProps}
         display="block"
         borderWidth="small none none none"
+        themeOverride={{ borderColorPrimary: styles?.borderColor }}
       >
         {this.props.transition && this._shouldTransition ? (
           <Transition transitionOnMount in type="fade">
@@ -149,7 +161,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
 
   render() {
     const Element = getElementType(ToggleGroup, this.props)
-
+    const { styles } = this.props
     return (
       <Expandable {...pickProps(this.props, Expandable.allowedProps)}>
         {({ expanded, getToggleProps, getDetailsProps }) => {
@@ -162,6 +174,7 @@ class ToggleGroup extends Component<ToggleGroupProps> {
               display="block"
               borderRadius="medium"
               background="primary"
+              themeOverride={{ borderColorPrimary: styles?.borderColor }}
             >
               <Flex
                 padding={
diff --git a/packages/ui-toggle-details/src/ToggleGroup/props.ts b/packages/ui-toggle-details/src/ToggleGroup/props.ts
index bddda397ee..d9dee90b04 100644
--- a/packages/ui-toggle-details/src/ToggleGroup/props.ts
+++ b/packages/ui-toggle-details/src/ToggleGroup/props.ts
@@ -31,9 +31,12 @@ import {
   AsElementType,
   OtherHTMLAttributes,
   PropValidators,
-  Renderable
+  Renderable,
+  ToggleGroupTheme
 } from '@instructure/shared-types'
 
+import type { WithStyleProps } from '@instructure/emotion'
+
 type ToggleGroupOwnProps = {
   /**
    * the content to show and hide
@@ -91,8 +94,11 @@ type PropKeys = keyof ToggleGroupOwnProps
 
 type AllowedPropKeys = Readonly<Array<PropKeys>>
 
+type ToggleGroupStyle = { borderColor: string }
+
 type ToggleGroupProps = ToggleGroupOwnProps &
-  OtherHTMLAttributes<ToggleGroupOwnProps>
+  OtherHTMLAttributes<ToggleGroupOwnProps> &
+  WithStyleProps<ToggleGroupTheme, ToggleGroupStyle>
 
 const propTypes: PropValidators<PropKeys> = {
   children: PropTypes.node.isRequired,
@@ -126,5 +132,5 @@ const allowedProps: AllowedPropKeys = [
   'border'
 ]
 
-export type { ToggleGroupProps }
+export type { ToggleGroupProps, ToggleGroupStyle }
 export { propTypes, allowedProps }
diff --git a/packages/ui-toggle-details/src/ToggleGroup/styles.ts b/packages/ui-toggle-details/src/ToggleGroup/styles.ts
new file mode 100644
index 0000000000..682e1e2462
--- /dev/null
+++ b/packages/ui-toggle-details/src/ToggleGroup/styles.ts
@@ -0,0 +1,47 @@
+/*
+ * 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 { ToggleGroupTheme } from '@instructure/shared-types'
+import type { ToggleGroupProps, ToggleGroupStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: ToggleGroupTheme,
+  _props: ToggleGroupProps
+): ToggleGroupStyle => {
+  return {
+    borderColor: componentTheme.borderColor
+  }
+}
+
+export default generateStyle
diff --git a/packages/ui-toggle-details/src/ToggleGroup/theme.ts b/packages/ui-toggle-details/src/ToggleGroup/theme.ts
new file mode 100644
index 0000000000..ce7acb2bf3
--- /dev/null
+++ b/packages/ui-toggle-details/src/ToggleGroup/theme.ts
@@ -0,0 +1,43 @@
+/*
+ * 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 { ToggleGroupTheme } 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): ToggleGroupTheme => {
+  const { colors } = theme
+
+  const componentVariables: ToggleGroupTheme = {
+    borderColor: colors?.contrasts?.grey3045
+  }
+  return {
+    ...componentVariables
+  }
+}
+export default generateComponentTheme
diff --git a/packages/ui-view/src/ContextView/index.tsx b/packages/ui-view/src/ContextView/index.tsx
index 5cbdfd5c6d..cf48b8c302 100644
--- a/packages/ui-view/src/ContextView/index.tsx
+++ b/packages/ui-view/src/ContextView/index.tsx
@@ -118,6 +118,11 @@ class ContextView extends Component<ContextViewProps> {
           display="block"
           borderRadius="medium"
           borderWidth="small"
+          themeOverride={
+            styles?.borderColorForView
+              ? { borderColorPrimary: styles?.borderColorForView }
+              : {}
+          }
           borderColor={background === 'default' ? 'primary' : 'transparent'}
           background={background === 'default' ? 'primary' : 'primary-inverse'}
           withVisualDebug={debug}
diff --git a/packages/ui-view/src/ContextView/props.ts b/packages/ui-view/src/ContextView/props.ts
index de8d63a189..6d8345b9e9 100644
--- a/packages/ui-view/src/ContextView/props.ts
+++ b/packages/ui-view/src/ContextView/props.ts
@@ -73,7 +73,11 @@ type ContextViewProps = ContextViewOwnProps &
 
 type ContextViewStyle = ComponentStyle<
   'contextView' | 'contextView__content' | 'contextView__arrow'
-> & { arrowSize: string | 0; arrowBorderWidth: string | 0 }
+> & {
+  arrowSize: string | 0
+  arrowBorderWidth: string | 0
+  borderColorForView: string
+}
 
 const propTypes: PropValidators<PropKeys> = {
   /**
diff --git a/packages/ui-view/src/ContextView/styles.ts b/packages/ui-view/src/ContextView/styles.ts
index 832f9a873b..5641971409 100644
--- a/packages/ui-view/src/ContextView/styles.ts
+++ b/packages/ui-view/src/ContextView/styles.ts
@@ -312,7 +312,8 @@ const generateStyle = (
       }
     },
     arrowSize: componentTheme.arrowSize,
-    arrowBorderWidth: componentTheme.arrowBorderWidth
+    arrowBorderWidth: componentTheme.arrowBorderWidth,
+    borderColorForView: componentTheme.borderColorForView
   }
 }
 
diff --git a/packages/ui-view/src/ContextView/theme.ts b/packages/ui-view/src/ContextView/theme.ts
index 8397d01272..44e7e19266 100644
--- a/packages/ui-view/src/ContextView/theme.ts
+++ b/packages/ui-view/src/ContextView/theme.ts
@@ -37,7 +37,8 @@ const generateComponentTheme = (theme: Theme): ContextViewTheme => {
     arrowBackgroundColor: theme?.colors?.contrasts?.white1010,
     arrowBorderColor: theme?.colors?.contrasts?.grey1214,
     arrowBackgroundColorInverse: theme?.colors?.contrasts?.grey125125,
-    arrowBorderColorInverse: 'transparent'
+    arrowBorderColorInverse: 'transparent',
+    borderColorForView: ''
   }
 
   return {