diff --git a/packages/components/src/scss/_common.scss b/packages/components/src/scss/_common.scss
index f9b63e6e7..2e58a0bd2 100644
--- a/packages/components/src/scss/_common.scss
+++ b/packages/components/src/scss/_common.scss
@@ -11,8 +11,27 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+@use '@carbon/react/scss/themes';
 @use '@carbon/react/scss/theme' as *;
 
+:root, .tkn--theme-light {
+  @include theme(themes.$g10);
+}
+
+@mixin tkn--theme-dark {
+  @include theme(themes.$g90);
+}
+
+.tkn--theme-dark {
+  @include tkn--theme-dark;
+}
+
+@media (prefers-color-scheme: dark) {
+  .tkn--theme-system {
+    @include tkn--theme-dark;
+  }
+}
+
 .tkn--tooltip-trigger {
   appearance: none;
   padding: 0;
diff --git a/src/scss/_carbon.scss b/src/scss/_carbon.scss
index 0681a3fbf..8fc1f5e9f 100644
--- a/src/scss/_carbon.scss
+++ b/src/scss/_carbon.scss
@@ -79,24 +79,6 @@ limitations under the License.
   --tkn-button-border-width: #{button.$button-border-width};
 }
 
-:root, .tkn--theme-light {
-  @include theme.theme(themes.$g10);
-}
-
-@mixin tkn--theme-dark {
-  @include theme.theme(themes.$g90);
-}
-
-.tkn--theme-dark {
-  @include tkn--theme-dark;
-}
-
-@media (prefers-color-scheme: dark) {
-  .tkn--theme-system {
-    @include tkn--theme-dark;
-  }
-}
-
 .#{config.$prefix}--actionable-notification,
 .#{config.$prefix}--actionable-notification--toast,
 .#{config.$prefix}--inline-notification {