diff --git a/code/.storybook/preview.tsx b/code/.storybook/preview.tsx
index adc5556ffb0c..5e7e1958f7bb 100644
--- a/code/.storybook/preview.tsx
+++ b/code/.storybook/preview.tsx
@@ -22,6 +22,7 @@ import { sb } from 'storybook/test';
 import {
   Global,
   ThemeProvider,
+  ThemeVariables,
   convert,
   createReset,
   styled,
@@ -241,14 +242,27 @@ const decorators = [
           <Fragment>
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
+              <ThemeVariables />
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.light)}>
-              <ThemeBlock side="left" data-side="left" layout={parameters.layout}>
+              <ThemeVariables rootSelector="#sb-theme-light" />
+              <ThemeBlock
+                id="sb-theme-light"
+                side="left"
+                data-side="left"
+                layout={parameters.layout}
+              >
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
             <ThemeProvider theme={convert(themes.dark)}>
-              <ThemeBlock side="right" data-side="right" layout={parameters.layout}>
+              <ThemeVariables rootSelector="#sb-theme-dark" />
+              <ThemeBlock
+                id="sb-theme-dark"
+                side="right"
+                data-side="right"
+                layout={parameters.layout}
+              >
                 <StoryFn />
               </ThemeBlock>
             </ThemeProvider>
@@ -260,15 +274,18 @@ const decorators = [
           <Fragment>
             <ThemeProvider theme={convert(themes.light)}>
               <Global styles={createReset} />
+              <ThemeVariables />
             </ThemeProvider>
             <StackContainer layout={parameters.layout}>
               <ThemeProvider theme={convert(themes.light)}>
-                <ThemeStack data-side="left" layout={parameters.layout}>
+                <ThemeVariables rootSelector="#sb-theme-light" />
+                <ThemeStack id="sb-theme-light" data-side="left" layout={parameters.layout}>
                   <StoryFn />
                 </ThemeStack>
               </ThemeProvider>
               <ThemeProvider theme={convert(themes.dark)}>
-                <ThemeStack data-side="right" layout={parameters.layout}>
+                <ThemeVariables rootSelector="#sb-theme-dark" />
+                <ThemeStack id="sb-theme-dark" data-side="right" layout={parameters.layout}>
                   <StoryFn />
                 </ThemeStack>
               </ThemeProvider>
@@ -281,6 +298,7 @@ const decorators = [
         return (
           <ThemeProvider theme={convert(themes[theme])}>
             <Global styles={createReset} />
+            <ThemeVariables />
             <ThemedSetRoot />
             {showPlayFnNotice && (
               <>
diff --git a/code/chromatic.config.json b/code/chromatic.config.json
index d53037a9d35e..b40b84be2b05 100644
--- a/code/chromatic.config.json
+++ b/code/chromatic.config.json
@@ -1,7 +1,9 @@
 {
   "$schema": "https://www.chromatic.com/config-file.schema.json",
+  "buildScriptName": "storybook:ui:build",
   "projectId": "Project:635781f3500dd2c49e189caf",
   "projectToken": "80b312430ec4",
   "onlyChanged": false,
+  "storybookBaseDir": "code",
   "zip": true
 }
diff --git a/code/core/src/actions/components/ActionLogger/style.tsx b/code/core/src/actions/components/ActionLogger/style.tsx
index abb9f47df90f..06b13645c225 100644
--- a/code/core/src/actions/components/ActionLogger/style.tsx
+++ b/code/core/src/actions/components/ActionLogger/style.tsx
@@ -13,9 +13,9 @@ export const Action = styled.div({
 
 export const Counter = styled.div(({ theme }) => ({
   backgroundColor: opacify(0.5, theme.appBorderColor),
-  color: theme.color.inverseText,
-  fontSize: theme.typography.size.s1,
-  fontWeight: theme.typography.weight.bold,
+  color: 'var(--sb-color-inverseText)',
+  fontSize: 'var(--sb-typography-size-s1)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
   lineHeight: 1,
   padding: '1px 5px',
   borderRadius: 20,
diff --git a/code/core/src/component-testing/components/EmptyState.tsx b/code/core/src/component-testing/components/EmptyState.tsx
index 65402c9288d4..39725eb27c64 100644
--- a/code/core/src/component-testing/components/EmptyState.tsx
+++ b/code/core/src/component-testing/components/EmptyState.tsx
@@ -9,11 +9,11 @@ import { styled } from 'storybook/theming';
 
 import { DOCUMENTATION_PLAY_FUNCTION_LINK } from '../constants';
 
-const Links = styled.div(({ theme }) => ({
+const Links = styled.div({
   display: 'flex',
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
   gap: 25,
-}));
+});
 
 export const Empty = () => {
   const [isLoading, setIsLoading] = useState(true);
diff --git a/code/core/src/component-testing/components/Interaction.tsx b/code/core/src/component-testing/components/Interaction.tsx
index 34514a6bf9eb..a6d284feb0a2 100644
--- a/code/core/src/component-testing/components/Interaction.tsx
+++ b/code/core/src/component-testing/components/Interaction.tsx
@@ -29,18 +29,18 @@ const RowContainer = styled('div', {
     position: 'relative',
     display: 'flex',
     flexDirection: 'column',
-    borderBottom: `1px solid ${theme.appBorderColor}`,
-    fontFamily: typography.fonts.base,
-    fontSize: 13,
+    borderBottom: `1px solid var(--sb-appBorderColor)`,
+    fontFamily: 'var(--sb-typography-fonts-base)',
+    fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
     ...(call.status === CallStates.ERROR && {
       backgroundColor:
         theme.base === 'dark'
           ? transparentize(0.93, theme.color.negative)
-          : theme.background.warning,
+          : 'var(--sb-background-warning)',
     }),
     paddingLeft: (call.ancestors?.length ?? 0) * 20,
   }),
-  ({ theme, call, pausedAt }) =>
+  ({ call, pausedAt }) =>
     pausedAt === call.id && {
       '&::before': {
         content: '""',
@@ -48,7 +48,7 @@ const RowContainer = styled('div', {
         top: -5,
         zIndex: 1,
         borderTop: '4.5px solid transparent',
-        borderLeft: `7px solid ${theme.color.warning}`,
+        borderLeft: `7px solid var(--sb-color-warning)`,
         borderBottom: '4.5px solid transparent',
       },
       '&::after': {
@@ -57,19 +57,19 @@ const RowContainer = styled('div', {
         top: -1,
         zIndex: 1,
         width: '100%',
-        borderTop: `1.5px solid ${theme.color.warning}`,
+        borderTop: `1.5px solid var(--sb-color-warning)`,
       },
     }
 );
 
-const RowHeader = styled.div<{ isInteractive: boolean }>(({ theme, isInteractive }) => ({
+const RowHeader = styled.div<{ isInteractive: boolean }>(({ isInteractive }) => ({
   display: 'flex',
-  '&:hover': isInteractive ? {} : { background: theme.background.hoverable },
+  '&:hover': isInteractive ? {} : { background: 'var(--sb-background-hoverable)' },
 }));
 
 const RowLabel = styled('button', {
   shouldForwardProp: (prop) => !['call'].includes(prop.toString()),
-})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ theme, disabled, call }) => ({
+})<React.ButtonHTMLAttributes<HTMLButtonElement> & { call: Call }>(({ disabled, call }) => ({
   flex: 1,
   display: 'grid',
   background: 'none',
@@ -84,9 +84,9 @@ const RowLabel = styled('button', {
   '&:focus-visible': {
     outline: 0,
     boxShadow: `inset 3px 0 0 0 ${
-      call.status === CallStates.ERROR ? theme.color.warning : theme.color.secondary
+      call.status === CallStates.ERROR ? 'var(--sb-color-warning)' : 'var(--sb-color-secondary)'
     }`,
-    background: call.status === CallStates.ERROR ? 'transparent' : theme.background.hoverable,
+    background: call.status === CallStates.ERROR ? 'transparent' : 'var(--sb-background-hoverable)',
   },
   '& > div': {
     opacity: call.status === CallStates.WAITING ? 0.5 : 1,
@@ -99,20 +99,20 @@ const RowActions = styled.div({
   padding: 6,
 });
 
-const StyledButton = styled(Button)(({ theme }) => ({
-  color: theme.textMutedColor,
+const StyledButton = styled(Button)({
+  color: 'var(--sb-textMutedColor)',
   margin: '0 3px',
-}));
+});
 
-const RowMessage = styled('div')(({ theme }) => ({
+const RowMessage = styled('div')({
   padding: '8px 10px 8px 36px',
-  fontSize: typography.size.s1,
-  color: theme.color.defaultText,
+  fontSize: `var(--sb-typography-size-s1)`,
+  color: 'var(--sb-color-defaultText)',
   pre: {
     margin: 0,
     padding: 0,
   },
-}));
+});
 
 const ErrorName = styled.span(({ theme }) => ({
   color: theme.base === 'dark' ? '#5EC1FF' : '#0271B6',
@@ -123,8 +123,8 @@ const ErrorMessage = styled.span(({ theme }) => ({
 }));
 
 const ErrorExplainer = styled.p(({ theme }) => ({
-  color: theme.base === 'dark' ? theme.color.negative : theme.color.negativeText,
-  fontSize: theme.typography.size.s2,
+  color: theme.base === 'dark' ? 'var(--sb-color-negative)' : 'var(--sb-color-negativeText)',
+  fontSize: `var(--sb-typography-size-s2)`,
   maxWidth: 500,
   textWrap: 'balance',
 }));
diff --git a/code/core/src/component-testing/components/InteractionsPanel.stories.tsx b/code/core/src/component-testing/components/InteractionsPanel.stories.tsx
index f779fd5b3030..7f34837350a3 100644
--- a/code/core/src/component-testing/components/InteractionsPanel.stories.tsx
+++ b/code/core/src/component-testing/components/InteractionsPanel.stories.tsx
@@ -12,9 +12,9 @@ import { getCalls, getInteractions } from '../mocks';
 import { InteractionsPanel } from './InteractionsPanel';
 import ToolbarStories from './Toolbar.stories';
 
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
-  color: theme.color.defaultText,
+const StyledWrapper = styled.div({
+  backgroundColor: 'var(--sb-background-content)',
+  color: 'var(--sb-color-defaultText)',
   display: 'block',
   height: '100%',
   position: 'absolute',
@@ -22,7 +22,7 @@ const StyledWrapper = styled.div(({ theme }) => ({
   right: 0,
   bottom: 0,
   overflow: 'auto',
-}));
+});
 
 const interactions = getInteractions(CallStates.DONE);
 const managerContext: any = {
diff --git a/code/core/src/component-testing/components/InteractionsPanel.tsx b/code/core/src/component-testing/components/InteractionsPanel.tsx
index d9baa4ff2013..e879a6e381a6 100644
--- a/code/core/src/component-testing/components/InteractionsPanel.tsx
+++ b/code/core/src/component-testing/components/InteractionsPanel.tsx
@@ -50,29 +50,31 @@ interface InteractionsPanelProps {
   api: API;
 }
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   height: '100%',
-  background: theme.background.content,
-}));
+  background: 'var(--sb-background-content)',
+});
 
 const CaughtException = styled.div(({ theme }) => ({
-  borderBottom: `1px solid ${theme.appBorderColor}`,
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
   backgroundColor:
-    theme.base === 'dark' ? transparentize(0.93, theme.color.negative) : theme.background.warning,
+    theme.base === 'dark'
+      ? transparentize(0.93, theme.color.negative)
+      : 'var(--sb-background-warning)',
   padding: 15,
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
   lineHeight: '19px',
 }));
-const CaughtExceptionCode = styled.code(({ theme }) => ({
+const CaughtExceptionCode = styled.code({
   margin: '0 1px',
   padding: 3,
-  fontSize: theme.typography.size.s1 - 1,
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
   lineHeight: 1,
   verticalAlign: 'top',
   background: 'rgba(0, 0, 0, 0.05)',
-  border: `1px solid ${theme.appBorderColor}`,
+  border: `1px solid var(--sb-appBorderColor)`,
   borderRadius: 3,
-}));
+});
 const CaughtExceptionTitle = styled.div({
   paddingBottom: 4,
   fontWeight: 'bold',
@@ -82,14 +84,14 @@ const CaughtExceptionDescription = styled.p({
   padding: '0 0 20px',
 });
 
-const CaughtExceptionStack = styled.pre(({ theme }) => ({
+const CaughtExceptionStack = styled.pre({
   margin: 0,
   padding: 0,
   '&:not(:last-child)': {
     paddingBottom: 16,
   },
-  fontSize: theme.typography.size.s1 - 1,
-}));
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
+});
 
 export const InteractionsPanel: React.FC<InteractionsPanelProps> = React.memo(
   function InteractionsPanel({
diff --git a/code/core/src/component-testing/components/MatcherResult.stories.tsx b/code/core/src/component-testing/components/MatcherResult.stories.tsx
index f8ec78e970aa..84a59ec8bf85 100644
--- a/code/core/src/component-testing/components/MatcherResult.stories.tsx
+++ b/code/core/src/component-testing/components/MatcherResult.stories.tsx
@@ -5,13 +5,13 @@ import { dedent } from 'ts-dedent';
 
 import { MatcherResult } from './MatcherResult';
 
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
+const StyledWrapper = styled.div({
+  backgroundColor: 'var(--sb-background-content)',
   padding: '12px 0',
-  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
-  color: theme.color.defaultText,
-  fontSize: 13,
-}));
+  boxShadow: `0 0 0 1px var(--sb-appBorderColor)`,
+  color: 'var(--sb-color-defaultText)',
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
+});
 
 export default {
   title: 'MatcherResult',
diff --git a/code/core/src/component-testing/components/MatcherResult.tsx b/code/core/src/component-testing/components/MatcherResult.tsx
index d2888448eb77..2f1ddaf33ced 100644
--- a/code/core/src/component-testing/components/MatcherResult.tsx
+++ b/code/core/src/component-testing/components/MatcherResult.tsx
@@ -29,11 +29,11 @@ const parseValue = (value: string): any => {
 };
 
 const StyledExpected = styled.span(({ theme }) => ({
-  color: theme.base === 'light' ? theme.color.positiveText : theme.color.positive,
+  color: theme.base === 'light' ? 'var(--sb-color-positiveText)' : 'var(--sb-color-positive)',
 }));
 
 const StyledReceived = styled.span(({ theme }) => ({
-  color: theme.base === 'light' ? theme.color.negativeText : theme.color.negative,
+  color: theme.base === 'light' ? 'var(--sb-color-negativeText)' : 'var(--sb-color-negative)',
 }));
 
 export const Received = ({ value, parsed }: { value: any; parsed?: boolean }) =>
diff --git a/code/core/src/component-testing/components/MethodCall.stories.tsx b/code/core/src/component-testing/components/MethodCall.stories.tsx
index ea9b78d3735a..7799a0d17b4a 100644
--- a/code/core/src/component-testing/components/MethodCall.stories.tsx
+++ b/code/core/src/component-testing/components/MethodCall.stories.tsx
@@ -1,18 +1,18 @@
 import React from 'react';
 
-import { styled, typography } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 import type { Call } from '../../instrumenter/types';
 import { MethodCall, Node } from './MethodCall';
 
-const StyledWrapper = styled.div(({ theme }) => ({
-  backgroundColor: theme.background.content,
+const StyledWrapper = styled.div({
+  backgroundColor: 'var(--sb-background-content)',
   padding: '20px',
-  boxShadow: `0 0 0 1px ${theme.appBorderColor}`,
-  color: theme.color.defaultText,
-  fontFamily: typography.fonts.mono,
-  fontSize: typography.size.s1,
-}));
+  boxShadow: `0 0 0 1px var(--sb-appBorderColor)`,
+  color: 'var(--sb-color-defaultText)',
+  fontFamily: 'var(--sb-typography-fonts-mono)',
+  fontSize: `var(--sb-typography-size-s1)`,
+});
 
 export default {
   title: 'MethodCall',
diff --git a/code/core/src/component-testing/components/Toolbar.tsx b/code/core/src/component-testing/components/Toolbar.tsx
index b46251e1efdd..d5ab8843cbf2 100644
--- a/code/core/src/component-testing/components/Toolbar.tsx
+++ b/code/core/src/component-testing/components/Toolbar.tsx
@@ -18,13 +18,13 @@ import { type ControlStates } from '../../instrumenter/types';
 import type { Controls } from './InteractionsPanel';
 import { type PlayStatus, StatusBadge } from './StatusBadge';
 
-const ToolbarWrapper = styled.div(({ theme }) => ({
-  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
-  background: theme.background.app,
+const ToolbarWrapper = styled.div({
+  boxShadow: `0 -1px 0 0 inset var(--sb-appBorderColor)`,
+  background: 'var(--sb-background-app)',
   position: 'sticky',
   top: 0,
   zIndex: 1,
-}));
+});
 
 interface ToolbarProps {
   controls: Controls;
@@ -37,41 +37,41 @@ interface ToolbarProps {
   api: API;
 }
 
-const StyledButton = styled(Button)(({ theme }) => ({
+const StyledButton = styled(Button)({
   borderRadius: 4,
   padding: 6,
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   '&:not(:disabled)': {
     '&:hover,&:focus-visible': {
-      color: theme.color.secondary,
+      color: 'var(--sb-color-secondary)',
     },
   },
-}));
+});
 
-const StyledIconButton = styled(Button)(({ theme }) => ({
-  color: theme.textMutedColor,
-}));
+const StyledIconButton = styled(Button)({
+  color: 'var(--sb-textMutedColor)',
+});
 
-const OpenInEditorButton = styled(Button)(({ theme }) => ({
-  color: theme.color.secondary,
-  fontWeight: theme.typography.weight.bold,
+const OpenInEditorButton = styled(Button)({
+  color: 'var(--sb-color-secondary)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
   justifyContent: 'flex-end',
   textAlign: 'right',
   whiteSpace: 'nowrap',
   fontSize: 13,
   lineHeight: 24,
-}));
+});
 
-const StyledLocation = styled(P)(({ theme }) => ({
-  color: theme.textMutedColor,
+const StyledLocation = styled(P)({
+  color: 'var(--sb-textMutedColor)',
   cursor: 'default',
-  fontWeight: theme.typography.weight.regular,
+  fontWeight: 'var(--sb-typography-weight-regular)',
   justifyContent: 'flex-end',
   textAlign: 'right',
   whiteSpace: 'nowrap',
   margin: 0,
   fontSize: 13,
-}));
+});
 
 const ControlsGroup = styled.div({
   display: 'flex',
diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx
index 25dd5c668fef..b5397c4a90d7 100644
--- a/code/core/src/components/components/ActionBar/ActionBar.tsx
+++ b/code/core/src/components/components/ActionBar/ActionBar.tsx
@@ -3,18 +3,18 @@ import React from 'react';
 
 import { styled } from 'storybook/theming';
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   position: 'absolute',
   bottom: 0,
   right: 0,
   maxWidth: '100%',
   display: 'flex',
-  background: theme.background.content,
+  background: 'var(--sb-background-content)',
   zIndex: 1,
-}));
+});
 
 export const ActionButton = styled.button<{ disabled: boolean }>(
-  ({ theme }) => ({
+  {
     margin: 0,
     border: '0 none',
     padding: '4px 10px',
@@ -22,35 +22,35 @@ export const ActionButton = styled.button<{ disabled: boolean }>(
     display: 'flex',
     alignItems: 'center',
 
-    color: theme.color.defaultText,
-    background: theme.background.content,
+    color: 'var(--sb-color-defaultText)',
+    background: 'var(--sb-background-content)',
 
     fontSize: 12,
     lineHeight: '16px',
-    fontFamily: theme.typography.fonts.base,
-    fontWeight: theme.typography.weight.bold,
+    fontFamily: 'var(--sb-typography-fonts-base)',
+    fontWeight: 'var(--sb-typography-weight-bold)',
 
-    borderTop: `1px solid ${theme.appBorderColor}`,
-    borderLeft: `1px solid ${theme.appBorderColor}`,
+    borderTop: `1px solid var(--sb-appBorderColor)`,
+    borderLeft: `1px solid var(--sb-appBorderColor)`,
     marginLeft: -1,
 
     borderRadius: `4px 0 0 0`,
 
-    '&:not(:last-child)': { borderRight: `1px solid ${theme.appBorderColor}` },
+    '&:not(:last-child)': { borderRight: `1px solid var(--sb-appBorderColor)` },
     '& + *': {
-      borderLeft: `1px solid ${theme.appBorderColor}`,
+      borderLeft: `1px solid var(--sb-appBorderColor)`,
       borderRadius: 0,
     },
 
     '&:focus': {
-      boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`,
+      boxShadow: `0 -3px 0 0 inset var(--sb-color-secondary)`,
       outline: '0 none',
 
       '@media (forced-colors: active)': {
         outline: '1px solid highlight',
       },
     },
-  }),
+  },
   ({ disabled }) =>
     disabled && {
       cursor: 'not-allowed',
diff --git a/code/core/src/components/components/ActionList/ActionList.tsx b/code/core/src/components/components/ActionList/ActionList.tsx
index 0c6abee84258..f7df2f135020 100644
--- a/code/core/src/components/components/ActionList/ActionList.tsx
+++ b/code/core/src/components/components/ActionList/ActionList.tsx
@@ -20,14 +20,14 @@ const ActionListItem = styled.li<{
     minHeight: 32,
     gap: 4,
 
-    fontSize: theme.typography.size.s1,
-    fontWeight: active ? theme.typography.weight.bold : theme.typography.weight.regular,
-    color: active ? 'var(--listbox-item-active-color)' : theme.color.defaultText,
+    fontSize: `var(--sb-typography-size-s1)`,
+    fontWeight: active ? 'var(--sb-typography-weight-bold)' : 'var(--sb-typography-weight-regular)',
+    color: active ? 'var(--listbox-item-active-color)' : 'var(--sb-color-defaultText)',
     '--listbox-item-active-color':
-      theme.base === 'light' ? darken(0.1, theme.color.secondary) : theme.color.secondary,
+      theme.base === 'light' ? darken(0.1, theme.color.secondary) : 'var(--sb-color-secondary)',
     '--listbox-item-muted-color': active
       ? 'var(--listbox-item-active-color)'
-      : theme.color.mediumdark,
+      : 'var(--sb-color-mediumdark)',
 
     '&[aria-disabled="true"]': {
       opacity: 0.5,
@@ -35,7 +35,7 @@ const ActionListItem = styled.li<{
     },
     '&[aria-selected="true"]': {
       color: 'var(--listbox-item-active-color)',
-      fontWeight: theme.typography.weight.bold,
+      fontWeight: 'var(--sb-typography-weight-bold)',
       '--listbox-item-muted-color': 'var(--listbox-item-active-color)',
     },
 
@@ -46,7 +46,7 @@ const ActionListItem = styled.li<{
 
     '&[role="option"]': {
       cursor: 'pointer',
-      borderRadius: theme.input.borderRadius,
+      borderRadius: 'var(--sb-input-borderRadius)',
       outlineOffset: -2,
       padding: '0 9px',
       gap: 8,
@@ -55,7 +55,7 @@ const ActionListItem = styled.li<{
         background: transparentize(0.86, theme.color.secondary),
       },
       '&:focus-visible': {
-        outline: `2px solid ${theme.color.secondary}`,
+        outline: `2px solid var(--sb-color-secondary)`,
       },
     },
 
@@ -149,7 +149,7 @@ const ActionListToggle = forwardRef<HTMLButtonElement, ComponentProps<typeof Sty
   }
 );
 
-const ActionListAction = styled(ActionListButton)(({ theme }) => ({
+const ActionListAction = styled(ActionListButton)({
   height: 'auto',
   minHeight: 32,
   flex: '0 1 100%',
@@ -164,16 +164,16 @@ const ActionListAction = styled(ActionListButton)(({ theme }) => ({
     outline: 'none',
   },
   '&:has(input:focus-visible)': {
-    outline: `2px solid ${theme.color.secondary}`,
+    outline: `2px solid var(--sb-color-secondary)`,
     outlineOffset: -2,
   },
-}));
+});
 
 const ActionListLink = (
   props: ComponentProps<typeof ActionListAction> & React.AnchorHTMLAttributes<HTMLAnchorElement>
 ) => <ActionListAction as="a" {...props} />;
 
-const ActionListText = styled.div(({ theme }) => ({
+const ActionListText = styled.div({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'center',
@@ -193,7 +193,7 @@ const ActionListText = styled.div(({ theme }) => ({
   },
   '& small': {
     fontSize: 'inherit',
-    color: theme.textMutedColor,
+    color: 'var(--sb-textMutedColor)',
   },
   '&:first-child': {
     paddingLeft: 8,
@@ -207,7 +207,7 @@ const ActionListText = styled.div(({ theme }) => ({
   'button > &:last-child, [role="option"] > &:last-child': {
     paddingRight: 0,
   },
-}));
+});
 
 const ActionListIcon = styled.div({
   display: 'flex',
@@ -220,14 +220,14 @@ const ActionListIcon = styled.div({
 });
 
 export const ActionList = Object.assign(
-  styled.ul(({ theme, onClick }) => ({
+  styled.ul(({ onClick }) => ({
     listStyle: 'none',
     margin: 0,
     padding: 4,
     cursor: onClick ? 'pointer' : 'default',
 
     '& + *': {
-      borderTop: `1px solid ${theme.appBorderColor}`,
+      borderTop: `1px solid var(--sb-appBorderColor)`,
     },
   })),
   {
diff --git a/code/core/src/components/components/Badge/Badge.tsx b/code/core/src/components/components/Badge/Badge.tsx
index b6ffe656dded..987e2c0f217d 100644
--- a/code/core/src/components/components/Badge/Badge.tsx
+++ b/code/core/src/components/components/Badge/Badge.tsx
@@ -4,12 +4,12 @@ import { darken, transparentize } from 'polished';
 import { styled } from 'storybook/theming';
 
 const BadgeWrapper = styled.div<BadgeProps>(
-  ({ theme, compact }) => ({
+  ({ compact }) => ({
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontSize: theme.typography.size.s1,
-    fontWeight: theme.typography.weight.bold,
+    fontSize: `var(--sb-typography-size-s1)`,
+    fontWeight: 'var(--sb-typography-weight-bold)',
     lineHeight: '12px',
     minWidth: 20,
     borderRadius: 20,
@@ -31,44 +31,46 @@ const BadgeWrapper = styled.div<BadgeProps>(
     switch (status) {
       case 'critical': {
         return {
-          color: theme.fgColor.critical,
-          background: theme.bgColor.critical,
-          boxShadow: `inset 0 0 0 1px ${theme.borderColor.critical}`,
+          color: 'var(--sb-fgColor-critical)',
+          background: 'var(--sb-bgColor-critical)',
+          boxShadow: `inset 0 0 0 1px var(--sb-borderColor-critical)`,
         };
       }
       case 'negative': {
         return {
-          color: theme.fgColor.negative,
-          background: theme.bgColor.negative,
-          boxShadow: `inset 0 0 0 1px ${theme.borderColor.negative}`,
+          color: 'var(--sb-fgColor-negative)',
+          background: 'var(--sb-bgColor-negative)',
+          boxShadow: `inset 0 0 0 1px var(--sb-borderColor-negative)`,
         };
       }
       case 'warning': {
         return {
-          color: theme.fgColor.warning,
-          background: theme.bgColor.warning,
-          boxShadow: `inset 0 0 0 1px ${theme.borderColor.warning}`,
+          color: 'var(--sb-fgColor-warning)',
+          background: 'var(--sb-bgColor-warning)',
+          boxShadow: `inset 0 0 0 1px var(--sb-borderColor-warning)`,
         };
       }
       case 'neutral': {
         return {
-          color: theme.fgColor.muted,
-          background: theme.base === 'dark' ? theme.barBg : theme.background.app,
+          color: 'var(--sb-fgColor-muted)',
+          background: theme.base === 'dark' ? 'var(--sb-barBg)' : 'var(--sb-background-app)',
           boxShadow: `inset 0 0 0 1px ${transparentize(0.8, theme.textMutedColor)}`,
         };
       }
       case 'positive': {
         return {
-          color: theme.fgColor.positive,
-          background: theme.bgColor.positive,
-          boxShadow: `inset 0 0 0 1px ${theme.borderColor.positive}`,
+          color: 'var(--sb-fgColor-positive)',
+          background: 'var(--sb-bgColor-positive)',
+          boxShadow: `inset 0 0 0 1px var(--sb-borderColor-positive)`,
         };
       }
       case 'active': {
         return {
           color:
-            theme.base === 'light' ? darken(0.1, theme.color.secondary) : theme.color.secondary,
-          background: theme.background.hoverable,
+            theme.base === 'light'
+              ? darken(0.1, theme.color.secondary)
+              : 'var(--sb-color-secondary)',
+          background: 'var(--sb-background-hoverable)',
           boxShadow: `inset 0 0 0 1px ${transparentize(0.9, theme.color.secondary)}`,
         };
       }
diff --git a/code/core/src/components/components/Bar/Bar.stories.tsx b/code/core/src/components/components/Bar/Bar.stories.tsx
index 71140d2a6086..b68adda0be74 100644
--- a/code/core/src/components/components/Bar/Bar.stories.tsx
+++ b/code/core/src/components/components/Bar/Bar.stories.tsx
@@ -5,12 +5,12 @@ import { styled } from 'storybook/theming';
 import preview from '../../../../../.storybook/preview';
 import { Bar } from './Bar';
 
-const Wrapper = styled.div(({ theme }) => ({
-  background: theme.background.app,
-  border: `1px solid ${theme.appBorderColor}`,
+const Wrapper = styled.div({
+  background: 'var(--sb-background-app)',
+  border: `1px solid var(--sb-appBorderColor)`,
   maxWidth: 500,
   height: 200,
-}));
+});
 
 const meta = preview.meta({
   component: Bar,
diff --git a/code/core/src/components/components/Bar/Bar.tsx b/code/core/src/components/components/Bar/Bar.tsx
index 88dd97510557..2f494e616658 100644
--- a/code/core/src/components/components/Bar/Bar.tsx
+++ b/code/core/src/components/components/Bar/Bar.tsx
@@ -14,13 +14,13 @@ export interface BarProps {
 }
 
 const StyledBar = styled.div<BarProps>(
-  ({ backgroundColor, border = false, innerStyle = {}, scrollable, theme }) => ({
-    color: theme.barTextColor,
+  ({ backgroundColor, border = false, innerStyle = {}, scrollable }) => ({
+    color: 'var(--sb-barTextColor)',
     width: '100%',
     minHeight: 40,
     flexShrink: 0,
     // TODO in Storybook 11: Apply background regardless of border.
-    scrollbarColor: `${theme.barTextColor} ${border ? backgroundColor || theme.barBg : 'transparent'}`,
+    scrollbarColor: `var(--sb-barTextColor) ${border ? backgroundColor || 'var(--sb-barBg)' : 'transparent'}`,
     scrollbarWidth: 'thin',
     overflow: scrollable ? 'auto' : 'hidden',
     overflowY: 'hidden',
@@ -31,8 +31,8 @@ const StyledBar = styled.div<BarProps>(
     // TODO in Storybook 11: Apply background regardless of border.
     ...(border
       ? {
-          boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
-          background: backgroundColor || theme.barBg,
+          boxShadow: `var(--sb-appBorderColor)  0 -1px 0 0 inset`,
+          background: backgroundColor || 'var(--sb-barBg)',
         }
       : {}),
     ...innerStyle,
diff --git a/code/core/src/components/components/Bar/Separator.tsx b/code/core/src/components/components/Bar/Separator.tsx
index eb6ada9779f1..b8776bbfea4c 100644
--- a/code/core/src/components/components/Bar/Separator.tsx
+++ b/code/core/src/components/components/Bar/Separator.tsx
@@ -7,14 +7,14 @@ export interface SeparatorProps {
 }
 
 export const Separator = styled.span<SeparatorProps>(
-  ({ theme }) => ({
+  {
     display: 'inline-block',
     width: 1,
     height: 20,
-    background: theme.appBorderColor,
+    background: 'var(--sb-appBorderColor)',
     marginLeft: 2,
     marginRight: 2,
-  }),
+  },
   ({ force }) =>
     force
       ? {}
diff --git a/code/core/src/components/components/Button/Button.tsx b/code/core/src/components/components/Button/Button.tsx
index dbf24c1622df..c295a4434c85 100644
--- a/code/core/src/components/components/Button/Button.tsx
+++ b/code/core/src/components/components/Button/Button.tsx
@@ -218,16 +218,18 @@ const StyledButton = styled('button', {
     userSelect: 'none',
     opacity: disabled && !readOnly ? 0.5 : 1,
     margin: 0,
-    fontSize: `${theme.typography.size.s1}px`,
-    fontWeight: theme.typography.weight.bold,
+    fontSize: `var(--sb-typography-size-s1)`,
+    fontWeight: 'var(--sb-typography-weight-bold)',
     lineHeight: '1',
     background: (() => {
       if (variant === 'solid') {
-        return theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary);
+        return theme.base === 'light'
+          ? 'var(--sb-color-secondary)'
+          : darken(0.18, theme.color.secondary);
       }
 
       if (variant === 'outline') {
-        return theme.button.background;
+        return 'var(--sb-button-background)';
       }
 
       if (variant === 'ghost' && active) {
@@ -246,16 +248,18 @@ const StyledButton = styled('button', {
       }
 
       if (variant === 'ghost' && active) {
-        return theme.base === 'light' ? darken(0.1, theme.color.secondary) : theme.color.secondary;
+        return theme.base === 'light'
+          ? darken(0.1, theme.color.secondary)
+          : 'var(--sb-color-secondary)';
       }
 
       if (variant === 'ghost') {
-        return theme.textMutedColor;
+        return 'var(--sb-textMutedColor)';
       }
-      return theme.input.color;
+      return 'var(--sb-input-color)';
     })(),
-    boxShadow: variant === 'outline' ? `${theme.button.border} 0 0 0 1px inset` : 'none',
-    borderRadius: theme.input.borderRadius,
+    boxShadow: variant === 'outline' ? `0 0 0 1px inset var(--sb-button-border)` : 'none',
+    borderRadius: 'var(--sb-input-borderRadius)',
     // Making sure that the button never shrinks below its minimum size
     flexShrink: 0,
 
@@ -284,7 +288,7 @@ const StyledButton = styled('button', {
       },
 
       '&:active': {
-        color: variant === 'ghost' ? theme.color.secondary : undefined,
+        color: variant === 'ghost' ? 'var(--sb-color-secondary)' : undefined,
         background: (() => {
           let bgColor = theme.color.secondary;
 
@@ -297,7 +301,7 @@ const StyledButton = styled('button', {
           }
 
           if (variant === 'ghost') {
-            return theme.background.hoverable;
+            return 'var(--sb-background-hoverable)';
           }
           return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
         })(),
diff --git a/code/core/src/components/components/Card/Card.tsx b/code/core/src/components/components/Card/Card.tsx
index add8eef940e5..c5757ac76a3f 100644
--- a/code/core/src/components/components/Card/Card.tsx
+++ b/code/core/src/components/components/Card/Card.tsx
@@ -26,11 +26,11 @@ const slide = keyframes({
   },
 });
 
-const CardContent = styled.div(({ theme }) => ({
-  borderRadius: theme.appBorderRadius,
-  backgroundColor: theme.background.content,
+const CardContent = styled.div({
+  borderRadius: 'var(--sb-appBorderRadius)',
+  backgroundColor: 'var(--sb-background-content)',
   position: 'relative',
-}));
+});
 
 const CardOutline = styled.div<{
   animation?: 'none' | 'rainbow' | 'spin';
@@ -40,9 +40,9 @@ const CardOutline = styled.div<{
   width: '100%',
   padding: 1,
   overflow: 'hidden',
-  backgroundColor: theme.background.content,
-  borderRadius: theme.appBorderRadius + 1,
-  boxShadow: `inset 0 0 0 1px ${(animation === 'none' && color && theme.color[color]) || theme.appBorderColor}, var(--card-box-shadow, transparent 0 0)`,
+  backgroundColor: 'var(--sb-background-content)',
+  borderRadius: 'calc(var(--sb-appBorderRadius) + 1px)',
+  boxShadow: `inset 0 0 0 1px ${(animation === 'none' && color && theme.color[color]) || 'var(--sb-appBorderColor)'}, var(--card-box-shadow, transparent 0 0)`,
   transition: 'box-shadow 1s',
 
   '@supports (interpolate-size: allow-keywords)': {
diff --git a/code/core/src/components/components/ErrorFormatter/ErrorFormatter.tsx b/code/core/src/components/components/ErrorFormatter/ErrorFormatter.tsx
index 7d28f6971ad9..1f54f187badc 100644
--- a/code/core/src/components/components/ErrorFormatter/ErrorFormatter.tsx
+++ b/code/core/src/components/components/ErrorFormatter/ErrorFormatter.tsx
@@ -6,16 +6,16 @@ import { styled } from 'storybook/theming';
 
 const { document } = global;
 
-const ErrorName = styled.strong(({ theme }) => ({
-  color: theme.color.orange,
-}));
-const ErrorImportant = styled.strong(({ theme }) => ({
-  color: theme.color.ancillary,
+const ErrorName = styled.strong({
+  color: 'var(--sb-color-orange)',
+});
+const ErrorImportant = styled.strong({
+  color: 'var(--sb-color-ancillary)',
   textDecoration: 'underline',
-}));
-const ErrorDetail = styled.em(({ theme }) => ({
-  color: theme.textMutedColor,
-}));
+});
+const ErrorDetail = styled.em({
+  color: 'var(--sb-textMutedColor)',
+});
 
 const firstLineRegex = /(Error): (.*)\n/;
 const linesRegexChromium = /at (?:(.*) )?\(?(.+)\)?/;
diff --git a/code/core/src/components/components/Form/Checkbox.tsx b/code/core/src/components/components/Form/Checkbox.tsx
index f298e1db5115..310b6701154b 100644
--- a/code/core/src/components/components/Form/Checkbox.tsx
+++ b/code/core/src/components/components/Form/Checkbox.tsx
@@ -4,7 +4,7 @@ import { color, styled } from 'storybook/theming';
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
-  backgroundColor: theme.input.background,
+  backgroundColor: 'var(--sb-input-background)',
   border: `1px solid ${theme.base === 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
   borderRadius: 2,
   display: 'grid',
@@ -20,14 +20,14 @@ const Input = styled.input(({ theme }) => ({
   },
   '&:disabled': {
     backgroundColor: 'transparent',
-    borderColor: theme.input.border,
+    borderColor: 'var(--sb-input-border)',
   },
   '&:disabled:checked, &:disabled:indeterminate': {
-    backgroundColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
+    backgroundColor: theme.base === 'dark' ? 'var(--sb-color-dark)' : 'var(--sb-color-mediumdark)',
   },
   '&:checked, &:indeterminate': {
     border: 'none',
-    backgroundColor: color.secondary,
+    backgroundColor: color.secondary, // TODO Can't use theme.color.secondary on dark theme
   },
   '&:checked::before': {
     content: '""',
@@ -42,7 +42,7 @@ const Input = styled.input(({ theme }) => ({
     background: 'white',
   },
   '&:enabled:focus-visible': {
-    outline: `2px solid ${theme.color.secondary}`,
+    outline: `2px solid var(--sb-color-secondary)`,
     outlineOffset: 2,
   },
 }));
diff --git a/code/core/src/components/components/Form/Field.tsx b/code/core/src/components/components/Form/Field.tsx
index 9e311d4006c7..3a38d50fc1f0 100644
--- a/code/core/src/components/components/Form/Field.tsx
+++ b/code/core/src/components/components/Form/Field.tsx
@@ -2,26 +2,26 @@ import React, { type ReactNode } from 'react';
 
 import { styled } from 'storybook/theming';
 
-const Wrapper = styled.label(({ theme }) => ({
+const Wrapper = styled.label({
   display: 'flex',
-  borderBottom: `1px solid ${theme.appBorderColor}`,
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
   margin: '0 15px',
   padding: '8px 0',
 
   '&:last-child': {
     marginBottom: '3rem',
   },
-}));
+});
 
-const Label = styled.span(({ theme }) => ({
+const Label = styled.span({
   minWidth: 100,
-  fontWeight: theme.typography.weight.bold,
+  fontWeight: 'var(--sb-typography-weight-bold)',
   marginRight: 15,
   display: 'flex',
   justifyContent: 'flex-start',
   alignItems: 'center',
   lineHeight: '16px',
-}));
+});
 
 export interface FieldProps {
   children?: ReactNode;
diff --git a/code/core/src/components/components/Form/Radio.tsx b/code/core/src/components/components/Form/Radio.tsx
index 53a3c8759e84..6bd0c52212e2 100644
--- a/code/core/src/components/components/Form/Radio.tsx
+++ b/code/core/src/components/components/Form/Radio.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { color, styled } from 'storybook/theming';
+import { styled } from 'storybook/theming';
 
 const Input = styled.input(({ theme }) => ({
   appearance: 'none',
-  backgroundColor: theme.input.background,
+  backgroundColor: 'var(--sb-input-background)',
   border: `1px solid ${theme.base === 'dark' ? 'hsl(0 0 100 / 0.4)' : 'hsl(0 0 0 / 0.44)'}`,
   borderRadius: 8,
   display: 'grid',
@@ -20,19 +20,19 @@ const Input = styled.input(({ theme }) => ({
   },
   '&:disabled': {
     backgroundColor: 'transparent',
-    borderColor: theme.input.border,
+    borderColor: 'var(--sb-input-border)',
   },
   '&:disabled:checked': {
-    backgroundColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
-    borderColor: theme.base === 'dark' ? color.dark : theme.color.mediumdark,
+    backgroundColor: theme.base === 'dark' ? 'var(--sb-color-dark)' : 'var(--sb-color-mediumdark)',
+    borderColor: theme.base === 'dark' ? 'var(--sb-color-dark)' : 'var(--sb-color-mediumdark)',
   },
   '&:checked': {
-    backgroundColor: color.secondary,
-    borderColor: color.secondary,
-    boxShadow: `inset 0 0 0 2px ${theme.input.background}`,
+    backgroundColor: 'var(--sb-color-secondary)',
+    borderColor: 'var(--sb-color-secondary)',
+    boxShadow: `inset 0 0 0 2px var(--sb-input-background)`,
   },
   '&:enabled:focus-visible': {
-    outline: `2px solid ${theme.color.secondary}`,
+    outline: `2px solid var(--sb-color-secondary)`,
     outlineOffset: 2,
   },
 }));
diff --git a/code/core/src/components/components/Form/Select.tsx b/code/core/src/components/components/Form/Select.tsx
index e85b6583808c..fec0813e36bf 100644
--- a/code/core/src/components/components/Form/Select.tsx
+++ b/code/core/src/components/components/Form/Select.tsx
@@ -26,14 +26,14 @@ const BaseSelect = styled.select<SelectProps>(sizes, ({ theme }) => ({
   padding: '6px 30px 6px 10px',
   '@supports (appearance: base-select)': {
     appearance: 'base-select' as CSSProperties['appearance'],
-    background: theme.input.background,
+    background: 'var(--sb-input-background)',
     padding: '6px 10px',
   },
   transition: 'box-shadow 200ms ease-out, opacity 200ms ease-out',
-  color: theme.input.color || 'inherit',
-  boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-  borderRadius: theme.input.borderRadius,
-  fontSize: theme.typography.size.s2 - 1,
+  color: 'var(--sb-input-color, inherit)',
+  boxShadow: `0 0 0 1px inset var(--sb-input-border)`,
+  borderRadius: 'var(--sb-input-borderRadius)',
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   lineHeight: '20px',
   boxSizing: 'border-box',
   border: 'none',
@@ -47,15 +47,15 @@ const BaseSelect = styled.select<SelectProps>(sizes, ({ theme }) => ({
     '& > svg': {
       width: 14,
       height: 14,
-      color: theme.textMutedColor,
+      color: 'var(--sb-textMutedColor)',
     },
   },
   '&:has(option:not([hidden]):checked)': {
-    color: theme.color.defaultText,
+    color: 'var(--sb-color-defaultText)',
   },
   '&:focus-visible, &:focus-within': {
     outline: 'none',
-    boxShadow: `${theme.color.secondary} 0 0 0 1px inset`,
+    boxShadow: `0 0 0 1px inset var(--sb-color-secondary)`,
   },
   '&::picker-icon': {
     display: 'none',
@@ -65,13 +65,13 @@ const BaseSelect = styled.select<SelectProps>(sizes, ({ theme }) => ({
     border: '1px solid #e4e4e7',
     padding: 4,
     marginTop: 4,
-    background: theme.base === 'light' ? lighten(theme.background.app) : theme.background.app,
+    background: theme.base === 'light' ? lighten(theme.background.app) : 'var(--sb-background-app)',
     filter: `
       drop-shadow(0 5px 5px rgba(0,0,0,0.05))
       drop-shadow(0 0 3px rgba(0,0,0,0.1))
     `,
-    borderRadius: theme.appBorderRadius + 2,
-    fontSize: theme.typography.size.s1,
+    borderRadius: 'calc(var(--sb-appBorderRadius) + 2px)',
+    fontSize: 'var(--sb-typography-size-s1)',
     cursor: 'default',
     transition: 'opacity 100ms ease-in-out, transform 100ms ease-in-out',
     transformOrigin: 'top',
@@ -92,21 +92,21 @@ const BaseSelect = styled.select<SelectProps>(sizes, ({ theme }) => ({
     borderRadius: 4,
     outline: 'none',
     cursor: 'pointer',
-    color: theme.color.defaultText,
+    color: 'var(--sb-color-defaultText)',
     '&::checkmark': {
       display: 'none',
     },
     '&:hover, &:focus-visible': {
-      backgroundColor: theme.background.hoverable,
+      backgroundColor: 'var(--sb-background-hoverable)',
     },
     '&:checked': {
-      color: theme.color.secondary,
-      fontWeight: theme.typography.weight.bold,
+      color: 'var(--sb-color-secondary)',
+      fontWeight: 'var(--sb-typography-weight-bold)',
     },
     '&:disabled': {
       backgroundColor: 'transparent',
       cursor: 'default',
-      color: theme.color.defaultText,
+      color: 'var(--sb-color-defaultText)',
     },
   },
 }));
diff --git a/code/core/src/components/components/Loader/Loader.tsx b/code/core/src/components/components/Loader/Loader.tsx
index 8f1865b9e4eb..eae524033dc2 100644
--- a/code/core/src/components/components/Loader/Loader.tsx
+++ b/code/core/src/components/components/Loader/Loader.tsx
@@ -52,26 +52,26 @@ const ProgressTrack = styled.div(({ theme }) => ({
   cursor: 'progress',
 }));
 
-const ProgressBar = styled.div(({ theme }) => ({
+const ProgressBar = styled.div({
   position: 'absolute',
   top: 0,
   left: 0,
   height: '100%',
-  background: theme.color.secondary,
-}));
+  background: 'var(--sb-color-secondary)',
+});
 
-const ProgressMessage = styled.div(({ theme }) => ({
+const ProgressMessage = styled.div({
   minHeight: '2em',
-  fontSize: `${theme.typography.size.s1}px`,
-  color: theme.textMutedColor,
-}));
+  fontSize: 'var(--sb-typography-size-s1)',
+  color: 'var(--sb-textMutedColor)',
+});
 
-const ErrorIcon = styled(LightningOffIcon)(({ theme }) => ({
+const ErrorIcon = styled(LightningOffIcon)({
   width: 20,
   height: 20,
   marginBottom: '0.5rem',
-  color: theme.textMutedColor,
-}));
+  color: 'var(--sb-textMutedColor)',
+});
 
 const ellipsis = keyframes`
   from { content: "..." }
diff --git a/code/core/src/components/components/Modal/Modal.styled.tsx b/code/core/src/components/components/Modal/Modal.styled.tsx
index 2b9fa8394e72..27508be24253 100644
--- a/code/core/src/components/components/Modal/Modal.styled.tsx
+++ b/code/core/src/components/components/Modal/Modal.styled.tsx
@@ -100,8 +100,8 @@ export const Container = styled.div<{
   width?: number | string;
   height?: number | string;
 }>(
-  ({ theme }) => ({
-    backgroundColor: theme.background.bar,
+  {
+    backgroundColor: 'var(--sb-background-bar)',
     borderRadius: 6,
     boxShadow: '0px 4px 67px 0px #00000040',
     position: 'absolute',
@@ -111,8 +111,8 @@ export const Container = styled.div<{
     '&:focus-visible': {
       outline: 'none',
     },
-  }),
-  ({ theme, width, height, $variant, $status, $transitionDuration }) =>
+  },
+  ({ width, height, $variant, $status, $transitionDuration }) =>
     $variant === 'dialog'
       ? {
           top: '50%',
@@ -143,7 +143,7 @@ export const Container = styled.div<{
           width: width ?? '100%',
           height: height ?? '80%',
           maxWidth: '100%',
-          background: theme.background.content,
+          background: 'var(--sb-background-content)',
           '@supports (interpolate-size: allow-keywords)': {
             interpolateSize: 'allow-keywords',
           },
@@ -253,18 +253,18 @@ export const Header = ({
 
 export const Title = styled((props: ComponentProps<typeof Heading>) => (
   <Heading level={2} {...props} />
-))(({ theme }) => ({
+))({
   margin: 0,
-  fontSize: theme.typography.size.s3,
-  fontWeight: theme.typography.weight.bold,
-}));
+  fontSize: 'var(--sb-typography-size-s3)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
-export const Description = styled(Text)(({ theme }) => ({
+export const Description = styled(Text)({
   position: 'relative',
   zIndex: 1,
   margin: 0,
-  fontSize: theme.typography.size.s2,
-}));
+  fontSize: 'var(--sb-typography-size-s2)',
+});
 
 export const Actions = styled.div({
   display: 'flex',
@@ -272,21 +272,21 @@ export const Actions = styled.div({
   gap: 8,
 });
 
-export const ErrorWrapper = styled.div(({ theme }) => ({
+export const ErrorWrapper = styled.div({
   maxHeight: 100,
   overflow: 'auto',
   '@media (prefers-reduced-motion: no-preference)': {
     animation: `${expand} 300ms, ${fadeIn} 300ms`,
   },
-  backgroundColor: theme.background.critical,
-  color: theme.color.lightest,
-  fontSize: theme.typography.size.s2,
+  backgroundColor: 'var(--sb-background-critical)',
+  color: 'var(--sb-color-lightest)',
+  fontSize: 'var(--sb-typography-size-s2)',
 
   '& > div': {
     position: 'relative',
     padding: '8px 16px',
   },
-}));
+});
 
 export const Error = ({
   children,
diff --git a/code/core/src/components/components/Popover/Popover.tsx b/code/core/src/components/components/Popover/Popover.tsx
index 20614d2f8d70..9d3134aab48f 100644
--- a/code/core/src/components/components/Popover/Popover.tsx
+++ b/code/core/src/components/components/Popover/Popover.tsx
@@ -40,26 +40,27 @@ const Wrapper = styled.div<{
     colorScheme: 'light dark',
     padding,
   }),
-  ({ theme, hasChrome }) =>
+  ({ hasChrome }) =>
     hasChrome
       ? {
           filter: `
             drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
-          borderRadius: theme.appBorderRadius + 2,
-          fontSize: theme.typography.size.s1,
+          borderRadius: 'calc(var(--sb-appBorderRadius) + 2px)',
+          fontSize: 'var(--sb-typography-size-s1)',
         }
       : {},
   ({ theme, bgColor }) =>
     bgColor === 'default' && {
-      background: theme.base === 'light' ? lighten(theme.background.app) : theme.background.app,
-      color: theme.color.defaultText,
+      background:
+        theme.base === 'light' ? lighten(theme.background.app) : 'var(--sb-background-app)',
+      color: 'var(--sb-color-defaultText)',
     },
   ({ theme, bgColor }) =>
     bgColor === 'inverse' && {
-      background: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-      color: theme.color.inverseText,
+      background: theme.base === 'light' ? 'var(--sb-color-darkest)' : 'var(--sb-color-lightest)',
+      color: 'var(--sb-color-inverseText)',
     },
   ({ theme, bgColor }) =>
     (bgColor === 'positive' || bgColor === 'negative' || bgColor === 'warning') && {
diff --git a/code/core/src/components/components/Popover/PopoverProvider.tsx b/code/core/src/components/components/Popover/PopoverProvider.tsx
index 7b953613c32a..acf34ebe35fc 100644
--- a/code/core/src/components/components/Popover/PopoverProvider.tsx
+++ b/code/core/src/components/components/Popover/PopoverProvider.tsx
@@ -1,5 +1,5 @@
 import type { DOMAttributes, ReactElement, ReactNode } from 'react';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 
 import { Pressable } from '@react-aria/interactions';
 import { DialogTrigger } from 'react-aria-components/patched-dist/Dialog';
@@ -66,6 +66,11 @@ export const PopoverProvider = ({
   onVisibleChange,
   ...props
 }: PopoverProviderProps) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const boundaryElement =
+    (globalThis.__STORYBOOK_PREVIEW__ && elementRef.current?.closest('[id^="sb-theme-"]')) ||
+    document.body;
+
   // Map Popper.js placement to react-aria placement best we can.
   const placement = convertToReactAriaPlacement(placementProp);
 
@@ -86,8 +91,13 @@ export const PopoverProvider = ({
       onOpenChange={onOpenChange}
       {...props}
     >
-      <Pressable>{children}</Pressable>
-      <PopoverUpstream placement={placement} offset={offset} style={{ outline: 'none' }}>
+      <Pressable ref={elementRef}>{children}</Pressable>
+      <PopoverUpstream
+        boundaryElement={boundaryElement}
+        placement={placement}
+        offset={offset}
+        style={{ outline: 'none' }}
+      >
         <Popover
           hasChrome={hasChrome}
           hideLabel={closeLabel}
diff --git a/code/core/src/components/components/ScrollArea/ScrollArea.tsx b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
index 8a45f2056881..567f8a1a201d 100644
--- a/code/core/src/components/components/ScrollArea/ScrollArea.tsx
+++ b/code/core/src/components/components/ScrollArea/ScrollArea.tsx
@@ -56,9 +56,9 @@ const ScrollAreaScrollbar = styled(ScrollAreaPrimitive.Scrollbar)<{
   },
 }));
 
-const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
+const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)({
   flex: 1,
-  background: theme.textMutedColor,
+  background: 'var(--sb-textMutedColor)',
   opacity: 0.5,
   borderRadius: `var(--scrollbar-size)`,
   position: 'relative',
@@ -77,7 +77,7 @@ const ScrollAreaThumb = styled(ScrollAreaPrimitive.Thumb)(({ theme }) => ({
     width: '100%',
     height: '100%',
   },
-}));
+});
 
 export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
   (
diff --git a/code/core/src/components/components/Select/Select.tsx b/code/core/src/components/components/Select/Select.tsx
index cd3f59be067f..8e353c753c28 100644
--- a/code/core/src/components/components/Select/Select.tsx
+++ b/code/core/src/components/components/Select/Select.tsx
@@ -84,11 +84,11 @@ function valueToId(parentId: string, { value }: InternalOption | ResetOption): s
   return `${parentId}-opt-${String(value) ?? 'sb-reset'}`;
 }
 
-const SelectedOptionCount = styled.span(({ theme }) => ({
+const SelectedOptionCount = styled.span({
   appearance: 'none',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   fontSize: 12,
-}));
+});
 
 function setSelectedFromDefault(
   options: SelectProps['options'],
@@ -114,7 +114,9 @@ const StyledButton = styled(Button)<ButtonProps & { $hasSelection?: boolean; $is
           boxShadow: 'none',
           background: transparentize(0.93, theme.barSelectedColor),
           color:
-            theme.base === 'light' ? darken(0.1, theme.color.secondary) : theme.color.secondary,
+            theme.base === 'light'
+              ? darken(0.1, theme.color.secondary)
+              : 'var(--sb-color-secondary)',
         }
       : {}
 );
diff --git a/code/core/src/components/components/Tabs/Button.tsx b/code/core/src/components/components/Tabs/Button.tsx
index 89ab4df8e85f..9d9e9583ae2c 100644
--- a/code/core/src/components/components/Tabs/Button.tsx
+++ b/code/core/src/components/components/Tabs/Button.tsx
@@ -103,7 +103,7 @@ const StyledTabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })
       display: 'none',
     },
   },
-  ({ theme }) => ({
+  {
     padding: '0 15px',
     transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
     height: 40,
@@ -118,20 +118,20 @@ const StyledTabButton = styled(ButtonOrLink, { shouldForwardProp: isPropValid })
 
     '&:focus': {
       outline: '0 none',
-      borderBottomColor: theme.barSelectedColor,
+      borderBottomColor: 'var(--sb-barSelectedColor)',
     },
-  }),
-  ({ active, textColor, theme }) =>
+  },
+  ({ active, textColor }) =>
     active
       ? {
-          color: textColor || theme.barSelectedColor,
-          borderBottomColor: theme.barSelectedColor,
+          color: textColor || 'var(--sb-barSelectedColor)',
+          borderBottomColor: 'var(--sb-barSelectedColor)',
         }
       : {
-          color: textColor || theme.barTextColor,
+          color: textColor || 'var(--sb-barTextColor)',
           borderBottomColor: 'transparent',
           '&:hover': {
-            color: theme.barHoverColor,
+            color: 'var(--sb-barHoverColor)',
           },
         }
 );
diff --git a/code/core/src/components/components/Tabs/EmptyTabContent.tsx b/code/core/src/components/components/Tabs/EmptyTabContent.tsx
index 8cdc5c0100ce..d4de7fd017b5 100644
--- a/code/core/src/components/components/Tabs/EmptyTabContent.tsx
+++ b/code/core/src/components/components/Tabs/EmptyTabContent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { styled } from 'storybook/theming';
 
-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div({
   height: '100%',
   display: 'flex',
   padding: 30,
@@ -10,8 +10,8 @@ const Wrapper = styled.div(({ theme }) => ({
   justifyContent: 'center',
   flexDirection: 'column',
   gap: 15,
-  background: theme.background.content,
-}));
+  background: 'var(--sb-background-content)',
+});
 
 const Content = styled.div({
   display: 'flex',
@@ -20,23 +20,23 @@ const Content = styled.div({
   maxWidth: 415,
 });
 
-const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2 - 1,
+const Title = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   textAlign: 'center',
-  color: theme.color.defaultText,
-}));
+  color: 'var(--sb-color-defaultText)',
+});
 
-const Footer = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
-}));
+const Footer = styled.div({
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
+});
 
-const Description = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.regular,
-  fontSize: theme.typography.size.s2 - 1,
+const Description = styled.div({
+  fontWeight: 'var(--sb-typography-weight-regular)',
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   textAlign: 'center',
-  color: theme.textMutedColor,
-}));
+  color: 'var(--sb-textMutedColor)',
+});
 
 interface Props {
   title: React.ReactNode;
diff --git a/code/core/src/components/components/Tabs/StatelessTab.tsx b/code/core/src/components/components/Tabs/StatelessTab.tsx
index a91febe46fcb..6e974cb066f5 100644
--- a/code/core/src/components/components/Tabs/StatelessTab.tsx
+++ b/code/core/src/components/components/Tabs/StatelessTab.tsx
@@ -12,7 +12,7 @@ export interface StatelessTabProps {
   children: React.ReactNode;
 }
 
-const StyledTab = styled(Tab)(({ theme }) => ({
+const StyledTab = styled(Tab)({
   whiteSpace: 'normal',
   display: 'inline-flex',
   overflow: 'hidden',
@@ -41,18 +41,18 @@ const StyledTab = styled(Tab)(({ theme }) => ({
   fontSize: 13,
   '&:focus-visible': {
     outline: '0 none',
-    boxShadow: `inset 0 0 0 2px ${theme.barSelectedColor}`,
+    boxShadow: `inset 0 0 0 2px var(--sb-barSelectedColor)`,
   },
-  color: theme.barTextColor,
+  color: 'var(--sb-barTextColor)',
   borderBottomColor: 'transparent',
   '&:hover': {
-    color: theme.barHoverColor,
+    color: 'var(--sb-barHoverColor)',
   },
   '&[data-selected]': {
-    color: theme.barSelectedColor,
-    borderBottomColor: theme.barSelectedColor,
+    color: 'var(--sb-barSelectedColor)',
+    borderBottomColor: 'var(--sb-barSelectedColor)',
   },
-}));
+});
 
 export const StatelessTab: FC<StatelessTabProps> = ({ name, ...props }) => {
   return <StyledTab id={name} {...props} />;
diff --git a/code/core/src/components/components/Tabs/StatelessTabList.tsx b/code/core/src/components/components/Tabs/StatelessTabList.tsx
index 8b182f7d70c0..2f4e58011eb5 100644
--- a/code/core/src/components/components/Tabs/StatelessTabList.tsx
+++ b/code/core/src/components/components/Tabs/StatelessTabList.tsx
@@ -40,16 +40,16 @@ const SCROLL_BUTTON_WIDTH = 28; // 16 width + 6 + 6 padding
 const ScrollButtonContainer = styled.div<{
   $showStartBorder?: boolean;
   $showEndBorder?: boolean;
-}>(({ $showStartBorder, $showEndBorder, theme }) => ({
+}>(({ $showStartBorder, $showEndBorder }) => ({
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   padding: 6,
   boxShadow: $showStartBorder
-    ? `inset 1px 0 0 ${theme.appBorderColor}`
+    ? `inset 1px 0 0 var(--sb-appBorderColor)`
     : $showEndBorder
-      ? `inset -1px 0 0 ${theme.appBorderColor}`
+      ? `inset -1px 0 0 var(--sb-appBorderColor)`
       : 'none',
 }));
 
diff --git a/code/core/src/components/components/Tabs/TabList.tsx b/code/core/src/components/components/Tabs/TabList.tsx
index f1dea68a7068..87b3caf35d93 100644
--- a/code/core/src/components/components/Tabs/TabList.tsx
+++ b/code/core/src/components/components/Tabs/TabList.tsx
@@ -34,7 +34,7 @@ const StyledTabButton = styled.button<{
       display: 'none',
     },
   },
-  ({ theme }) => ({
+  {
     padding: '0 15px',
     transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
     height: 40,
@@ -49,20 +49,20 @@ const StyledTabButton = styled.button<{
 
     '&:focus-visible': {
       outline: '0 none',
-      boxShadow: `inset 0 0 0 2px ${theme.barSelectedColor}`,
+      boxShadow: `inset 0 0 0 2px var(--sb-barSelectedColor)`,
     },
-  }),
-  ({ isSelected, theme }) =>
+  },
+  ({ isSelected }) =>
     isSelected
       ? {
-          color: theme.barSelectedColor,
-          borderBottomColor: theme.barSelectedColor,
+          color: 'var(--sb-barSelectedColor)',
+          borderBottomColor: 'var(--sb-barSelectedColor)',
         }
       : {
-          color: theme.barTextColor,
+          color: 'var(--sb-barTextColor)',
           borderBottomColor: 'transparent',
           '&:hover': {
-            color: theme.barHoverColor,
+            color: 'var(--sb-barHoverColor)',
           },
         }
 );
@@ -99,16 +99,16 @@ const SCROLL_BUTTON_WIDTH = 28; // 16 width + 6 + 6 padding
 const ScrollButtonContainer = styled.div<{
   $showStartBorder?: boolean;
   $showEndBorder?: boolean;
-}>(({ $showStartBorder, $showEndBorder, theme }) => ({
+}>(({ $showStartBorder, $showEndBorder }) => ({
   flexShrink: 0,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
   padding: 6,
   boxShadow: $showStartBorder
-    ? `inset 1px 0 0 ${theme.appBorderColor}`
+    ? `inset 1px 0 0 var(--sb-appBorderColor)`
     : $showEndBorder
-      ? `inset -1px 0 0 ${theme.appBorderColor}`
+      ? `inset -1px 0 0 var(--sb-appBorderColor)`
       : 'none',
 }));
 
diff --git a/code/core/src/components/components/Tabs/Tabs.hooks.tsx b/code/core/src/components/components/Tabs/Tabs.hooks.tsx
index 4e834760b819..740ba09fea9c 100644
--- a/code/core/src/components/components/Tabs/Tabs.hooks.tsx
+++ b/code/core/src/components/components/Tabs/Tabs.hooks.tsx
@@ -12,28 +12,28 @@ import type { Link } from '../tooltip/TooltipLinkList';
 import { TabButton } from './Button';
 import type { ChildrenListComplete } from './Tabs.helpers';
 
-const CollapseIcon = styled.span<{ isActive: boolean }>(({ theme, isActive }) => ({
+const CollapseIcon = styled.span<{ isActive: boolean }>(({ isActive }) => ({
   display: 'inline-block',
   width: 0,
   height: 0,
   marginLeft: 8,
-  color: isActive ? theme.color.secondary : theme.color.mediumdark,
+  color: isActive ? 'var(--sb-color-secondary)' : 'var(--sb-color-mediumdark)',
   borderRight: '3px solid transparent',
   borderLeft: `3px solid transparent`,
   borderTop: '3px solid',
   transition: 'transform .1s ease-out',
 }));
 
-const AddonButton = styled(TabButton)<{ preActive: boolean }>(({ active, theme, preActive }) => {
+const AddonButton = styled(TabButton)<{ preActive: boolean }>(({ active, preActive }) => {
   return `
-    color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
+    color: ${preActive || active ? 'var(--sb-barSelectedColor)' : 'var(--sb-barTextColor)'};
     .addon-collapsible-icon {
-      color: ${preActive || active ? theme.barSelectedColor : theme.barTextColor};
+      color: ${preActive || active ? 'var(--sb-barSelectedColor)' : 'var(--sb-barTextColor)'};
     }
     &:hover {
-      color: ${theme.barHoverColor};
+      color: var(--sb-barHoverColor);
       .addon-collapsible-icon {
-        color: ${theme.barHoverColor};
+        color: var(--sb-barHoverColor);
       }
     }
   `;
diff --git a/code/core/src/components/components/Tabs/Tabs.tsx b/code/core/src/components/components/Tabs/Tabs.tsx
index 0cc1d06ec0be..dee431c338c8 100644
--- a/code/core/src/components/components/Tabs/Tabs.tsx
+++ b/code/core/src/components/components/Tabs/Tabs.tsx
@@ -23,12 +23,12 @@ export interface WrapperProps {
 }
 
 const Wrapper = styled.div<WrapperProps>(
-  ({ theme, bordered }) =>
+  ({ bordered }) =>
     bordered
       ? {
           backgroundClip: 'padding-box',
-          border: `1px solid ${theme.appBorderColor}`,
-          borderRadius: theme.appBorderRadius,
+          border: `1px solid var(--sb-appBorderColor)`,
+          borderRadius: 'var(--sb-appBorderRadius)',
           overflow: 'hidden',
           boxSizing: 'border-box',
         }
@@ -77,14 +77,14 @@ const Content = styled.div<ContentProps>(
     position: 'relative',
     container: 'tab-content / inline-size',
   },
-  ({ theme }) => ({
-    fontSize: theme.typography.size.s2 - 1,
-    background: theme.background.content,
-  }),
-  ({ bordered, theme }) =>
+  {
+    fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
+    background: 'var(--sb-background-content)',
+  },
+  ({ bordered }) =>
     bordered
       ? {
-          borderRadius: `0 0 ${theme.appBorderRadius - 1}px ${theme.appBorderRadius - 1}px`,
+          borderRadius: `0 0 calc(var(--sb-appBorderRadius) - 1px) calc(var(--sb-appBorderRadius) - 1px)`,
         }
       : {},
   ({ absolute, bordered }) =>
diff --git a/code/core/src/components/components/ToggleButton/ToggleButton.tsx b/code/core/src/components/components/ToggleButton/ToggleButton.tsx
index 11fc8c04ef87..5d322a025942 100644
--- a/code/core/src/components/components/ToggleButton/ToggleButton.tsx
+++ b/code/core/src/components/components/ToggleButton/ToggleButton.tsx
@@ -38,8 +38,8 @@ const StyledToggle = styled(Button)<ToggleButtonProps>(
           ...(variant === 'outline'
             ? {
                 background: transparentize(0.94, theme.barSelectedColor),
-                boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
-                color: theme.barSelectedColor,
+                boxShadow: `0 0 0 1px inset var(--sb-barSelectedColor)`,
+                color: 'var(--sb-barSelectedColor)',
               }
             : {}),
           ...(variant === 'ghost'
@@ -48,7 +48,7 @@ const StyledToggle = styled(Button)<ToggleButtonProps>(
                 color:
                   theme.base === 'light'
                     ? darken(0.1, theme.color.secondary)
-                    : theme.color.secondary,
+                    : 'var(--sb-color-secondary)',
               }
             : {}),
         }
diff --git a/code/core/src/components/components/addon-panel/addon-panel.tsx b/code/core/src/components/components/addon-panel/addon-panel.tsx
index 9304980f4ff8..9b0a00a0d4a1 100644
--- a/code/core/src/components/components/addon-panel/addon-panel.tsx
+++ b/code/core/src/components/components/addon-panel/addon-panel.tsx
@@ -28,10 +28,10 @@ export interface AddonPanelProps {
   hasScrollbar?: boolean;
 }
 
-const Div = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
+const Div = styled.div({
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
   height: '100%',
-}));
+});
 
 export const AddonPanel = ({ active, children, hasScrollbar = true }: AddonPanelProps) => {
   return (
diff --git a/code/core/src/components/components/placeholder/placeholder.tsx b/code/core/src/components/components/placeholder/placeholder.tsx
index e535028146da..cf2abacc54eb 100644
--- a/code/core/src/components/components/placeholder/placeholder.tsx
+++ b/code/core/src/components/components/placeholder/placeholder.tsx
@@ -2,18 +2,18 @@ import React, { Children } from 'react';
 
 import { styled } from 'storybook/theming';
 
-const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-}));
+const Title = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
 const Desc = styled.div();
 
-const Message = styled.div(({ theme }) => ({
+const Message = styled.div({
   padding: 30,
   textAlign: 'center',
-  color: theme.color.defaultText,
-  fontSize: theme.typography.size.s2 - 1,
-}));
+  color: 'var(--sb-color-defaultText)',
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
+});
 
 export interface PlaceholderProps {
   children?: React.ReactNode;
diff --git a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
index 58286cec773e..76f8377988af 100644
--- a/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/core/src/components/components/syntaxhighlighter/syntaxhighlighter.tsx
@@ -66,17 +66,17 @@ export interface WrapperProps {
 }
 
 const Wrapper = styled.div<WrapperProps>(
-  ({ theme }) => ({
+  {
     position: 'relative',
     overflow: 'hidden',
-    color: theme.color.defaultText,
-  }),
-  ({ theme, bordered }) =>
+    color: 'var(--sb-color-defaultText)',
+  },
+  ({ bordered }) =>
     bordered
       ? {
-          border: `1px solid ${theme.appBorderColor}`,
-          borderRadius: theme.borderRadius,
-          background: theme.background.content,
+          border: `1px solid var(--sb-appBorderColor)`,
+          borderRadius: 'var(--sb-appBorderRadius)',
+          background: 'var(--sb-background-content)',
         }
       : {},
   ({ showLineNumbers }) =>
@@ -117,13 +117,13 @@ const Pre = styled.pre<PreProps>(({ theme, padded }) => ({
 We can't use `code` since PrismJS races for it.
 See https://github.com/storybookjs/storybook/issues/18090
  */
-const Code = styled.div(({ theme }) => ({
+const Code = styled.div({
   flex: 1,
   paddingLeft: 2, // TODO: To match theming/global.ts for now
-  paddingRight: theme.layoutMargin,
+  paddingRight: 'var(--sb-layoutMargin)',
   opacity: 1,
-  fontFamily: theme.typography.fonts.mono,
-}));
+  fontFamily: 'var(--sb-typography-fonts-mono)',
+});
 
 const processLineNumber = (row: any) => {
   const children = [...row.children];
diff --git a/code/core/src/components/components/tooltip/ListItem.tsx b/code/core/src/components/components/tooltip/ListItem.tsx
index d3e163642acf..da246cb6c067 100644
--- a/code/core/src/components/components/tooltip/ListItem.tsx
+++ b/code/core/src/components/components/tooltip/ListItem.tsx
@@ -16,16 +16,15 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <sp
   loading: boolean;
   disabled: boolean;
 }>(
-  ({ theme }) => ({
-    color: theme.color.defaultText,
-    // Previously was theme.typography.weight.normal but this weight does not exists in Theme
-    fontWeight: theme.typography.weight.regular,
-  }),
-  ({ active, theme }) =>
+  {
+    color: 'var(--sb-color-defaultText)',
+    fontWeight: 'var(--sb-typography-weight-regular)',
+  },
+  ({ active }) =>
     active
       ? {
-          color: theme.color.secondary,
-          fontWeight: theme.typography.weight.bold,
+          color: 'var(--sb-color-secondary)',
+          fontWeight: 'var(--sb-typography-weight-bold)',
         }
       : {},
   ({ loading, theme }) =>
@@ -36,12 +35,7 @@ const Title = styled(({ active, loading, disabled, ...rest }: TitleProps) => <sp
           ...theme.animation.inlineGlow,
         }
       : {},
-  ({ disabled, theme }) =>
-    disabled
-      ? {
-          color: theme.textMutedColor,
-        }
-      : {}
+  ({ disabled }) => (disabled ? { color: 'var(--sb-textMutedColor)' } : {})
 );
 
 export interface RightProps {
@@ -75,22 +69,12 @@ export interface CenterTextProps {
 }
 
 const CenterText = styled.span<CenterTextProps>(
-  ({ theme }) => ({
+  {
     fontSize: '11px',
     lineHeight: '14px',
-  }),
-  ({ active, theme }) =>
-    active
-      ? {
-          color: theme.color.secondary,
-        }
-      : {},
-  ({ theme, disabled }) =>
-    disabled
-      ? {
-          color: theme.textMutedColor,
-        }
-      : {}
+  },
+  ({ active }) => (active ? { color: 'var(--sb-color-secondary)' } : {}),
+  ({ disabled }) => (disabled ? { color: 'var(--sb-textMutedColor)' } : {})
 );
 
 export interface LeftProps {
@@ -98,12 +82,7 @@ export interface LeftProps {
 }
 
 const Left = styled.span<LeftProps>(
-  ({ active, theme }) =>
-    active
-      ? {
-          color: theme.color.secondary,
-        }
-      : {},
+  ({ active }) => (active ? { color: 'var(--sb-color-secondary)' } : {}),
   () => ({
     display: 'flex',
     maxWidth: 14,
@@ -117,15 +96,15 @@ export interface ItemProps {
 }
 
 const Item = styled.button<ItemProps>(
-  ({ theme }) => ({
+  {
     width: '100%',
     minWidth: 0, // required for overflow
     border: 'none',
-    borderRadius: theme.appBorderRadius,
+    borderRadius: 'var(--sb-appBorderRadius)',
     background: 'none',
-    fontSize: theme.typography.size.s1,
+    fontSize: 'var(--sb-typography-size-s1)',
     transition: 'background 150ms ease-out',
-    color: theme.color.dark,
+    color: 'var(--sb-color-dark)',
     textDecoration: 'none',
     justifyContent: 'space-between',
 
@@ -139,26 +118,26 @@ const Item = styled.button<ItemProps>(
     },
 
     '&:focus-visible': {
-      outline: `2px solid ${theme.color.secondary}`,
+      outline: `2px solid var(--sb-color-secondary)`,
       outlineOffset: 0,
     },
-  }),
-  ({ theme, href, onClick }) =>
+  },
+  ({ href, onClick }) =>
     (href || onClick) && {
       cursor: 'pointer',
       '&:hover': {
-        background: theme.background.hoverable,
+        background: 'var(--sb-background-hoverable)',
       },
       '&:hover svg': {
         opacity: 1,
       },
     },
-  ({ theme, as }) =>
+  ({ as }) =>
     as === 'label' && {
       '&:has(input:not(:disabled))': {
         cursor: 'pointer',
         '&:hover': {
-          background: theme.background.hoverable,
+          background: 'var(--sb-background-hoverable)',
         },
       },
     },
diff --git a/code/core/src/components/components/tooltip/TooltipLinkList.tsx b/code/core/src/components/components/tooltip/TooltipLinkList.tsx
index d59ea51f9953..1e0915995711 100644
--- a/code/core/src/components/components/tooltip/TooltipLinkList.tsx
+++ b/code/core/src/components/components/tooltip/TooltipLinkList.tsx
@@ -14,19 +14,17 @@ const List = styled.div(
     overflow: 'hidden',
     overflowY: 'auto',
     maxHeight: 15.5 * 32 + 8, // 15.5 items at 32px each + 8px padding
+    borderRadius: `calc(var(--sb-appBorderRadius) + 2px)`,
   },
-  ({ theme }) => ({
-    borderRadius: theme.appBorderRadius + 2,
-  }),
-  ({ theme }) => (theme.base === 'dark' ? { background: theme.background.content } : {})
+  ({ theme }) => (theme.base === 'dark' ? { background: 'var(--sb-background-content)' } : {})
 );
 
-const Group = styled.div(({ theme }) => ({
+const Group = styled.div({
   padding: 4,
   '& + &': {
-    borderTop: `1px solid ${theme.appBorderColor}`,
+    borderTop: `1px solid var(--sb-appBorderColor)`,
   },
-}));
+});
 
 export interface NormalLink extends Omit<ListItemProps, 'onClick'> {
   id: string;
diff --git a/code/core/src/components/components/tooltip/TooltipMessage.tsx b/code/core/src/components/components/tooltip/TooltipMessage.tsx
index 428d8d759883..d63bae744e25 100644
--- a/code/core/src/components/components/tooltip/TooltipMessage.tsx
+++ b/code/core/src/components/components/tooltip/TooltipMessage.tsx
@@ -7,26 +7,26 @@ import { styled } from 'storybook/theming';
 
 import { Link } from '../typography/link/link';
 
-const Title = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-}));
+const Title = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
 const Desc = styled.span();
 
-const Links = styled.div(({ theme }) => ({
+const Links = styled.div({
   marginTop: 8,
   textAlign: 'center',
 
   '> *': {
     margin: '0 8px',
-    fontWeight: theme.typography.weight.bold,
+    fontWeight: 'var(--sb-typography-weight-bold)',
   },
-}));
+});
 
-const Message = styled.div(({ theme }) => ({
-  color: theme.color.defaultText,
+const Message = styled.div({
+  color: 'var(--sb-color-defaultText)',
   lineHeight: '18px',
-}));
+});
 
 const MessageWrapper = styled.div({
   padding: 15,
diff --git a/code/core/src/components/components/tooltip/TooltipNote.tsx b/code/core/src/components/components/tooltip/TooltipNote.tsx
index 9ed692e0078b..043d22eb44b0 100644
--- a/code/core/src/components/components/tooltip/TooltipNote.tsx
+++ b/code/core/src/components/components/tooltip/TooltipNote.tsx
@@ -6,8 +6,8 @@ const Note = styled.div(({ theme }) => ({
   padding: '2px 6px',
   lineHeight: '16px',
   fontSize: 10,
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.lightest,
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  color: 'var(--sb-color-lightest)',
   boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.3)',
   borderRadius: 4,
   whiteSpace: 'nowrap',
diff --git a/code/core/src/components/components/tooltip/WithTooltip.tsx b/code/core/src/components/components/tooltip/WithTooltip.tsx
index 9e5b6b3b890d..ad920b79393a 100644
--- a/code/core/src/components/components/tooltip/WithTooltip.tsx
+++ b/code/core/src/components/components/tooltip/WithTooltip.tsx
@@ -66,7 +66,7 @@ const Arrow = styled.div<ArrowProps>(
       placement,
       theme.color[color] || color || theme.base === 'light'
         ? lighten(theme.background.app)
-        : theme.background.app,
+        : 'var(--sb-background-app)',
       'transparent'
     ),
     borderBottomColor: match(
@@ -74,7 +74,7 @@ const Arrow = styled.div<ArrowProps>(
       placement,
       theme.color[color] || color || theme.base === 'light'
         ? lighten(theme.background.app)
-        : theme.background.app,
+        : 'var(--sb-background-app)',
       'transparent'
     ),
     borderLeftColor: match(
@@ -82,7 +82,7 @@ const Arrow = styled.div<ArrowProps>(
       placement,
       theme.color[color] || color || theme.base === 'light'
         ? lighten(theme.background.app)
-        : theme.background.app,
+        : 'var(--sb-background-app)',
       'transparent'
     ),
     borderRightColor: match(
@@ -90,7 +90,7 @@ const Arrow = styled.div<ArrowProps>(
       placement,
       theme.color[color] || color || theme.base === 'light'
         ? lighten(theme.background.app)
-        : theme.background.app,
+        : 'var(--sb-background-app)',
       'transparent'
     ),
   })
@@ -114,13 +114,13 @@ const Wrapper = styled.div<WrapperProps>(
           background:
             (color && theme.color[color]) || color || theme.base === 'light'
               ? lighten(theme.background.app)
-              : theme.background.app,
+              : 'var(--sb-background-app)',
           filter: `
             drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
             drop-shadow(0 1px 3px rgba(0,0,0,0.1))
           `,
-          borderRadius: theme.appBorderRadius + 2,
-          fontSize: theme.typography.size.s1,
+          borderRadius: 'calc(var(--sb-appBorderRadius) + 2px)',
+          fontSize: 'var(--sb-typography-size-s1)',
         }
       : {}
 );
diff --git a/code/core/src/components/components/typography/DocumentWrapper.tsx b/code/core/src/components/components/typography/DocumentWrapper.tsx
index b5b4cca5eccb..553c649e6f22 100644
--- a/code/core/src/components/components/typography/DocumentWrapper.tsx
+++ b/code/core/src/components/components/typography/DocumentWrapper.tsx
@@ -1,29 +1,29 @@
 import { styled } from 'storybook/theming';
 
 export const DocumentWrapper = styled.div(({ theme }) => ({
-  fontSize: `${theme.typography.size.s2}px`,
+  fontSize: 'var(--sb-typography-size-s2)',
   lineHeight: '1.6',
 
   h1: {
-    fontSize: `${theme.typography.size.l1}px`,
-    fontWeight: theme.typography.weight.bold,
+    fontSize: `var(--sb-typography-size-l1)`,
+    fontWeight: 'var(--sb-typography-weight-bold)',
   },
   h2: {
-    fontSize: `${theme.typography.size.m2}px`,
-    borderBottom: `1px solid ${theme.appBorderColor}`,
+    fontSize: 'var(--sb-typography-size-m2)',
+    borderBottom: `1px solid var(--sb-appBorderColor)`,
   },
   h3: {
-    fontSize: `${theme.typography.size.m1}px`,
+    fontSize: 'var(--sb-typography-size-m1)',
   },
   h4: {
-    fontSize: `${theme.typography.size.s3}px`,
+    fontSize: 'var(--sb-typography-size-s3)',
   },
   h5: {
-    fontSize: `${theme.typography.size.s2}px`,
+    fontSize: 'var(--sb-typography-size-s2)',
   },
   h6: {
-    fontSize: `${theme.typography.size.s2}px`,
-    color: theme.color.dark,
+    fontSize: 'var(--sb-typography-size-s2)',
+    color: 'var(--sb-color-dark)',
   },
   'pre:not(.prismjs)': {
     background: 'transparent',
@@ -63,7 +63,7 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     marginBottom: '0 !important',
   },
   a: {
-    color: theme.color.secondary,
+    color: 'var(--sb-color-secondary)',
     textDecoration: 'none',
   },
   'a.absent': {
@@ -105,7 +105,7 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
   },
   hr: {
     border: '0 none',
-    borderTop: `1px solid ${theme.appBorderColor}`,
+    borderTop: `1px solid var(--sb-appBorderColor)`,
     height: 4,
     padding: 0,
   },
@@ -162,9 +162,9 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
   },
 
   blockquote: {
-    borderLeft: `4px solid ${theme.color.medium}`,
+    borderLeft: `4px solid var(--sb-color-medium)`,
     padding: '0 15px',
-    color: theme.color.dark,
+    color: 'var(--sb-color-dark)',
 
     '& > :first-of-type': {
       marginTop: 0,
@@ -180,27 +180,27 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     borderCollapse: 'collapse',
 
     '& tr': {
-      borderTop: `1px solid ${theme.appBorderColor}`,
+      borderTop: `1px solid var(--sb-appBorderColor)`,
       backgroundColor: 'white',
       margin: 0,
       padding: 0,
 
       '& th': {
         fontWeight: 'bold',
-        border: `1px solid ${theme.appBorderColor}`,
+        border: `1px solid var(--sb-appBorderColor)`,
         textAlign: 'left',
         margin: 0,
         padding: '6px 13px',
       },
 
       '& td': {
-        border: `1px solid ${theme.appBorderColor}`,
+        border: `1px solid var(--sb-appBorderColor)`,
         textAlign: 'left',
         margin: 0,
         padding: '6px 13px',
       },
       '&:nth-of-type(2n)': {
-        backgroundColor: theme.color.lighter,
+        backgroundColor: 'var(--sb-color-lighter)',
       },
 
       '& th :first-of-type, & td :first-of-type': {
@@ -219,7 +219,7 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     overflow: 'hidden',
 
     '& > span': {
-      border: `1px solid ${theme.color.medium}`,
+      border: `1px solid var(--sb-color-medium)`,
       display: 'block',
       float: 'left',
       overflow: 'hidden',
@@ -235,7 +235,7 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
 
     '& span span': {
       clear: 'both',
-      color: theme.color.darkest,
+      color: 'var(--sb-color-darkest)',
       display: 'block',
       padding: '5px 0 0',
     },
@@ -302,9 +302,9 @@ export const DocumentWrapper = styled.div(({ theme }) => ({
     margin: '0 2px',
     padding: '0 5px',
     whiteSpace: 'nowrap',
-    border: `1px solid ${theme.color.mediumlight}`,
-    backgroundColor: theme.color.lighter,
+    border: `1px solid var(--sb-color-mediumlight)`,
+    backgroundColor: 'var(--sb-color-lighter)',
     borderRadius: 3,
-    color: theme.base === 'dark' ? theme.color.darkest : theme.color.dark,
+    color: theme.base === 'dark' ? 'var(--sb-color-darkest)' : 'var(--sb-color-dark)',
   },
 }));
diff --git a/code/core/src/components/components/typography/elements/A.tsx b/code/core/src/components/components/typography/elements/A.tsx
index e91833da6cfc..a73bc1498054 100644
--- a/code/core/src/components/components/typography/elements/A.tsx
+++ b/code/core/src/components/components/typography/elements/A.tsx
@@ -3,11 +3,11 @@ import { styled } from 'storybook/theming';
 import { withReset } from '../lib/common';
 import { Link } from './Link';
 
-export const A = styled(Link)(withReset, ({ theme }) => ({
+export const A = styled(Link)(withReset, {
   fontSize: 'inherit',
   lineHeight: '24px',
 
-  color: theme.color.secondary,
+  color: 'var(--sb-color-secondary)',
   textDecoration: 'none',
   '&.absent': {
     color: '#cc0000',
@@ -22,4 +22,4 @@ export const A = styled(Link)(withReset, ({ theme }) => ({
     left: 0,
     bottom: 0,
   },
-}));
+});
diff --git a/code/core/src/components/components/typography/elements/Blockquote.tsx b/code/core/src/components/components/typography/elements/Blockquote.tsx
index f0904b078c0a..c6febd559506 100644
--- a/code/core/src/components/components/typography/elements/Blockquote.tsx
+++ b/code/core/src/components/components/typography/elements/Blockquote.tsx
@@ -2,14 +2,14 @@ import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Blockquote = styled.blockquote(withReset, withMargin, ({ theme }) => ({
-  borderLeft: `4px solid ${theme.color.medium}`,
+export const Blockquote = styled.blockquote(withReset, withMargin, {
+  borderLeft: `4px solid var(--sb-color-medium)`,
   padding: '0 15px',
-  color: theme.color.dark,
+  color: 'var(--sb-color-dark)',
   '& > :first-of-type': {
     marginTop: 0,
   },
   '& > :last-child': {
     marginBottom: 0,
   },
-}));
+});
diff --git a/code/core/src/components/components/typography/elements/Code.tsx b/code/core/src/components/components/typography/elements/Code.tsx
index b59b22c98184..bd3a9b567231 100644
--- a/code/core/src/components/components/typography/elements/Code.tsx
+++ b/code/core/src/components/components/typography/elements/Code.tsx
@@ -11,9 +11,9 @@ import { isReactChildString } from '../lib/isReactChildString';
 const isInlineCodeRegex = /[\n\r]/g;
 
 const DefaultCodeBlock = styled.code(
-  ({ theme }) => ({
+  {
     // from reset
-    fontFamily: theme.typography.fonts.mono,
+    fontFamily: 'var(--sb-typography-fonts-mono)',
     WebkitFontSmoothing: 'antialiased',
     MozOsxFontSmoothing: 'grayscale',
     display: 'inline-block',
@@ -21,17 +21,17 @@ const DefaultCodeBlock = styled.code(
     paddingRight: 2,
     verticalAlign: 'baseline',
     color: 'inherit',
-  }),
+  },
   codeCommon
 );
 
 const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
   // DocBlocks-specific styling and overrides
-  fontFamily: theme.typography.fonts.mono,
-  fontSize: `${theme.typography.size.s2 - 1}px`,
+  fontFamily: 'var(--sb-typography-fonts-mono)',
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   lineHeight: '19px',
   margin: '25px 0 40px',
-  borderRadius: theme.appBorderRadius,
+  borderRadius: 'var(--sb-appBorderRadius)',
   boxShadow:
     theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
   'pre.prismjs': {
diff --git a/code/core/src/components/components/typography/elements/H1.tsx b/code/core/src/components/components/typography/elements/H1.tsx
index 83ff20ebf270..9d44b2ca7725 100644
--- a/code/core/src/components/components/typography/elements/H1.tsx
+++ b/code/core/src/components/components/typography/elements/H1.tsx
@@ -2,7 +2,7 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H1 = styled.h1(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.l1}px`,
-  fontWeight: theme.typography.weight.bold,
-}));
+export const H1 = styled.h1(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-l1)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
diff --git a/code/core/src/components/components/typography/elements/H2.tsx b/code/core/src/components/components/typography/elements/H2.tsx
index fe99631b7c01..62eed1cea34c 100644
--- a/code/core/src/components/components/typography/elements/H2.tsx
+++ b/code/core/src/components/components/typography/elements/H2.tsx
@@ -2,8 +2,8 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H2 = styled.h2(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.m2}px`,
+export const H2 = styled.h2(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-m2)',
   paddingBottom: 4,
-  borderBottom: `1px solid ${theme.appBorderColor}`,
-}));
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
+});
diff --git a/code/core/src/components/components/typography/elements/H3.tsx b/code/core/src/components/components/typography/elements/H3.tsx
index 18e91649d968..027ad8e8bb3b 100644
--- a/code/core/src/components/components/typography/elements/H3.tsx
+++ b/code/core/src/components/components/typography/elements/H3.tsx
@@ -2,6 +2,6 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H3 = styled.h3(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.m1}px`,
-}));
+export const H3 = styled.h3(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-m1)',
+});
diff --git a/code/core/src/components/components/typography/elements/H4.tsx b/code/core/src/components/components/typography/elements/H4.tsx
index ab07e958e966..2b5a681cb345 100644
--- a/code/core/src/components/components/typography/elements/H4.tsx
+++ b/code/core/src/components/components/typography/elements/H4.tsx
@@ -2,6 +2,6 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H4 = styled.h4(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.s3}px`,
-}));
+export const H4 = styled.h4(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-s3)',
+});
diff --git a/code/core/src/components/components/typography/elements/H5.tsx b/code/core/src/components/components/typography/elements/H5.tsx
index 816deae8a5bd..c423a7a0daed 100644
--- a/code/core/src/components/components/typography/elements/H5.tsx
+++ b/code/core/src/components/components/typography/elements/H5.tsx
@@ -2,6 +2,6 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H5 = styled.h5(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.s2}px`,
-}));
+export const H5 = styled.h5(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-s2)',
+});
diff --git a/code/core/src/components/components/typography/elements/H6.tsx b/code/core/src/components/components/typography/elements/H6.tsx
index 0a7ca673735a..f4daf0968e94 100644
--- a/code/core/src/components/components/typography/elements/H6.tsx
+++ b/code/core/src/components/components/typography/elements/H6.tsx
@@ -2,7 +2,7 @@ import { styled } from 'storybook/theming';
 
 import { headerCommon, withReset } from '../lib/common';
 
-export const H6 = styled.h6(withReset, headerCommon, ({ theme }) => ({
-  fontSize: `${theme.typography.size.s2}px`,
-  color: theme.color.dark,
-}));
+export const H6 = styled.h6(withReset, headerCommon, {
+  fontSize: 'var(--sb-typography-size-s2)',
+  color: 'var(--sb-color-dark)',
+});
diff --git a/code/core/src/components/components/typography/elements/HR.tsx b/code/core/src/components/components/typography/elements/HR.tsx
index fabd07d13d1e..b2859a10ebdc 100644
--- a/code/core/src/components/components/typography/elements/HR.tsx
+++ b/code/core/src/components/components/typography/elements/HR.tsx
@@ -1,8 +1,8 @@
 import { styled } from 'storybook/theming';
 
-export const HR = styled.hr(({ theme }) => ({
+export const HR = styled.hr({
   border: '0 none',
-  borderTop: `1px solid ${theme.appBorderColor}`,
+  borderTop: `1px solid var(--sb-appBorderColor)`,
   height: 4,
   padding: 0,
-}));
+});
diff --git a/code/core/src/components/components/typography/elements/LI.tsx b/code/core/src/components/components/typography/elements/LI.tsx
index 66465cf9df67..68c56113e7b7 100644
--- a/code/core/src/components/components/typography/elements/LI.tsx
+++ b/code/core/src/components/components/typography/elements/LI.tsx
@@ -4,8 +4,8 @@ import { styled } from 'storybook/theming';
 import { codeCommon, withReset } from '../lib/common';
 
 export const LI = styled.li(withReset, ({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  color: theme.color.defaultText,
+  fontSize: 'var(--sb-typography-size-s2)',
+  color: 'var(--sb-color-defaultText)',
   lineHeight: '24px',
   '& + li': {
     marginTop: '.25em',
diff --git a/code/core/src/components/components/typography/elements/P.tsx b/code/core/src/components/components/typography/elements/P.tsx
index 57dd66bbbe55..41123b428f7f 100644
--- a/code/core/src/components/components/typography/elements/P.tsx
+++ b/code/core/src/components/components/typography/elements/P.tsx
@@ -4,8 +4,8 @@ import { styled } from 'storybook/theming';
 import { codeCommon, withMargin, withReset } from '../lib/common';
 
 export const P = styled.p(withReset, withMargin, ({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+  fontSize: 'var(--sb-typography-size-s2)',
   lineHeight: '24px',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   '& code': codeCommon({ theme }) as CSSObject,
 }));
diff --git a/code/core/src/components/components/typography/elements/Pre.tsx b/code/core/src/components/components/typography/elements/Pre.tsx
index f08c986003c5..2e8ace18766f 100644
--- a/code/core/src/components/components/typography/elements/Pre.tsx
+++ b/code/core/src/components/components/typography/elements/Pre.tsx
@@ -2,9 +2,9 @@ import { styled } from 'storybook/theming';
 
 import { withMargin, withReset } from '../lib/common';
 
-export const Pre = styled.pre(withReset, withMargin, ({ theme }) => ({
+export const Pre = styled.pre(withReset, withMargin, {
   // reset
-  fontFamily: theme.typography.fonts.mono,
+  fontFamily: 'var(--sb-typography-fonts-mono)',
   WebkitFontSmoothing: 'antialiased',
   MozOsxFontSmoothing: 'grayscale',
   lineHeight: '18px',
@@ -39,4 +39,4 @@ export const Pre = styled.pre(withReset, withMargin, ({ theme }) => ({
   '& code, & tt': {
     border: 'none',
   },
-}));
+});
diff --git a/code/core/src/components/components/typography/elements/Span.tsx b/code/core/src/components/components/typography/elements/Span.tsx
index 836370e8f46b..b5cd1c6aac37 100644
--- a/code/core/src/components/components/typography/elements/Span.tsx
+++ b/code/core/src/components/components/typography/elements/Span.tsx
@@ -2,13 +2,13 @@ import { styled } from 'storybook/theming';
 
 import { withReset } from '../lib/common';
 
-export const Span = styled.span(withReset, ({ theme }) => ({
+export const Span = styled.span(withReset, {
   '&.frame': {
     display: 'block',
     overflow: 'hidden',
 
     '& > span': {
-      border: `1px solid ${theme.color.medium}`,
+      border: `1px solid var(--sb-color-medium)`,
       display: 'block',
       float: 'left',
       overflow: 'hidden',
@@ -22,7 +22,7 @@ export const Span = styled.span(withReset, ({ theme }) => ({
     },
     '& span span': {
       clear: 'both',
-      color: theme.color.darkest,
+      color: 'var(--sb-color-darkest)',
       display: 'block',
       padding: '5px 0 0',
     },
@@ -81,4 +81,4 @@ export const Span = styled.span(withReset, ({ theme }) => ({
       textAlign: 'right',
     },
   },
-}));
+});
diff --git a/code/core/src/components/components/typography/elements/Table.tsx b/code/core/src/components/components/typography/elements/Table.tsx
index 349430b696be..b7aa4abbf135 100644
--- a/code/core/src/components/components/typography/elements/Table.tsx
+++ b/code/core/src/components/components/typography/elements/Table.tsx
@@ -3,29 +3,29 @@ import { styled } from 'storybook/theming';
 import { withMargin, withReset } from '../lib/common';
 
 export const Table = styled.table(withReset, withMargin, ({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+  fontSize: 'var(--sb-typography-size-s2)',
   lineHeight: '24px',
   padding: 0,
   borderCollapse: 'collapse',
   '& tr': {
-    borderTop: `1px solid ${theme.appBorderColor}`,
-    backgroundColor: theme.appContentBg,
+    borderTop: `1px solid var(--sb-appBorderColor)`,
+    backgroundColor: 'var(--sb-appContentBg)',
     margin: 0,
     padding: 0,
   },
   '& tr:nth-of-type(2n)': {
-    backgroundColor: theme.base === 'dark' ? theme.color.darker : theme.color.lighter,
+    backgroundColor: theme.base === 'dark' ? 'var(--sb-color-darker)' : 'var(--sb-color-lighter)',
   },
   '& tr th': {
     fontWeight: 'bold',
-    color: theme.color.defaultText,
-    border: `1px solid ${theme.appBorderColor}`,
+    color: 'var(--sb-color-defaultText)',
+    border: `1px solid var(--sb-appBorderColor)`,
     margin: 0,
     padding: '6px 13px',
   },
   '& tr td': {
-    border: `1px solid ${theme.appBorderColor}`,
-    color: theme.color.defaultText,
+    border: `1px solid var(--sb-appBorderColor)`,
+    color: 'var(--sb-color-defaultText)',
     margin: 0,
     padding: '6px 13px',
   },
diff --git a/code/core/src/components/components/typography/lib/common.tsx b/code/core/src/components/components/typography/lib/common.tsx
index 6fff112898e7..43da1d0ae471 100644
--- a/code/core/src/components/components/typography/lib/common.tsx
+++ b/code/core/src/components/components/typography/lib/common.tsx
@@ -1,12 +1,11 @@
-import { transparentize } from 'polished';
 import type { CSSObject, FunctionInterpolation } from 'storybook/theming';
 
-export const headerCommon: FunctionInterpolation = ({ theme }) => ({
+export const headerCommon: FunctionInterpolation = () => ({
   margin: '20px 0 8px',
   padding: 0,
   cursor: 'text',
   position: 'relative',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   '&:first-of-type': {
     marginTop: 0,
     paddingTop: 0,
@@ -26,16 +25,16 @@ export const codeCommon: FunctionInterpolation = ({ theme }) => ({
   whiteSpace: 'nowrap',
 
   borderRadius: 3,
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
 
   border: theme.base === 'light' ? '1px solid hsl(0 0 0 / 0.05)' : '1px solid hsl(0 0 100 / 0.05)',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   backgroundColor: theme.base === 'light' ? 'hsl(0 0 0 / 0.01)' : 'hsl(0 0 100 / 0.02)',
 });
 
-export const withReset: FunctionInterpolation = ({ theme }) => ({
-  fontFamily: theme.typography.fonts.base,
-  fontSize: theme.typography.size.s3,
+export const withReset: FunctionInterpolation = () => ({
+  fontFamily: 'var(--sb-typography-fonts-base)',
+  fontSize: 'var(--sb-typography-size-s3)',
   margin: 0,
 
   WebkitFontSmoothing: 'antialiased',
diff --git a/code/core/src/components/components/typography/link/link.tsx b/code/core/src/components/components/typography/link/link.tsx
index b63e69e639ca..1f83c1a69495 100644
--- a/code/core/src/components/components/typography/link/link.tsx
+++ b/code/core/src/components/components/typography/link/link.tsx
@@ -69,7 +69,7 @@ const A = styled.a<LinkStylesProps>(
     transition: 'all 150ms ease-out',
     textDecoration: 'none',
 
-    color: theme.color.secondary,
+    color: 'var(--sb-color-secondary)',
 
     '&:hover, &:focus': {
       cursor: 'pointer',
@@ -95,7 +95,7 @@ const A = styled.a<LinkStylesProps>(
       marginRight: '0.4em',
 
       '& path': {
-        fill: theme.color.secondary,
+        fill: 'var(--sb-color-secondary)',
       },
     },
   }),
@@ -142,25 +142,25 @@ const A = styled.a<LinkStylesProps>(
           },
         }
       : {},
-  ({ theme, inverse }) =>
+  ({ inverse }) =>
     inverse
       ? {
-          color: theme.color.lightest,
+          color: 'var(--sb-color-lightest)',
           ':not([fill])': {
-            fill: theme.color.lightest,
+            fill: 'var(--sb-color-lightest)',
           },
 
           '&:hover': {
-            color: theme.color.lighter,
+            color: 'var(--sb-color-lighter)',
             'svg path:not([fill])': {
-              fill: theme.color.lighter,
+              fill: 'var(--sb-color-lighter)',
             },
           },
 
           '&:active': {
-            color: theme.color.light,
+            color: 'var(--sb-color-light)',
             'svg path:not([fill])': {
-              fill: theme.color.light,
+              fill: 'var(--sb-color-light)',
             },
           },
         }
diff --git a/code/core/src/controls/components/ControlsPanel.tsx b/code/core/src/controls/components/ControlsPanel.tsx
index 640845b4201b..b2b3e0856bff 100644
--- a/code/core/src/controls/components/ControlsPanel.tsx
+++ b/code/core/src/controls/components/ControlsPanel.tsx
@@ -30,14 +30,14 @@ const clean = (obj: { [key: string]: any }) =>
     {} as typeof obj
   );
 
-const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI, theme }) => ({
+const AddonWrapper = styled.div<{ showSaveFromUI: boolean }>(({ showSaveFromUI }) => ({
   height: '100%',
   maxHeight: '100vh',
   paddingBottom: showSaveFromUI ? 41 : 0,
-  backgroundColor: theme.background.content,
+  backgroundColor: 'var(--sb-background-content)',
 
   table: {
-    backgroundColor: theme.background.app,
+    backgroundColor: 'var(--sb-background-app)',
   },
 }));
 
diff --git a/code/core/src/controls/components/SaveStory.tsx b/code/core/src/controls/components/SaveStory.tsx
index 94c5b5c39d91..109e82cea8fb 100644
--- a/code/core/src/controls/components/SaveStory.tsx
+++ b/code/core/src/controls/components/SaveStory.tsx
@@ -30,9 +30,9 @@ const Bar = styled(BaseBar)(({ theme }) => ({
   '--highlight-bg-color': theme.base === 'dark' ? '#153B5B' : '#E0F0FF',
   paddingInline: 4,
   animation: `${slideIn} 300ms, ${highlight} 2s`,
-  background: theme.background.bar,
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  fontSize: theme.typography.size.s2,
+  background: 'var(--sb-background-bar)',
+  borderTop: `1px solid var(--sb-appBorderColor)`,
+  fontSize: 'var(--sb-typography-size-s2)',
 
   '@container (max-width: 799px)': {
     flexDirection: 'row',
@@ -49,16 +49,16 @@ const Info = styled.div({
   gap: 6,
 });
 
-const Actions = styled.div(({ theme }) => ({
+const Actions = styled.div({
   // We want actions to appear first and be hidden last on overflow,
   // but the screenreader reading order must start with Info.
   display: 'flex',
   flex: '1 0 0',
   alignItems: 'center',
   gap: 2,
-  color: theme.textMutedColor,
-  fontSize: theme.typography.size.s2,
-}));
+  color: 'var(--sb-color-textMuted)',
+  fontSize: 'var(--sb-typography-size-s2)',
+});
 
 const Label = styled.div({
   '@container (max-width: 799px)': {
@@ -73,14 +73,14 @@ const Label = styled.div({
   },
 });
 
-const ModalInput = styled(Form.Input)(({ theme }) => ({
+const ModalInput = styled(Form.Input)({
   '::placeholder': {
-    color: theme.color.mediumdark,
+    color: 'var(--sb-color-mediumdark)',
   },
   '&:invalid:not(:placeholder-shown)': {
-    boxShadow: `${theme.color.negative} 0 0 0 1px inset`,
+    boxShadow: `var(--sb-color-negative) 0 0 0 1px inset`,
   },
-}));
+});
 
 type SaveStoryProps = {
   saveStory: () => Promise<unknown>;
diff --git a/code/core/src/manager/components/Focus/Focus.tsx b/code/core/src/manager/components/Focus/Focus.tsx
index 04a14a7fe681..2e5d95379bd1 100644
--- a/code/core/src/manager/components/Focus/Focus.tsx
+++ b/code/core/src/manager/components/Focus/Focus.tsx
@@ -5,18 +5,18 @@ import { styled } from 'storybook/theming';
 import { useLocationHash } from '../../hooks/useLocation';
 
 const FocusOutline = styled.div<{ active?: boolean; outlineOffset?: number }>(
-  ({ theme, active = false, outlineOffset = 0 }) => ({
+  ({ active = false, outlineOffset = 0 }) => ({
     width: '100%',
     borderRadius: 'inherit',
     transition: 'outline-color var(--transition-duration, 0.2s)',
-    outline: `2px solid ${active ? theme.color.secondary : 'transparent'}`,
+    outline: `2px solid ${active ? 'var(--sb-color-secondary)' : 'transparent'}`,
     outlineOffset,
   })
 );
 
-const FocusProxy = styled(FocusOutline)<{ targetId: string }>(({ theme, targetId }) => ({
+const FocusProxy = styled(FocusOutline)<{ targetId: string }>(({ targetId }) => ({
   [`&:has([data-target-id="${targetId}"]:focus-visible)`]: {
-    outlineColor: theme.color.secondary,
+    outlineColor: 'var(--sb-color-secondary)',
   },
 }));
 
diff --git a/code/core/src/manager/components/Shortcut.tsx b/code/core/src/manager/components/Shortcut.tsx
index ad19e3783fd8..7f394de4b8dc 100644
--- a/code/core/src/manager/components/Shortcut.tsx
+++ b/code/core/src/manager/components/Shortcut.tsx
@@ -9,23 +9,23 @@ const Wrapper = styled.span(({ theme }) => ({
   justifyContent: 'center',
   height: 16,
   fontSize: '11px',
-  fontWeight: theme.typography.weight.regular,
+  fontWeight: 'var(--sb-typography-weight-regular)',
   background: theme.base === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.05)',
-  color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
+  color: theme.base === 'light' ? 'var(--sb-color-dark)' : 'var(--sb-textMutedColor)',
   borderRadius: 2,
   userSelect: 'none',
   pointerEvents: 'none',
   padding: '0 4px',
 }));
 
-const Key = styled.kbd(({ theme }) => ({
+const Key = styled.kbd({
   padding: 0,
-  fontFamily: theme.typography.fonts.base,
+  fontFamily: 'var(--sb-typography-fonts-base)',
   verticalAlign: 'middle',
   '& + &': {
     marginLeft: 6,
   },
-}));
+});
 
 export const Shortcut = ({ keys }: { keys: string[] }) => (
   <Wrapper>
diff --git a/code/core/src/manager/components/TourGuide/TourGuide.tsx b/code/core/src/manager/components/TourGuide/TourGuide.tsx
index 4ad881d073ec..537c157664db 100644
--- a/code/core/src/manager/components/TourGuide/TourGuide.tsx
+++ b/code/core/src/manager/components/TourGuide/TourGuide.tsx
@@ -149,21 +149,27 @@ export const TourGuide = ({
         },
         spotlight: {
           backgroundColor: 'none',
-          border: `solid 2px ${theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary)}`,
+          border: `solid 2px ${theme.base === 'light' ? 'var(--sb-color-secondary)' : darken(0.18, theme.color.secondary)}`,
           boxShadow: '0px 0px 0px 9999px rgba(27, 28, 29, 0.2)',
         },
         tooltip: {
           width: 280,
-          color: theme.color.lightest,
+          color: 'var(--sb-color-lightest)',
           background:
-            theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary),
+            theme.base === 'light'
+              ? 'var(--sb-color-secondary)'
+              : darken(0.18, theme.color.secondary),
         },
         options: {
           zIndex: 9998,
           primaryColor:
-            theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary),
+            theme.base === 'light'
+              ? 'var(--sb-color-secondary)'
+              : darken(0.18, theme.color.secondary),
           arrowColor:
-            theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary),
+            theme.base === 'light'
+              ? 'var(--sb-color-secondary)'
+              : darken(0.18, theme.color.secondary),
         },
       }}
     />
diff --git a/code/core/src/manager/components/TourGuide/TourTooltip.tsx b/code/core/src/manager/components/TourGuide/TourTooltip.tsx
index 2a8f0f26ac91..65d6f2bd62cb 100644
--- a/code/core/src/manager/components/TourGuide/TourTooltip.tsx
+++ b/code/core/src/manager/components/TourGuide/TourTooltip.tsx
@@ -58,10 +58,10 @@ const Count = styled.span`
 `;
 
 const NextButton = styled(Button)(({ theme }) => ({
-  background: theme.color.lightest,
+  background: 'var(--sb-color-lightest)',
   border: 'none',
   boxShadow: 'none',
-  color: theme.base === 'light' ? theme.color.secondary : darken(0.18, theme.color.secondary),
+  color: theme.base === 'light' ? 'var(--sb-color-secondary)' : darken(0.18, theme.color.secondary),
 
   '&:hover, &:focus': {
     background: transparentize(0.1, theme.color.lightest),
diff --git a/code/core/src/manager/components/error-boundary/ManagerErrorBoundary.tsx b/code/core/src/manager/components/error-boundary/ManagerErrorBoundary.tsx
index 6aa356f2ca8c..1d383dea043a 100644
--- a/code/core/src/manager/components/error-boundary/ManagerErrorBoundary.tsx
+++ b/code/core/src/manager/components/error-boundary/ManagerErrorBoundary.tsx
@@ -8,18 +8,18 @@ import { SyncIcon, UnfoldIcon } from '@storybook/icons';
 import { transparentize } from 'polished';
 import { styled } from 'storybook/theming';
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   width: '100vw',
   height: '100vh',
-  backgroundColor: theme.background.app,
-  color: theme.color.defaultText,
-  fontFamily: theme.typography.fonts.base,
-}));
+  backgroundColor: 'var(--sb-background-app)',
+  color: 'var(--sb-color-defaultText)',
+  fontFamily: 'var(--sb-typography-fonts-base)',
+});
 
-const Content = styled.div(({ theme }) => ({
+const Content = styled.div({
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'space-between',
@@ -27,49 +27,49 @@ const Content = styled.div(({ theme }) => ({
   height: '80%',
   padding: 20,
   gap: 20,
-  backgroundColor: theme.background.content,
-  borderRadius: theme.appBorderRadius,
-  border: `1px solid ${theme.color.negative}`,
+  backgroundColor: 'var(--sb-background-content)',
+  borderRadius: 'var(--sb-appBorderRadius)',
+  border: `1px solid var(--sb-color-negative)`,
   boxShadow: '0 0 64px rgba(0, 0, 0, 0.1)',
   overflow: 'auto',
-}));
+});
 
-const Info = styled.div(({ theme }) => ({
+const Info = styled.div({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'start',
   gap: 15,
-}));
+});
 
-const Heading = styled.h1(({ theme }) => ({
+const Heading = styled.h1({
   display: 'flex',
   alignItems: 'center',
   margin: 0,
   gap: 10,
-  fontSize: theme.typography.size.s2,
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.defaultText,
-}));
-
-const SubHeading = styled.p(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  color: theme.textMutedColor,
+  fontSize: 'var(--sb-typography-size-s2)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  color: 'var(--sb-color-defaultText)',
+});
+
+const SubHeading = styled.p({
+  fontSize: 'var(--sb-typography-size-s2)',
+  color: 'var(--sb-textMutedColor)',
   margin: 0,
   lineHeight: 1.4,
   textWrap: 'balance',
-}));
+});
 
-const ErrorWrapper = styled.div(({ theme }) => ({
+const ErrorWrapper = styled.div({
   display: 'flex',
   flexDirection: 'column-reverse',
   width: '100%',
   flex: '0 0 auto',
-  border: `1px solid ${theme.appBorderColor}`,
-  borderRadius: theme.appBorderRadius,
+  border: `1px solid var(--sb-appBorderColor)`,
+  borderRadius: 'var(--sb-appBorderRadius)',
   pre: {
     borderRadius: 0,
   },
-}));
+});
 
 const CollapseToggle = styled.div(({ theme }) => ({
   flex: '0 0 auto',
@@ -80,15 +80,15 @@ const CollapseToggle = styled.div(({ theme }) => ({
   width: '100%',
   padding: '0 10px',
   cursor: 'pointer',
-  fontSize: theme.typography.size.s2,
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.defaultText,
+  fontSize: 'var(--sb-typography-size-s2)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  color: 'var(--sb-color-defaultText)',
   userSelect: 'none',
   '&:hover': {
     backgroundColor: theme.base === 'light' ? 'rgba(0, 0, 0, 0.02)' : 'rgba(255, 255, 255, 0.03)',
   },
   svg: {
-    color: theme.textMutedColor,
+    color: 'var(--sb-textMutedColor)',
   },
 }));
 
@@ -96,27 +96,27 @@ const ErrorMessage = styled.pre(({ theme }) => ({
   order: 1,
   padding: '11px 15px',
   margin: 0,
-  fontSize: theme.typography.size.s1,
-  color: theme.color.negativeText,
+  fontSize: 'var(--sb-typography-size-s1)',
+  color: 'var(--sb-color-negativeText)',
   backgroundColor: transparentize(theme.base === 'light' ? 0.95 : 0.9, theme.color.negative),
-  borderBottom: `1px solid ${theme.appBorderColor}`,
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-word',
-  fontFamily: theme.typography.fonts.mono,
+  fontFamily: 'var(--sb-typography-fonts-mono)',
   lineHeight: '18px',
 }));
 
-const ErrorStack = styled.pre(({ theme }) => ({
+const ErrorStack = styled.pre({
   padding: 15,
   margin: 0,
-  fontSize: theme.typography.size.s1,
-  color: theme.textMutedColor,
-  borderBottom: `1px solid ${theme.appBorderColor}`,
+  fontSize: 'var(--sb-typography-size-s1)',
+  color: 'var(--sb-textMutedColor)',
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
   borderRadius: 0,
   whiteSpace: 'pre-wrap',
   wordBreak: 'break-word',
-  fontFamily: theme.typography.fonts.mono,
-}));
+  fontFamily: 'var(--sb-typography-fonts-mono)',
+});
 
 interface ErrorFallbackProps {
   error: Error;
diff --git a/code/core/src/manager/components/layout/Layout.tsx b/code/core/src/manager/components/layout/Layout.tsx
index 32bc1e009326..7f795a1f7a0f 100644
--- a/code/core/src/manager/components/layout/Layout.tsx
+++ b/code/core/src/manager/components/layout/Layout.tsx
@@ -239,17 +239,17 @@ const LayoutContainer = styled.div<LayoutState & { showPanel: boolean }>(
   }
 );
 
-const SidebarContainer = styled.div(({ theme }) => ({
-  backgroundColor: theme.appBg,
+const SidebarContainer = styled.div({
+  backgroundColor: 'var(--sb-appBg)',
   gridArea: 'sidebar',
   position: 'relative',
-  borderRight: `1px solid ${theme.appBorderColor}`,
-}));
+  borderRight: `1px solid var(--sb-appBorderColor)`,
+});
 
-const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
+const ContentContainer = styled.div<{ shown: boolean }>(({ shown }) => ({
   flex: 1,
   position: 'relative',
-  backgroundColor: theme.appContentBg,
+  backgroundColor: 'var(--sb-appContentBg)',
   display: shown ? 'grid' : 'none', // This is needed to make the content container fill the available space
   overflow: 'auto',
 
@@ -259,29 +259,27 @@ const ContentContainer = styled.div<{ shown: boolean }>(({ theme, shown }) => ({
   },
 }));
 
-const PagesContainer = styled.div(({ theme }) => ({
+const PagesContainer = styled.div({
   display: 'flex',
   flexDirection: 'column',
   gridRowStart: 'sidebar-start',
   gridRowEnd: '-1',
   gridColumnStart: 'sidebar-end',
   gridColumnEnd: '-1',
-  backgroundColor: theme.appContentBg,
+  backgroundColor: 'var(--sb-appContentBg)',
   zIndex: 1,
-}));
+});
 
-const PanelContainer = styled.div<{ position: LayoutState['panelPosition'] }>(
-  ({ theme, position }) => ({
-    gridArea: 'panel',
-    position: 'relative',
-    backgroundColor: theme.appContentBg,
-    borderTop: position === 'bottom' ? `1px solid ${theme.appBorderColor}` : undefined,
-    borderLeft: position === 'right' ? `1px solid ${theme.appBorderColor}` : undefined,
-  })
-);
+const PanelContainer = styled.div<{ position: LayoutState['panelPosition'] }>(({ position }) => ({
+  gridArea: 'panel',
+  position: 'relative',
+  backgroundColor: 'var(--sb-appContentBg)',
+  borderTop: position === 'bottom' ? `1px solid var(--sb-appBorderColor)` : undefined,
+  borderLeft: position === 'right' ? `1px solid var(--sb-appBorderColor)` : undefined,
+}));
 
 const Drag = styled.div<{ orientation?: 'horizontal' | 'vertical'; position?: 'left' | 'right' }>(
-  ({ theme }) => ({
+  {
     position: 'absolute',
     opacity: 0,
     transition: 'opacity 0.2s ease-in-out',
@@ -290,13 +288,13 @@ const Drag = styled.div<{ orientation?: 'horizontal' | 'vertical'; position?: 'l
     '&:after': {
       content: '""',
       display: 'block',
-      backgroundColor: theme.color.secondary,
+      backgroundColor: 'var(--sb-color-secondary)',
     },
 
     '&:hover': {
       opacity: 1,
     },
-  }),
+  },
   ({ orientation = 'vertical', position = 'left' }) => {
     if (orientation === 'vertical') {
       return {
diff --git a/code/core/src/manager/components/mobile/about/MobileAbout.tsx b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
index 5b5283028d24..96b655b671fd 100644
--- a/code/core/src/manager/components/mobile/about/MobileAbout.tsx
+++ b/code/core/src/manager/components/mobile/about/MobileAbout.tsx
@@ -115,7 +115,7 @@ const slideToRight = keyframes({
 });
 
 const Container = styled.div<{ $status: string; $transitionDuration: number }>(
-  ({ theme, $status, $transitionDuration }) => ({
+  ({ $status, $transitionDuration }) => ({
     position: 'absolute',
     width: '100%',
     height: '100%',
@@ -124,8 +124,8 @@ const Container = styled.div<{ $status: string; $transitionDuration: number }>(
     left: 0,
     zIndex: 11,
     overflow: 'auto',
-    color: theme.color.defaultText,
-    background: theme.background.content,
+    color: 'var(--sb-color-defaultText)',
+    background: 'var(--sb-background-content)',
     animation:
       $status === 'exiting'
         ? `${slideToRight} ${$transitionDuration}ms`
@@ -142,33 +142,33 @@ const InnerArea = styled.div({
 
 const LinkContainer = styled.div({});
 
-const LinkLine = styled.a(({ theme }) => ({
+const LinkLine = styled.a({
   all: 'unset',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  fontSize: theme.typography.size.s2 - 1,
-  borderBottom: `1px solid ${theme.appBorderColor}`,
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
+  borderBottom: `1px solid var(--sb-appBorderColor)`,
   cursor: 'pointer',
   padding: '0 10px',
 
   '&:last-child': {
     borderBottom: 'none',
   },
-}));
+});
 
-const LinkLeft = styled.div(({ theme }) => ({
+const LinkLeft = styled.div({
   display: 'flex',
   alignItems: 'center',
-  fontSize: theme.typography.size.s2 - 1,
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   height: 40,
   gap: 5,
-}));
+});
 
-const BottomText = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2 - 1,
+const BottomText = styled.div({
+  fontSize: 'calc(var(--sb-typography-size-s2) - 1px)',
   marginTop: 30,
-}));
+});
 
 const CloseButton = styled(Button)({
   alignSelf: 'start',
diff --git a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
index 83cc6f4596b2..794800b6316c 100644
--- a/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
+++ b/code/core/src/manager/components/mobile/navigation/MobileNavigation.tsx
@@ -139,14 +139,14 @@ export const MobileNavigation: FC<MobileNavigationProps & ComponentProps<typeof
   );
 };
 
-const Container = styled.section(({ theme }) => ({
+const Container = styled.section({
   bottom: 0,
   left: 0,
   width: '100%',
   zIndex: 10,
-  background: theme.barBg,
-  borderTop: `1px solid ${theme.appBorderColor}`,
-}));
+  background: 'var(--sb-barBg)',
+  borderTop: `1px solid var(--sb-appBorderColor)`,
+});
 
 const MobileBottomBar = styled.header({
   display: 'flex',
diff --git a/code/core/src/manager/components/notifications/NotificationItem.tsx b/code/core/src/manager/components/notifications/NotificationItem.tsx
index e87c07af46ab..283f634eee79 100644
--- a/code/core/src/manager/components/notifications/NotificationItem.tsx
+++ b/code/core/src/manager/components/notifications/NotificationItem.tsx
@@ -36,23 +36,23 @@ const Notification = styled.div<{ duration?: number }>(
   ({ theme }) => ({
     position: 'relative',
     display: 'flex',
-    border: `1px solid ${theme.appBorderColor}`,
+    border: `1px solid var(--sb-appBorderColor)`,
     padding: '12px 6px 12px 12px',
-    borderRadius: theme.appBorderRadius + 1,
+    borderRadius: `calc(var(--sb-appBorderRadius) + 1px)`,
     alignItems: 'center',
 
     animation: `${slideIn} 500ms`,
     background: theme.base === 'light' ? 'hsla(203, 50%, 20%, .97)' : 'hsla(203, 30%, 95%, .97)',
     boxShadow: `0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1)`,
-    color: theme.color.inverseText,
+    color: 'var(--sb-color-inverseText)',
     textDecoration: 'none',
     overflow: 'hidden',
 
     [MEDIA_DESKTOP_BREAKPOINT]: {
-      boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
+      boxShadow: `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px var(--sb-background-app)`,
     },
   }),
-  ({ duration, theme }) =>
+  ({ duration }) =>
     duration && {
       '&::after': {
         content: '""',
@@ -61,7 +61,7 @@ const Notification = styled.div<{ duration?: number }>(
         bottom: 0,
         left: 0,
         height: 3,
-        background: theme.color.secondary,
+        background: 'var(--sb-color-secondary)',
         animation: `${grow} ${duration}ms linear forwards reverse`,
       },
     }
@@ -103,27 +103,27 @@ const NotificationIconWrapper = styled.div({
   },
 });
 
-const NotificationTextWrapper = styled.div(({ theme }) => ({
+const NotificationTextWrapper = styled.div({
   width: '100%',
   display: 'flex',
   flexDirection: 'column',
-  color: theme.color.inverseText,
-}));
+  color: 'var(--sb-color-inverseText)',
+});
 
-const Headline = styled.div(({ theme }) => ({
+const Headline = styled.div({
   height: '100%',
   alignItems: 'center',
   whiteSpace: 'balance',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  fontSize: theme.typography.size.s1,
+  fontSize: 'var(--sb-typography-size-s1)',
   lineHeight: '16px',
-  fontWeight: theme.typography.weight.bold,
-}));
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
 const SubHeadline = styled.div(({ theme }) => ({
   color: transparentize(0.25, theme.color.inverseText),
-  fontSize: theme.typography.size.s1 - 1,
+  fontSize: 'calc(var(--sb-typography-size-s1) - 1px)',
   lineHeight: '14px',
   marginTop: 2,
   whiteSpace: 'balance',
diff --git a/code/core/src/manager/components/preview/FramesRenderer.tsx b/code/core/src/manager/components/preview/FramesRenderer.tsx
index 5628cfef9e68..28ed4ed33340 100644
--- a/code/core/src/manager/components/preview/FramesRenderer.tsx
+++ b/code/core/src/manager/components/preview/FramesRenderer.tsx
@@ -19,7 +19,7 @@ const getActive = (refId: FramesRendererProps['refId'], refs: FramesRendererProp
   return 'storybook-preview-iframe';
 };
 
-const SkipToSidebarLink = styled(Button)(({ theme }) => ({
+const SkipToSidebarLink = styled(Button)({
   display: 'none',
   '@media (min-width: 600px)': {
     position: 'absolute',
@@ -27,14 +27,14 @@ const SkipToSidebarLink = styled(Button)(({ theme }) => ({
     top: 10,
     right: 15,
     padding: '10px 15px',
-    fontSize: theme.typography.size.s1,
+    fontSize: `var(--sb-typography-size-s1)`,
     transform: 'translateY(-100px)',
     '&:focus': {
       transform: 'translateY(0)',
       zIndex: 1,
     },
   },
-}));
+});
 
 const whenSidebarIsVisible = ({ api, state }: Combo) => ({
   isFullscreen: api.getIsFullscreen(),
diff --git a/code/core/src/manager/components/preview/Iframe.tsx b/code/core/src/manager/components/preview/Iframe.tsx
index 1541e78409c4..94aba1f1e505 100644
--- a/code/core/src/manager/components/preview/Iframe.tsx
+++ b/code/core/src/manager/components/preview/Iframe.tsx
@@ -5,8 +5,8 @@ import { Zoom } from 'storybook/internal/components';
 
 import { styled } from 'storybook/theming';
 
-const StyledIframe = styled.iframe(({ theme }) => ({
-  backgroundColor: theme.background.preview,
+const StyledIframe = styled.iframe({
+  backgroundColor: 'var(--sb-background-preview)',
   display: 'block',
   boxSizing: 'content-box',
   height: '100%',
@@ -15,7 +15,7 @@ const StyledIframe = styled.iframe(({ theme }) => ({
   transition: 'background-position 0s, visibility 0s',
   backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
   margin: `auto`,
-}));
+});
 
 export interface IFrameProps {
   id: string;
diff --git a/code/core/src/manager/components/preview/NumericInput.tsx b/code/core/src/manager/components/preview/NumericInput.tsx
index 82cf1f6d4d44..6a64f78219cc 100644
--- a/code/core/src/manager/components/preview/NumericInput.tsx
+++ b/code/core/src/manager/components/preview/NumericInput.tsx
@@ -14,46 +14,44 @@ import { Form } from 'storybook/internal/components';
 import { useId } from '@react-aria/utils';
 import { styled } from 'storybook/theming';
 
-const Wrapper = styled.div<{ after?: ReactNode; before?: ReactNode }>(
-  ({ after, before, theme }) => ({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
+const Wrapper = styled.div<{ after?: ReactNode; before?: ReactNode }>(({ after, before }) => ({
+  position: 'relative',
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+  height: 32,
+  paddingInline: 9,
+  fontSize: 'var(--sb-typography-size-s1)',
+  color: 'var(--sb-textMutedColor)',
+  background: 'var(--sb-input-background)',
+  boxShadow: `var(--sb-input-border) 0 0 0 1px inset`,
+  borderRadius: 'var(--sb-input-borderRadius)',
+  svg: {
+    display: 'block',
+  },
+  input: {
     width: '100%',
-    height: 32,
-    paddingInline: 9,
-    fontSize: theme.typography.size.s1,
-    color: theme.textMutedColor,
-    background: theme.input.background,
-    boxShadow: `${theme.input.border} 0 0 0 1px inset`,
-    borderRadius: theme.input.borderRadius,
-    svg: {
-      display: 'block',
-    },
-    input: {
-      width: '100%',
-      height: '100%',
-      minHeight: '100%',
-      flex: '1 1 auto',
-      paddingInline: 0,
-      fontSize: 'inherit',
-      background: 'transparent',
-      border: 'none',
+    height: '100%',
+    minHeight: '100%',
+    flex: '1 1 auto',
+    paddingInline: 0,
+    fontSize: 'inherit',
+    background: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    color: 'var(--sb-input-color)',
+    '&:focus, &:focus-visible': {
       boxShadow: 'none',
-      color: theme.input.color,
-      '&:focus, &:focus-visible': {
-        boxShadow: 'none',
-        outline: 'none',
-      },
-    },
-    '&:has(input:focus-visible)': {
-      outline: `2px solid ${theme.color.secondary}`,
-      outlineOffset: -2,
+      outline: 'none',
     },
-    ...(after && { paddingRight: 2 }),
-    ...(before && { paddingLeft: 2 }),
-  })
-);
+  },
+  '&:has(input:focus-visible)': {
+    outline: `2px solid var(--sb-color-secondary)`,
+    outlineOffset: -2,
+  },
+  ...(after && { paddingRight: 2 }),
+  ...(before && { paddingLeft: 2 }),
+}));
 
 interface NumericInputProps extends Omit<ComponentProps<typeof Form.Input>, 'value'> {
   label?: string;
diff --git a/code/core/src/manager/components/preview/SizeInput.tsx b/code/core/src/manager/components/preview/SizeInput.tsx
index f02c45b5bc1e..b4eccd692f18 100644
--- a/code/core/src/manager/components/preview/SizeInput.tsx
+++ b/code/core/src/manager/components/preview/SizeInput.tsx
@@ -6,9 +6,9 @@ import { Form } from 'storybook/internal/components';
 import { useId } from '@react-aria/utils';
 import { styled } from 'storybook/theming';
 
-const Wrapper = styled.span<{ prefix?: string }>(({ theme, prefix }) => ({
+const Wrapper = styled.span<{ prefix?: string }>(({ prefix }) => ({
   position: 'relative',
-  fontSize: theme.typography.size.s1,
+  fontSize: 'var(--sb-typography-size-s1)',
   input: {
     width: 70,
     height: 28,
@@ -18,7 +18,7 @@ const Wrapper = styled.span<{ prefix?: string }>(({ theme, prefix }) => ({
     fontSize: 'inherit',
     '&:focus': {
       boxShadow: 'none',
-      outline: `2px solid ${theme.color.secondary}`,
+      outline: `2px solid var(--sb-color-secondary)`,
       outlineOffset: -2,
     },
   },
@@ -34,7 +34,7 @@ const Wrapper = styled.span<{ prefix?: string }>(({ theme, prefix }) => ({
       bottom: 0,
       width: 20,
       zIndex: 1,
-      color: theme.textMutedColor,
+      color: 'var(--sb-textMutedColor)',
     },
   }),
 }));
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index adb600b9db35..cb41c5255652 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -165,21 +165,21 @@ export function filterToolsSide(
   return tools.filter(filter);
 }
 
-const StyledSection = styled.section(({ theme }) => ({
+const StyledSection = styled.section({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
-  color: theme.barTextColor,
+  color: 'var(--sb-barTextColor)',
   width: '100%',
   flexShrink: 0,
   overflowX: 'auto',
   overflowY: 'hidden',
-  boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
-  background: theme.barBg,
-  scrollbarColor: `${theme.barTextColor} ${theme.barBg}`,
+  boxShadow: `var(--sb-appBorderColor)  0 -1px 0 0 inset`,
+  background: 'var(--sb-barBg)',
+  scrollbarColor: `var(--sb-barTextColor) var(--sb-barBg)`,
   scrollbarWidth: 'thin',
   zIndex: 4,
-}));
+});
 
 const StyledToolbar = styled(AbstractToolbar)({
   flex: 1,
diff --git a/code/core/src/manager/components/preview/Viewport.tsx b/code/core/src/manager/components/preview/Viewport.tsx
index 9064fbf95763..129b12f8bfcd 100644
--- a/code/core/src/manager/components/preview/Viewport.tsx
+++ b/code/core/src/manager/components/preview/Viewport.tsx
@@ -19,7 +19,7 @@ type DragSide = 'none' | 'both' | 'bottom' | 'right';
 const ViewportWrapper = styled.div<{
   active: boolean;
   isDefault: boolean;
-}>(({ active, isDefault, theme }) => ({
+}>(({ active, isDefault }) => ({
   gridArea: '1 / 1',
   alignSelf: 'start',
   justifySelf: 'start',
@@ -34,14 +34,14 @@ const ViewportWrapper = styled.div<{
 
   '&:has([data-size-input="width"]:focus-visible)': {
     '[data-dragging]': {
-      borderRightColor: theme.color.secondary,
-      boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`,
+      borderRightColor: 'var(--sb-color-secondary)',
+      boxShadow: `4px 0 5px -2px var(--sb-background-hoverable)`,
     },
   },
   '&:has([data-size-input="height"]:focus-visible)': {
     '[data-dragging]': {
-      borderBottomColor: theme.color.secondary,
-      boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`,
+      borderBottomColor: 'var(--sb-color-secondary)',
+      boxShadow: `0 4px 5px -2px var(--sb-background-hoverable)`,
     },
   },
 }));
@@ -59,31 +59,31 @@ const ViewportDimensions = styled.div({
 const FrameWrapper = styled.div<{
   isDefault: boolean;
   'data-dragging': DragSide;
-}>(({ isDefault, 'data-dragging': dragging, theme }) => ({
+}>(({ isDefault, 'data-dragging': dragging }) => ({
   position: 'relative',
   minWidth: VIEWPORT_MIN_WIDTH,
   minHeight: VIEWPORT_MIN_HEIGHT,
   boxSizing: 'content-box', // we're sizing the contents, not the box itself
-  border: `1px solid ${theme.button.border}`,
+  border: `1px solid var(--sb-button-border)`,
   borderWidth: isDefault ? 0 : 1,
   borderRadius: isDefault ? 0 : 4,
   transition: 'border-color 0.2s, box-shadow 0.2s',
   '&:has([data-side="right"]:hover), &[data-dragging="right"]': {
-    borderRightColor: theme.color.secondary,
-    boxShadow: `4px 0 5px -2px ${theme.background.hoverable}`,
+    borderRightColor: 'var(--sb-color-secondary)',
+    boxShadow: `4px 0 5px -2px var(--sb-background-hoverable)`,
     '[data-side="right"]::after': {
       opacity: 1,
     },
   },
   '&:has([data-side="bottom"]:hover), &[data-dragging="bottom"]': {
-    borderBottomColor: theme.color.secondary,
-    boxShadow: `0 4px 5px -2px ${theme.background.hoverable}`,
+    borderBottomColor: 'var(--sb-color-secondary)',
+    boxShadow: `0 4px 5px -2px var(--sb-background-hoverable)`,
     '[data-side="bottom"]::after': {
       opacity: 1,
     },
   },
   '&:has([data-side="both"]:hover), &[data-dragging="both"]': {
-    boxShadow: `3px 3px 5px -2px ${theme.background.hoverable}`,
+    boxShadow: `3px 3px 5px -2px var(--sb-background-hoverable)`,
     '&::after, [data-side]::after': {
       opacity: 1,
     },
@@ -102,10 +102,10 @@ const FrameWrapper = styled.div<{
     background: `linear-gradient(to top left,
       rgba(0,0,0,0) 0%,
       rgba(0,0,0,0) calc(25% - 1px),
-      ${theme.color.secondary} 25%,
+      var(--sb-color-secondary) 25%,
       rgba(0,0,0,0) calc(25% + 1px),
       rgba(0,0,0,0) calc(45% - 1px),
-      ${theme.color.secondary} 45%,
+      var(--sb-color-secondary) 45%,
       rgba(0,0,0,0) calc(45% + 1px),
       rgba(0,0,0,0) 100%)`,
   },
@@ -119,7 +119,7 @@ const DragHandle = styled.div<{
   'data-side': DragSide;
 }>(
   { display: 'none' },
-  ({ theme, isDefault }) =>
+  ({ isDefault }) =>
     !isDefault && {
       display: 'block',
       position: 'absolute',
@@ -144,7 +144,7 @@ const DragHandle = styled.div<{
           left: '50%',
           transform: 'translate(-50%, -50%)',
           borderRadius: 4,
-          backgroundColor: theme.background.hoverable,
+          backgroundColor: 'var(--sb-background-hoverable)',
           padding: '2px 4px',
           opacity: 0,
           transition: 'opacity 0.2s',
@@ -163,7 +163,7 @@ const DragHandle = styled.div<{
           left: '50%',
           transform: 'translate(-50%, -50%)',
           borderRadius: 4,
-          backgroundColor: theme.background.hoverable,
+          backgroundColor: 'var(--sb-background-hoverable)',
           padding: '2px 4px',
           opacity: 0,
           transition: 'opacity 0.2s',
diff --git a/code/core/src/manager/components/preview/tools/share.tsx b/code/core/src/manager/components/preview/tools/share.tsx
index 6c9863df3647..e24a37820f09 100644
--- a/code/core/src/manager/components/preview/tools/share.tsx
+++ b/code/core/src/manager/components/preview/tools/share.tsx
@@ -45,16 +45,16 @@ const QRImage = ({ value }: { value: string }) => {
 
 const QRContent = styled.div(() => ({}));
 
-const QRTitle = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s1,
+const QRTitle = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  fontSize: 'var(--sb-typography-size-s1)',
   marginBottom: 4,
-}));
+});
 
-const QRDescription = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s1,
-  color: theme.textMutedColor,
-}));
+const QRDescription = styled.div({
+  fontSize: 'var(--sb-typography-size-s1)',
+  color: 'var(--sb-textMutedColor)',
+});
 
 const ShareMenu = React.memo(function ShareMenu({
   api,
diff --git a/code/core/src/manager/components/preview/utils/components.ts b/code/core/src/manager/components/preview/utils/components.ts
index ff3c4233f43f..f258b93ed1bf 100644
--- a/code/core/src/manager/components/preview/utils/components.ts
+++ b/code/core/src/manager/components/preview/utils/components.ts
@@ -46,7 +46,7 @@ export const DesktopOnly = styled.span({
   },
 });
 
-export const IframeWrapper = styled.div(({ theme }) => ({
+export const IframeWrapper = styled.div({
   alignContent: 'center',
   alignItems: 'center',
   justifyContent: 'center',
@@ -60,14 +60,14 @@ export const IframeWrapper = styled.div(({ theme }) => ({
   position: 'relative',
   width: '100%',
   height: '100%',
-}));
+});
 
-export const LoaderWrapper = styled.div(({ theme }) => ({
+export const LoaderWrapper = styled.div({
   position: 'absolute',
   top: 0,
   left: 0,
   bottom: 0,
   right: 0,
-  background: theme.background.preview,
+  background: 'var(--sb-background-preview)',
   zIndex: 1,
-}));
+});
diff --git a/code/core/src/manager/components/sidebar/Brand.tsx b/code/core/src/manager/components/sidebar/Brand.tsx
index 1d5483f94656..93412db436ee 100644
--- a/code/core/src/manager/components/sidebar/Brand.tsx
+++ b/code/core/src/manager/components/sidebar/Brand.tsx
@@ -8,7 +8,7 @@ export const StorybookLogoStyled = styled(StorybookLogo)(({ theme }) => ({
   width: 'auto',
   height: '22px !important',
   display: 'block',
-  color: theme.base === 'light' ? theme.color.defaultText : theme.color.lightest,
+  color: theme.base === 'light' ? 'var(--sb-color-defaultText)' : 'var(--sb-color-lightest)',
 }));
 
 export const Img = styled.img({
@@ -17,7 +17,7 @@ export const Img = styled.img({
   maxHeight: '100px',
 });
 
-export const LogoLink = styled.a(({ theme }) => ({
+export const LogoLink = styled.a({
   display: 'inline-flex',
   alignItems: 'center',
   height: '100%',
@@ -28,10 +28,10 @@ export const LogoLink = styled.a(({ theme }) => ({
   color: 'inherit',
   textDecoration: 'none',
   '&:focus-visible': {
-    outline: `2px solid ${theme.color.secondary}`,
+    outline: `2px solid var(--sb-color-secondary)`,
     outlineOffset: 2,
   },
-}));
+});
 
 // @ts-expect-error (TODO)
 export const Brand = withTheme(({ theme }) => {
diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
index 1f93f9c56fed..a61bc08fa6c7 100644
--- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
+++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx
@@ -93,17 +93,17 @@ const CollapseToggle = styled(ActionList.Button)({
   },
 });
 
-const ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
-  color: theme.color.secondary,
-}));
+const ProgressCircle = styled(ProgressSpinner)({
+  color: 'var(--sb-color-secondary)',
+});
 
-const Checked = styled(StatusPassIcon)(({ theme }) => ({
+const Checked = styled(StatusPassIcon)({
   padding: 1,
   borderRadius: '50%',
-  background: theme.color.positive,
-  color: theme.background.content,
+  background: 'var(--sb-color-positive)',
+  color: 'var(--sb-background-content)',
   animation: `${fadeScaleIn} 500ms forwards`,
-}));
+});
 
 const ItemLabel = styled.span<{ isCompleted: boolean; isSkipped: boolean }>(
   ({ theme, isCompleted, isSkipped }) => ({
@@ -111,15 +111,15 @@ const ItemLabel = styled.span<{ isCompleted: boolean; isSkipped: boolean }>(
     margin: '0 -2px',
     padding: '0 2px',
     color: isSkipped
-      ? theme.color.mediumdark
+      ? 'var(--sb-color-mediumdark)'
       : isCompleted
         ? theme.base === 'dark'
-          ? theme.color.positive
-          : theme.color.positiveText
-        : theme.color.defaultText,
+          ? 'var(--sb-color-positive)'
+          : 'var(--sb-color-positiveText)'
+        : 'var(--sb-color-defaultText)',
     transition: 'color 500ms',
   }),
-  ({ theme, isSkipped }) =>
+  ({ isSkipped }) =>
     isSkipped && {
       alignSelf: 'flex-start',
       '&:after': {
@@ -129,7 +129,7 @@ const ItemLabel = styled.span<{ isCompleted: boolean; isSkipped: boolean }>(
         left: 0,
         width: '100%',
         height: 1,
-        background: theme.color.mediumdark,
+        background: 'var(--sb-color-mediumdark)',
         animation: `${expand} 500ms forwards`,
         transformOrigin: 'left',
       },
diff --git a/code/core/src/manager/components/sidebar/FileList.tsx b/code/core/src/manager/components/sidebar/FileList.tsx
index 9dfb6221c206..3be81ec52e76 100644
--- a/code/core/src/manager/components/sidebar/FileList.tsx
+++ b/code/core/src/manager/components/sidebar/FileList.tsx
@@ -33,7 +33,7 @@ export const FileListLi = styled('li')(({ theme }) => ({
 
     '.file-list-item': {
       borderRadius: '4px',
-      background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+      background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'var(--sb-color-mediumlight)',
 
       '> svg': {
         display: 'flex',
@@ -63,7 +63,7 @@ export const FileListItemContentWrapper = styled.div<{
 
   ...(selected && {
     borderRadius: '4px',
-    background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : theme.color.mediumlight,
+    background: theme.base === 'dark' ? 'rgba(255,255,255,.1)' : 'var(--sb-color-mediumlight)',
 
     '> svg': {
       display: 'flex',
@@ -74,7 +74,7 @@ export const FileListItemContentWrapper = styled.div<{
     cursor: 'not-allowed',
 
     div: {
-      color: `${theme.textMutedColor} !important`,
+      color: `var(--sb-textMutedColor) !important`,
     },
   }),
 
@@ -87,7 +87,7 @@ export const FileListItemContentWrapper = styled.div<{
       ? '#00000022'
       : theme.base === 'dark'
         ? 'rgba(255,255,255,.1)'
-        : theme.color.mediumlight,
+        : 'var(--sb-color-mediumlight)',
 
     '> svg': {
       display: 'flex',
@@ -109,16 +109,16 @@ export const FileListItemContent = styled('div')({
   width: 'calc(100% - 50px)',
 });
 
-export const FileListIconWrapper = styled('div')<{ error: boolean }>(({ theme, error }) => ({
-  color: error ? theme.color.negativeText : theme.color.secondary,
+export const FileListIconWrapper = styled('div')<{ error: boolean }>(({ error }) => ({
+  color: error ? 'var(--sb-color-negativeText)' : 'var(--sb-color-secondary)',
 }));
 
 export const FileListItemLabel = styled('div')<{ error: boolean }>(({ theme, error }) => ({
   color: error
-    ? theme.color.negativeText
+    ? 'var(--sb-color-negativeText)'
     : theme.base === 'dark'
-      ? theme.color.lighter
-      : theme.color.darkest,
+      ? 'var(--sb-color-lighter)'
+      : 'var(--sb-color-darkest)',
   fontSize: '14px',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
@@ -126,14 +126,14 @@ export const FileListItemLabel = styled('div')<{ error: boolean }>(({ theme, err
   maxWidth: '100%',
 }));
 
-export const FileListItemPath = styled('div')(({ theme }) => ({
-  color: theme.textMutedColor,
+export const FileListItemPath = styled('div')({
+  color: 'var(--sb-textMutedColor)',
   fontSize: '14px',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   maxWidth: '100%',
-}));
+});
 
 export const FileListExport = styled('ul')({
   margin: 0,
@@ -156,7 +156,7 @@ export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, err
 
   ...(error && {
     background: '#F9ECEC',
-    color: theme.color.negativeText,
+    color: 'var(--sb-color-negativeText)',
   }),
 
   '&:hover,:focus-visible': {
@@ -164,7 +164,7 @@ export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, err
       ? '#F9ECEC'
       : theme.base === 'dark'
         ? 'rgba(255, 255, 255, 0.1)'
-        : theme.color.mediumlight,
+        : 'var(--sb-color-mediumlight)',
 
     '> svg': {
       display: 'flex',
@@ -172,7 +172,7 @@ export const FileListItemExport = styled('li')<{ error: boolean }>(({ theme, err
   },
 
   '> div > svg': {
-    color: error ? theme.color.negativeText : theme.color.secondary,
+    color: error ? 'var(--sb-color-negativeText)' : 'var(--sb-color-secondary)',
   },
 }));
 
@@ -188,7 +188,7 @@ export const FileListItemExportNameContent = styled('span')(({ theme }) => ({
   textOverflow: 'ellipsis',
   overflow: 'hidden',
   display: 'inline-block',
-  color: theme.base === 'dark' ? theme.color.lightest : theme.color.darkest,
+  color: theme.base === 'dark' ? 'var(--sb-color-lightest)' : 'var(--sb-color-darkest)',
 }));
 
 export const FileListItemExportNameContentWithExport = styled(FileListItemExportNameContent)({
@@ -197,10 +197,10 @@ export const FileListItemExportNameContentWithExport = styled(FileListItemExport
 
 export const DefaultExport = styled('span')(({ theme }) => ({
   display: 'inline-block',
-  padding: `1px ${theme.appBorderRadius}px`,
+  padding: `1px var(--sb-appBorderRadius)`,
   borderRadius: '2px',
   fontSize: '10px',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   backgroundColor: theme.base === 'dark' ? 'rgba(255, 255, 255, 0.1)' : '#F2F4F5',
 }));
 
@@ -209,10 +209,10 @@ export const NoResults = styled('div')(({ theme }) => ({
   maxWidth: '334px',
   margin: '16px auto 50px auto',
   fontSize: '14px',
-  color: theme.base === 'dark' ? theme.color.lightest : '#000',
+  color: theme.base === 'dark' ? 'var(--sb-color-lightest)' : '#000',
 }));
 
-export const NoResultsDescription = styled('p')(({ theme }) => ({
+export const NoResultsDescription = styled('p')({
   margin: 0,
-  color: theme.textMutedColor,
-}));
+  color: 'var(--sb-textMutedColor)',
+});
diff --git a/code/core/src/manager/components/sidebar/FileSearchList.tsx b/code/core/src/manager/components/sidebar/FileSearchList.tsx
index 7a47e6c9a02b..4c66f0fc76c6 100644
--- a/code/core/src/manager/components/sidebar/FileSearchList.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchList.tsx
@@ -46,15 +46,15 @@ export interface NewStoryPayload extends CreateNewStoryRequestPayload {
   selectedItemId: string | number;
 }
 
-const TreeExpandIconStyled = styled(ChevronSmallRightIcon)(({ theme }) => ({
-  color: theme.textMutedColor,
+const TreeExpandIconStyled = styled(ChevronSmallRightIcon)({
+  color: 'var(--sb-textMutedColor)',
   marginTop: 2,
-}));
+});
 
-const TreeCollapseIconStyled = styled(ChevronSmallDownIcon)(({ theme }) => ({
-  color: theme.textMutedColor,
+const TreeCollapseIconStyled = styled(ChevronSmallDownIcon)({
+  color: 'var(--sb-textMutedColor)',
   marginTop: 2,
-}));
+});
 
 interface FileSearchListProps {
   isLoading: boolean;
diff --git a/code/core/src/manager/components/sidebar/FileSearchModal.tsx b/code/core/src/manager/components/sidebar/FileSearchModal.tsx
index 12bdf945b15e..7e9ef28344fe 100644
--- a/code/core/src/manager/components/sidebar/FileSearchModal.tsx
+++ b/code/core/src/manager/components/sidebar/FileSearchModal.tsx
@@ -12,14 +12,14 @@ import { FileSearchList } from './FileSearchList';
 
 const MODAL_HEIGHT = 418;
 
-const ModalStyled = styled(Modal)(() => ({
+const ModalStyled = styled(Modal)({
   boxShadow: 'none',
   background: 'transparent',
   overflow: 'visible',
-}));
+});
 
-const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
-  backgroundColor: theme.background.bar,
+const ModalChild = styled.div<{ height?: number }>(({ height }) => ({
+  backgroundColor: 'var(--sb-background-bar)',
   borderRadius: 6,
   boxShadow: `rgba(255, 255, 255, 0.05) 0 0 0 1px inset, rgba(14, 18, 22, 0.35) 0px 10px 18px -10px`,
   padding: '16px',
@@ -28,10 +28,10 @@ const ModalChild = styled.div<{ height?: number }>(({ theme, height }) => ({
   overflow: 'hidden',
 }));
 
-const ModalContent = styled(Modal.Content)(({ theme }) => ({
+const ModalContent = styled(Modal.Content)({
   margin: 0,
-  color: theme.color.defaultText,
-}));
+  color: 'var(--sb-color-defaultText)',
+});
 
 const ModalInput = styled(Form.Input)(({ theme }) => ({
   paddingLeft: 40,
@@ -40,14 +40,14 @@ const ModalInput = styled(Form.Input)(({ theme }) => ({
   height: 40,
 
   ...(theme.base === 'light' && {
-    color: theme.color.darkest,
+    color: 'var(--sb-color-darkest)',
   }),
 
   '::placeholder': {
-    color: theme.color.mediumdark,
+    color: 'var(--sb-color-mediumdark)',
   },
   '&:invalid:not(:placeholder-shown)': {
-    boxShadow: `${theme.color.negative} 0 0 0 1px inset`,
+    boxShadow: `var(--sb-color-negative) 0 0 0 1px inset`,
   },
   '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
     {
@@ -62,24 +62,24 @@ const SearchField = styled.div({
   position: 'relative',
 });
 
-const SearchIconWrapper = styled.div(({ theme }) => ({
+const SearchIconWrapper = styled.div({
   position: 'absolute',
   top: 0,
   left: 16,
   zIndex: 1,
   pointerEvents: 'none',
-  color: theme.darkest,
+  color: 'var(--sb-color-darkest)',
   display: 'flex',
   alignItems: 'center',
   height: '100%',
-}));
+});
 
-const LoadingIcon = styled.div(({ theme }) => ({
+const LoadingIcon = styled.div({
   position: 'absolute',
   top: 0,
   right: 16,
   zIndex: 1,
-  color: theme.darkest,
+  color: 'var(--sb-color-darkest)',
   display: 'flex',
   alignItems: 'center',
   height: '100%',
@@ -88,7 +88,7 @@ const LoadingIcon = styled.div(({ theme }) => ({
     to: { transform: 'rotate(360deg)' },
   },
   animation: 'spin 1s linear infinite',
-}));
+});
 
 const ModalError = styled(Modal.Error)({
   position: 'absolute',
diff --git a/code/core/src/manager/components/sidebar/Heading.tsx b/code/core/src/manager/components/sidebar/Heading.tsx
index 29d99db5b864..e2adedd5a573 100644
--- a/code/core/src/manager/components/sidebar/Heading.tsx
+++ b/code/core/src/manager/components/sidebar/Heading.tsx
@@ -17,10 +17,10 @@ export interface HeadingProps {
   onMenuClick?: SidebarMenuProps['onClick'];
 }
 
-const BrandArea = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-  fontWeight: theme.typography.weight.bold,
-  color: theme.color.defaultText,
+const BrandArea = styled.div({
+  fontSize: 'var(--sb-typography-size-s2)',
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  color: 'var(--sb-color-defaultText)',
   marginRight: 20,
   display: 'flex',
   width: '100%',
@@ -36,7 +36,7 @@ const BrandArea = styled.div(({ theme }) => ({
     display: 'block',
     flex: '1 1 auto',
   },
-}));
+});
 
 const HeadingWrapper = styled.div({
   display: 'flex',
@@ -47,12 +47,12 @@ const HeadingWrapper = styled.div({
   paddingLeft: 8,
 });
 
-const SkipToCanvasLink = styled(Button)(({ theme }) => ({
+const SkipToCanvasLink = styled(Button)({
   display: 'none',
   '@media (min-width: 600px)': {
     display: 'block',
     position: 'absolute',
-    fontSize: theme.typography.size.s1,
+    fontSize: 'var(--sb-typography-size-s1)',
     border: 0,
     width: 1,
     height: 1,
@@ -75,7 +75,7 @@ const SkipToCanvasLink = styled(Button)(({ theme }) => ({
       zIndex: 3,
     },
   },
-}));
+});
 
 export const Heading: FC<HeadingProps & ComponentProps<typeof HeadingWrapper>> = ({
   menuHighlighted = false,
diff --git a/code/core/src/manager/components/sidebar/Loader.tsx b/code/core/src/manager/components/sidebar/Loader.tsx
index 34d4fc05b386..e5e09f31ba70 100644
--- a/code/core/src/manager/components/sidebar/Loader.tsx
+++ b/code/core/src/manager/components/sidebar/Loader.tsx
@@ -16,15 +16,13 @@ const Loadingitem = styled.div<{
     marginBottom: 4,
     alignItems: 'center',
     overflow: 'hidden',
+    background: 'var(--sb-appBorderColor)',
   },
   ({ depth = 0 }) => ({
     marginLeft: depth * 15,
     maxWidth: 85 - depth * 5,
   }),
-  ({ theme }) => theme.animation.inlineGlow,
-  ({ theme }) => ({
-    background: theme.appBorderColor,
-  })
+  ({ theme }) => theme.animation.inlineGlow
 );
 
 export const Contained = styled.div({
diff --git a/code/core/src/manager/components/sidebar/Menu.tsx b/code/core/src/manager/components/sidebar/Menu.tsx
index c5c75dc331f0..85b03dc144e1 100644
--- a/code/core/src/manager/components/sidebar/Menu.tsx
+++ b/code/core/src/manager/components/sidebar/Menu.tsx
@@ -43,14 +43,14 @@ const buttonStyleAdditions = ({
       height: 5px;
       z-index: 2;
       border-radius: 50%;
-      background: ${theme.background.app};
-      border: 1px solid ${theme.background.app};
-      box-shadow: 0 0 0 2px ${theme.background.app};
+      background: var(--sb-background-app);
+      border: 1px solid var(--sb-background-app);
+      box-shadow: 0 0 0 2px var(--sb-background-app);
     }
     &:after {
-      background: ${theme.color.positive};
+      background: var(--sb-color-positive);
       border: 1px solid rgba(0, 0, 0, 0.1);
-      box-shadow: 0 0 0 2px ${theme.background.app};
+      box-shadow: 0 0 0 2px var(--sb-background-app);
     }
     &:hover:after,
     &:focus-visible:after {
diff --git a/code/core/src/manager/components/sidebar/NoResults.tsx b/code/core/src/manager/components/sidebar/NoResults.tsx
index 26c128aa4e6a..2cf610254cec 100644
--- a/code/core/src/manager/components/sidebar/NoResults.tsx
+++ b/code/core/src/manager/components/sidebar/NoResults.tsx
@@ -1,6 +1,6 @@
 import { styled } from 'storybook/theming';
 
-export const NoResults = styled.div(({ theme }) => ({
+export const NoResults = styled.div({
   display: 'flex',
   flexDirection: 'column',
   textAlign: 'center',
@@ -8,10 +8,10 @@ export const NoResults = styled.div(({ theme }) => ({
   gap: 4,
   padding: '20px 0',
   lineHeight: `18px`,
-  fontSize: `${theme.typography.size.s2}px`,
-  color: theme.color.defaultText,
+  fontSize: 'var(--sb-typography-size-s2)',
+  color: 'var(--sb-color-defaultText)',
   small: {
-    color: theme.textMutedColor,
-    fontSize: `${theme.typography.size.s1}px`,
+    color: 'var(--sb-textMutedColor)',
+    fontSize: 'var(--sb-typography-size-s1)',
   },
-}));
+});
diff --git a/code/core/src/manager/components/sidebar/RefBlocks.tsx b/code/core/src/manager/components/sidebar/RefBlocks.tsx
index e908249eb068..a51be1250e84 100644
--- a/code/core/src/manager/components/sidebar/RefBlocks.tsx
+++ b/code/core/src/manager/components/sidebar/RefBlocks.tsx
@@ -21,18 +21,18 @@ import { NoResults } from './NoResults';
 
 const { window: globalWindow } = global;
 
-const TextStyle = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+const TextStyle = styled.div({
+  fontSize: `var(--sb-typography-size-s2)`,
   lineHeight: '20px',
   margin: 0,
-}));
-const Text = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+});
+const Text = styled.div({
+  fontSize: `var(--sb-typography-size-s2)`,
   lineHeight: '20px',
   margin: 0,
 
   code: {
-    fontSize: theme.typography.size.s1,
+    fontSize: `var(--sb-typography-size-s1)`,
   },
 
   ul: {
@@ -40,7 +40,7 @@ const Text = styled.div(({ theme }) => ({
     marginTop: 8,
     marginBottom: 8,
   },
-}));
+});
 
 const ErrorDisplay = styled.pre<{ isMobile: boolean }>(
   {
@@ -48,19 +48,10 @@ const ErrorDisplay = styled.pre<{ isMobile: boolean }>(
     borderRadius: 8,
     overflow: 'auto',
     whiteSpace: 'pre',
+    color: 'var(--sb-color-dark)',
   },
   ({ isMobile }) =>
-    isMobile
-      ? {
-          maxWidth: 'calc(100vw - 40px)',
-        }
-      : {
-          minWidth: 420,
-          maxWidth: 640,
-        },
-  ({ theme }) => ({
-    color: theme.color.dark,
-  })
+    isMobile ? { maxWidth: 'calc(100vw - 40px)' } : { minWidth: 420, maxWidth: 640 }
 );
 
 export const AuthBlock: FC<{ loginUrl: string; id: string }> = ({ loginUrl, id }) => {
diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx
index 4d76d4f409ba..bdcb5f97781d 100644
--- a/code/core/src/manager/components/sidebar/RefIndicator.tsx
+++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx
@@ -33,19 +33,19 @@ export interface CurrentVersionProps {
   versions: RefType['versions'];
 }
 
-const IndicatorPlacement = styled.div(({ theme }) => ({
+const IndicatorPlacement = styled.div({
   height: 16,
 
   display: 'flex',
   alignItems: 'center',
 
   '& > * + *': {
-    marginLeft: theme.layoutMargin,
+    marginLeft: 'var(--sb-layoutMargin)',
   },
-}));
+});
 
-const IndicatorClickTarget = styled(Button)(({ theme }) => ({
-  color: theme.textMutedColor,
+const IndicatorClickTarget = styled(Button)({
+  color: 'var(--sb-textMutedColor)',
   svg: {
     height: 14,
     width: 14,
@@ -53,35 +53,35 @@ const IndicatorClickTarget = styled(Button)(({ theme }) => ({
     transition: 'all 150ms ease-out',
     color: 'inherit',
   },
-}));
+});
 
-const MessageTitle = styled.span(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-}));
+const MessageTitle = styled.span({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
-const StyledMessage = styled.a(({ theme }) => ({
+const StyledMessage = styled.a({
   textDecoration: 'none',
   lineHeight: '16px',
   padding: 15,
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'flex-start',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
 
   '&:not(:last-child)': {
-    borderBottom: `1px solid ${theme.appBorderColor}`,
+    borderBottom: `1px solid var(--sb-appBorderColor)`,
   },
   '&:hover': {
-    background: theme.background.hoverable,
-    color: theme.color.defaultText,
+    background: 'var(--sb-background-hoverable)',
+    color: 'var(--sb-color-defaultText)',
   },
   '&:link, &:active, &:focus': {
-    color: theme.color.defaultText,
+    color: 'var(--sb-color-defaultText)',
   },
   '&:focus-visible': {
-    background: theme.background.hoverable,
+    background: 'var(--sb-background-hoverable)',
     borderRadius: 8,
-    boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
+    boxShadow: `inset 0 0 0 2px var(--sb-color-secondary)`,
     outline: 'none',
   },
   '& > *': {
@@ -94,7 +94,7 @@ const StyledMessage = styled.a(({ theme }) => ({
     marginRight: 10,
     flex: 'unset',
   },
-}));
+});
 
 const Message: FC<{
   blank?: boolean;
@@ -118,17 +118,17 @@ export const MessageWrapper = styled.div<{
     borderRadius: 8,
     overflow: 'hidden',
   }),
-  ({ theme }) => ({
-    color: theme.color.dark,
-  })
+  {
+    color: 'var(--sb-color-dark)',
+  }
 );
 
-const SubtleSelect = styled(Select)(({ theme }) => ({
+const SubtleSelect = styled(Select)({
   background: 'transparent',
-  color: theme.color.defaultText,
-  fontSize: theme.typography.size.s1,
-  fontWeight: theme.typography.weight.regular,
-}));
+  color: 'var(--sb-color-defaultText)',
+  fontSize: 'var(--sb-typography-size-s1)',
+  fontWeight: 'var(--sb-typography-weight-regular)',
+});
 
 export const RefIndicator = React.memo(
   forwardRef<HTMLDivElement, RefType & { state: ReturnType<typeof getStateType> }>(
diff --git a/code/core/src/manager/components/sidebar/Refs.tsx b/code/core/src/manager/components/sidebar/Refs.tsx
index 33c8c18c4c38..fc1ea188f179 100644
--- a/code/core/src/manager/components/sidebar/Refs.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.tsx
@@ -26,9 +26,9 @@ const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
   marginTop: isMain ? undefined : 0,
 }));
 
-const RefHead = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-  fontSize: theme.typography.size.s2,
+const RefHead = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+  fontSize: 'var(--sb-typography-size-s2)',
 
   // Similar to ListItem.tsx
   textDecoration: 'none',
@@ -42,10 +42,10 @@ const RefHead = styled.div(({ theme }) => ({
   marginTop: 20,
   paddingTop: 16,
   paddingBottom: 12,
-  borderTop: `1px solid ${theme.appBorderColor}`,
+  borderTop: `1px solid var(--sb-appBorderColor)`,
 
-  color: theme.color.defaultText,
-}));
+  color: 'var(--sb-color-defaultText)',
+});
 
 const RefTitle = styled.div({
   textOverflow: 'ellipsis',
@@ -55,7 +55,7 @@ const RefTitle = styled.div({
   marginLeft: 2,
 });
 
-const CollapseButton = styled.button(({ theme }) => ({
+const CollapseButton = styled.button({
   all: 'unset',
   display: 'flex',
   padding: '0px 8px',
@@ -65,12 +65,12 @@ const CollapseButton = styled.button(({ theme }) => ({
   overflow: 'hidden',
 
   '&:focus': {
-    borderColor: theme.color.secondary,
+    borderColor: 'var(--sb-color-secondary)',
     'span:first-of-type': {
-      borderLeftColor: theme.color.secondary,
+      borderLeftColor: 'var(--sb-color-secondary)',
     },
   },
-}));
+});
 
 export const Ref: FC<RefType & RefProps> = React.memo(function Ref(props) {
   const { docsOptions } = useStorybookState();
diff --git a/code/core/src/manager/components/sidebar/Search.tsx b/code/core/src/manager/components/sidebar/Search.tsx
index f2d9e6a6d9ed..093092e8a417 100644
--- a/code/core/src/manager/components/sidebar/Search.tsx
+++ b/code/core/src/manager/components/sidebar/Search.tsx
@@ -63,7 +63,7 @@ const ScreenReaderLabel = styled.label({
   overflow: 'hidden',
 });
 
-const SearchField = styled.div<{ isMobile: boolean }>(({ theme, isMobile }) => ({
+const SearchField = styled.div<{ isMobile: boolean }>(({ isMobile }) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -71,42 +71,42 @@ const SearchField = styled.div<{ isMobile: boolean }>(({ theme, isMobile }) => (
   flexGrow: 1,
   height: isMobile ? 36 : 32,
   width: '100%',
-  boxShadow: `${theme.button.border} 0 0 0 1px inset`,
-  borderRadius: theme.appBorderRadius + 2,
+  boxShadow: `var(--sb-button-border) 0 0 0 1px inset`,
+  borderRadius: 'calc(var(--sb-appBorderRadius) + 2px)',
 
   '&:has(input:focus), &:has(input:active)': {
-    background: theme.background.app,
-    outline: `2px solid ${theme.color.secondary}`,
+    background: 'var(--sb-background-app)',
+    outline: `2px solid var(--sb-color-secondary)`,
     outlineOffset: 2,
   },
 }));
 
-const IconWrapper = styled.div(({ theme, onClick }) => ({
+const IconWrapper = styled.div(({ onClick }) => ({
   cursor: onClick ? 'pointer' : 'default',
   flex: '0 0 28px',
   height: '100%',
   pointerEvents: onClick ? 'auto' : 'none',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 }));
 
-const Input = styled.input<{ isMobile: boolean }>(({ theme, isMobile }) => ({
+const Input = styled.input<{ isMobile: boolean }>(({ isMobile }) => ({
   appearance: 'none',
   height: 28,
   width: '100%',
   padding: 0,
   border: 0,
   background: 'transparent',
-  fontSize: isMobile ? '16px' : `${theme.typography.size.s1 + 1}px`,
+  fontSize: isMobile ? '16px' : `calc(var(--sb-typography-size-s1) + 1px)`,
   fontFamily: 'inherit',
   transition: 'all 150ms',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   outline: 0,
 
   '&::placeholder': {
-    color: theme.textMutedColor,
+    color: 'var(--sb-textMutedColor)',
     opacity: 1,
   },
   '&:valid ~ code, &:focus ~ code': {
@@ -131,11 +131,11 @@ const FocusKey = styled.code(({ theme }) => ({
   margin: 5,
   marginTop: 6,
   height: 16,
-  fontFamily: theme.typography.fonts.base,
+  fontFamily: 'var(--sb-typography-fonts-base)',
   lineHeight: '16px',
   textAlign: 'center',
   fontSize: '11px',
-  color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
+  color: theme.base === 'light' ? 'var(--sb-color-dark)' : 'var(--sb-textMutedColor)',
   userSelect: 'none',
   pointerEvents: 'none',
   display: 'flex',
diff --git a/code/core/src/manager/components/sidebar/SearchResults.tsx b/code/core/src/manager/components/sidebar/SearchResults.tsx
index 2e691a68d9bb..2faa8d94b025 100644
--- a/code/core/src/manager/components/sidebar/SearchResults.tsx
+++ b/code/core/src/manager/components/sidebar/SearchResults.tsx
@@ -38,8 +38,8 @@ const ResultRow = styled.li<{ isHighlighted: boolean }>(({ theme, isHighlighted
   justifyContent: 'space-between',
   textAlign: 'left',
   color: 'inherit',
-  fontSize: `${theme.typography.size.s2}px`,
-  background: isHighlighted ? theme.background.hoverable : 'transparent',
+  fontSize: 'var(--sb-typography-size-s2)',
+  background: isHighlighted ? 'var(--sb-background-hoverable)' : 'transparent',
   minHeight: 28,
   borderRadius: 4,
   gap: 6,
@@ -64,28 +64,28 @@ const ResultRowContent = styled.div({
   flexDirection: 'column',
 });
 
-const Mark = styled.mark(({ theme }) => ({
+const Mark = styled.mark({
   background: 'transparent',
-  color: theme.color.secondary,
+  color: 'var(--sb-color-secondary)',
   '@media (forced-colors: active)': {
     color: 'HighlightText',
     background: 'Highlight',
   },
-}));
+});
 
 const MoreWrapper = styled.div({
   marginTop: 8,
 });
 
-const RecentlyOpenedTitle = styled.div(({ theme }) => ({
+const RecentlyOpenedTitle = styled.div({
   display: 'flex',
   justifyContent: 'space-between',
-  fontSize: `${theme.typography.size.s1 - 1}px`,
-  fontWeight: theme.typography.weight.bold,
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
   minHeight: 28,
   letterSpacing: '0.16em',
   textTransform: 'uppercase',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   marginBottom: 4,
   alignItems: 'center',
 
@@ -98,7 +98,7 @@ const RecentlyOpenedTitle = styled.div(({ theme }) => ({
       visibility: 'visible',
     },
   },
-}));
+});
 
 const Highlight: FC<PropsWithChildren<{ match?: Match }>> = React.memo(function Highlight({
   children,
@@ -136,12 +136,12 @@ const Title = styled.div({
   },
 });
 
-const Path = styled.div(({ theme }) => ({
+const Path = styled.div({
   display: 'grid',
   justifyContent: 'start',
   gridAutoColumns: 'auto',
   gridAutoFlow: 'column',
-  fontSize: `${theme.typography.size.s1 - 1}px`,
+  fontSize: 'calc(var(--sb-typography-size-s1) - 1px)',
 
   '& > span': {
     display: 'block',
@@ -155,7 +155,7 @@ const Path = styled.div(({ theme }) => ({
       content: "' / '",
     },
   },
-}));
+});
 
 const Result: FC<
   SearchResult & {
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index 4b5798198f63..4f2740bd86c3 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -28,7 +28,7 @@ import { useLastViewed } from './useLastViewed';
 
 export const DEFAULT_REF_ID = 'storybook_internal';
 
-const Container = styled.header(({ theme }) => ({
+const Container = styled.header({
   position: 'absolute',
   zIndex: 1,
   left: 0,
@@ -39,12 +39,12 @@ const Container = styled.header(({ theme }) => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  background: theme.background.content,
+  background: 'var(--sb-background-content)',
 
   [MEDIA_DESKTOP_BREAKPOINT]: {
-    background: theme.background.app,
+    background: 'var(--sb-background-app)',
   },
-}));
+});
 
 const Stack = styled.div({
   display: 'flex',
@@ -53,11 +53,11 @@ const Stack = styled.div({
   padding: '16px 12px 20px 12px',
 });
 
-const CreateNewStoryButton = styled(Button)<{ isMobile: boolean }>(({ theme, isMobile }) => ({
-  color: theme.textMutedColor,
+const CreateNewStoryButton = styled(Button)<{ isMobile: boolean }>(({ isMobile }) => ({
+  color: 'var(--sb-textMutedColor)',
   width: isMobile ? 36 : 32,
   height: isMobile ? 36 : 32,
-  borderRadius: theme.appBorderRadius + 2,
+  borderRadius: 'calc(var(--sb-appBorderRadius) + 2px)',
 }));
 
 const useCombination = (
diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
index dd8e3896f563..3e1a6a61e0fb 100644
--- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx
+++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx
@@ -54,7 +54,7 @@ const Spacer = styled.div({
   pointerEvents: 'none',
 });
 
-const Content = styled.div(({ theme }) => ({
+const Content = styled.div({
   position: 'absolute',
   zIndex: 1,
   bottom: 0,
@@ -64,21 +64,21 @@ const Content = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   gap: 12,
-  color: theme.color.defaultText,
-  fontSize: theme.typography.size.s1,
+  color: 'var(--sb-color-defaultText)',
+  fontSize: 'var(--sb-typography-size-s1)',
 
   '&:empty': {
     display: 'none',
   },
 
-  '--card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
+  '--card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px var(--sb-background-app)`,
 
   // Integrators can use these to style their custom additions
-  '--sb-sidebar-bottom-card-background': theme.background.content,
-  '--sb-sidebar-bottom-card-border': `1px solid ${theme.appBorderColor}`,
-  '--sb-sidebar-bottom-card-border-radius': `${theme.appBorderRadius + 1}px`,
-  '--sb-sidebar-bottom-card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
-}));
+  '--sb-sidebar-bottom-card-background': 'var(--sb-background-content)',
+  '--sb-sidebar-bottom-card-border': `1px solid var(--sb-appBorderColor)`,
+  '--sb-sidebar-bottom-card-border-radius': `calc(var(--sb-appBorderRadius) + 1px)`,
+  '--sb-sidebar-bottom-card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px var(--sb-background-app)`,
+});
 
 interface SidebarBottomProps {
   api: API;
diff --git a/code/core/src/manager/components/sidebar/StatusButton.tsx b/code/core/src/manager/components/sidebar/StatusButton.tsx
index 987a783cd25b..477056d54e5d 100644
--- a/code/core/src/manager/components/sidebar/StatusButton.tsx
+++ b/code/core/src/manager/components/sidebar/StatusButton.tsx
@@ -47,7 +47,7 @@ const StyledButton = styled(Button)<{
     height: height || 28,
 
     '&:hover': {
-      color: theme.color.secondary,
+      color: 'var(--sb-color-secondary)',
       background:
         theme.base === 'dark'
           ? darken(0.3, theme.color.secondary)
@@ -66,8 +66,8 @@ const StyledButton = styled(Button)<{
     },
 
     '&:focus': {
-      color: theme.color.secondary,
-      borderColor: theme.color.secondary,
+      color: 'var(--sb-color-secondary)',
+      borderColor: 'var(--sb-color-secondary)',
       outlineOffset: -2,
 
       '&:not(:focus-visible)': {
@@ -75,10 +75,10 @@ const StyledButton = styled(Button)<{
       },
     },
   }),
-  ({ theme, selectedItem }) =>
+  ({ selectedItem }) =>
     selectedItem && {
       '&:hover': {
-        boxShadow: `inset 0 0 0 2px ${theme.color.secondary}`,
+        boxShadow: `inset 0 0 0 2px var(--sb-color-secondary)`,
         background: 'rgba(255, 255, 255, 0.2)',
       },
     }
diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx
index 31d49b8c0e8f..3b6d85d91c1b 100644
--- a/code/core/src/manager/components/sidebar/TagsFilter.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx
@@ -15,13 +15,13 @@ const TAGS_FILTER = 'tags-filter';
 
 const BUILT_IN_TAGS = new Set<string>(Object.values(Tag));
 
-const StyledButton = styled(Button)<{ isHighlighted: boolean }>(({ isHighlighted, theme }) => ({
+const StyledButton = styled(Button)<{ isHighlighted: boolean }>(({ isHighlighted }) => ({
   '&:focus-visible': {
     outlineOffset: 4,
   },
   ...(isHighlighted && {
-    background: theme.background.hoverable,
-    color: theme.color.secondary,
+    background: 'var(--sb-background-hoverable)',
+    color: 'var(--sb-color-secondary)',
   }),
 }));
 
@@ -39,7 +39,7 @@ const remove = (set: Set<string>, id: string) => {
 const equal = (left: Set<string>, right: Set<string>) =>
   left.size === right.size && new Set([...left, ...right]).size === left.size;
 
-const TagSelected = styled(Badge)(({ theme }) => ({
+const TagSelected = styled(Badge)({
   position: 'absolute',
   top: 7,
   right: 7,
@@ -51,11 +51,11 @@ const TagSelected = styled(Badge)(({ theme }) => ({
   height: 6,
   minWidth: 6,
   lineHeight: 'px',
-  boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`,
-  fontSize: theme.typography.size.s1 - 1,
-  background: theme.barSelectedColor,
-  color: theme.color.inverseText,
-}));
+  boxShadow: `var(--sb-barSelectedColor) 0 0 0 1px inset`,
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
+  background: 'var(--sb-barSelectedColor)',
+  color: 'var(--sb-color-inverseText)',
+});
 
 export interface TagsFilterProps {
   api: API;
diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
index 38ec700e1c8c..3e5b69fd1f23 100644
--- a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
+++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx
@@ -36,9 +36,9 @@ const Wrapper = styled.div({
   scrollbarWidth: 'thin',
 });
 
-const MutedText = styled.span(({ theme }) => ({
-  color: theme.textMutedColor,
-}));
+const MutedText = styled.span({
+  color: 'var(--sb-textMutedColor)',
+});
 
 export type FilterFunction = (entry: API_PreparedIndexEntry, excluded?: boolean) => boolean;
 export type Filter = {
diff --git a/code/core/src/manager/components/sidebar/TestingWidget.stories.tsx b/code/core/src/manager/components/sidebar/TestingWidget.stories.tsx
index feee55c2af7f..a29de271e4f8 100644
--- a/code/core/src/manager/components/sidebar/TestingWidget.stories.tsx
+++ b/code/core/src/manager/components/sidebar/TestingWidget.stories.tsx
@@ -17,10 +17,10 @@ import { styled } from 'storybook/theming';
 import { internal_fullTestProviderStore } from '../../manager-stores.mock';
 import { TestingWidget } from './TestingWidget';
 
-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div({
   maxWidth: 250,
-  '--card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px ${theme.background.app}`,
-}));
+  '--card-box-shadow': `0 1px 2px 0 rgba(0, 0, 0, 0.05), 0px -5px 20px 10px var(--sb-background-app)`,
+});
 
 const TestProvider = styled.div({
   padding: 8,
diff --git a/code/core/src/manager/components/sidebar/TestingWidget.tsx b/code/core/src/manager/components/sidebar/TestingWidget.tsx
index 950be08b3dc7..08fd2a2a779e 100644
--- a/code/core/src/manager/components/sidebar/TestingWidget.tsx
+++ b/code/core/src/manager/components/sidebar/TestingWidget.tsx
@@ -36,10 +36,10 @@ const HoverCard = styled(Card)({
   },
 });
 
-const Collapsible = styled.div(({ theme }) => ({
+const Collapsible = styled.div({
   overflow: 'hidden',
-  boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`,
-}));
+  boxShadow: `inset 0 -1px 0 var(--sb-appBorderColor)`,
+});
 
 const Content = styled.div({
   display: 'flex',
@@ -113,12 +113,12 @@ const StatusButton = styled(ActionList.Toggle)<{
     (theme.base === 'light'
       ? {
           background: {
-            negative: theme.background.negative,
-            warning: theme.background.warning,
+            negative: 'var(--sb-background-negative)',
+            warning: 'var(--sb-background-warning)',
           }[status],
           color: {
-            negative: theme.color.negativeText,
-            warning: theme.color.warningText,
+            negative: 'var(--sb-color-negativeText)',
+            warning: 'var(--sb-color-warningText)',
           }[status],
         }
       : {
@@ -127,19 +127,19 @@ const StatusButton = styled(ActionList.Toggle)<{
             warning: `${theme.color.warning}22`,
           }[status],
           color: {
-            negative: theme.color.negative,
-            warning: theme.color.warning,
+            negative: 'var(--sb-color-negative)',
+            warning: 'var(--sb-color-warning)',
           }[status],
         })
 );
 
-const TestProvider = styled.div(({ theme }) => ({
+const TestProvider = styled.div({
   padding: 4,
 
   '&:not(:last-child)': {
-    boxShadow: `inset 0 -1px 0 ${theme.appBorderColor}`,
+    boxShadow: `inset 0 -1px 0 var(--sb-appBorderColor)`,
   },
-}));
+});
 
 interface TestingModuleProps {
   registeredTestProviders: Addon_Collection<Addon_TestProviderType>;
diff --git a/code/core/src/manager/components/sidebar/Tree.tsx b/code/core/src/manager/components/sidebar/Tree.tsx
index c2dd3fded13e..77b84e163b3c 100644
--- a/code/core/src/manager/components/sidebar/Tree.tsx
+++ b/code/core/src/manager/components/sidebar/Tree.tsx
@@ -63,33 +63,33 @@ import { useExpanded } from './useExpanded';
 
 export type ExcludesNull = <T>(x: T | null) => x is T;
 
-const CollapseButton = styled(Button)(({ theme }) => ({
-  fontSize: `${theme.typography.size.s1 - 1}px`,
-  fontWeight: theme.typography.weight.bold,
+const CollapseButton = styled(Button)({
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
   letterSpacing: '0.16em',
   textTransform: 'uppercase',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   padding: '0 8px',
-}));
+});
 
 export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   position: 'relative',
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'flex-start',
-  color: theme.color.defaultText,
+  color: 'var(--sb-color-defaultText)',
   background: 'transparent',
   minHeight: 28,
   borderRadius: 4,
   overflow: 'hidden',
-  '--tree-node-background-hover': theme.background.content,
+  '--tree-node-background-hover': 'var(--sb-background-content)',
 
   [MEDIA_DESKTOP_BREAKPOINT]: {
-    '--tree-node-background-hover': theme.background.app,
+    '--tree-node-background-hover': 'var(--sb-background-app)',
   },
 
   '&:hover, &:focus': {
-    '--tree-node-background-hover': theme.background.hoverable,
+    '--tree-node-background-hover': 'var(--sb-background-hoverable)',
     background: 'var(--tree-node-background-hover)',
     outline: 'none',
   },
@@ -111,21 +111,22 @@ export const LeafNodeStyleWrapper = styled.div(({ theme }) => ({
   },
 
   '&[data-selected="true"]': {
-    color: theme.color.lightest,
-    background: theme.base === 'dark' ? darken(0.18, theme.color.secondary) : theme.color.secondary,
-    fontWeight: theme.typography.weight.bold,
+    color: 'var(--sb-color-lightest)',
+    background:
+      theme.base === 'dark' ? darken(0.18, theme.color.secondary) : 'var(--sb-color-secondary)',
+    fontWeight: 'var(--sb-typography-weight-bold)',
 
     '&&:hover, &&:focus': {
       background:
-        theme.base === 'dark' ? darken(0.18, theme.color.secondary) : theme.color.secondary,
+        theme.base === 'dark' ? darken(0.18, theme.color.secondary) : 'var(--sb-color-secondary)',
     },
-    svg: { color: theme.color.lightest },
+    svg: { color: 'var(--sb-color-lightest)' },
   },
 
   a: { color: 'currentColor' },
 }));
 
-const SkipToContentLink = styled(Button)(({ theme }) => ({
+const SkipToContentLink = styled(Button)({
   display: 'none',
   '@media (min-width: 600px)': {
     display: 'block',
@@ -141,11 +142,11 @@ const SkipToContentLink = styled(Button)(({ theme }) => ({
       opacity: 1,
       padding: '5px 10px',
       background: 'white',
-      color: theme.color.secondary,
+      color: 'var(--sb-color-secondary)',
       width: 'auto',
     },
   },
-}));
+});
 
 interface NodeProps {
   item: Item;
diff --git a/code/core/src/manager/components/sidebar/TreeNode.tsx b/code/core/src/manager/components/sidebar/TreeNode.tsx
index bd99bb883ac5..b6bb9d1c1a92 100644
--- a/code/core/src/manager/components/sidebar/TreeNode.tsx
+++ b/code/core/src/manager/components/sidebar/TreeNode.tsx
@@ -13,23 +13,23 @@ export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'test' | 'gro
     flex: '0 0 auto',
     color: (() => {
       if (type === 'group') {
-        return theme.base === 'dark' ? theme.color.primary : theme.color.ultraviolet;
+        return theme.base === 'dark' ? 'var(--sb-color-primary)' : 'var(--sb-color-ultraviolet)';
       }
 
       if (type === 'component') {
-        return theme.color.secondary;
+        return 'var(--sb-color-secondary)';
       }
 
       if (type === 'document') {
-        return theme.base === 'dark' ? theme.color.gold : '#ff8300';
+        return theme.base === 'dark' ? 'var(--sb-color-gold)' : '#ff8300';
       }
 
       if (type === 'story') {
-        return theme.color.seafoam;
+        return 'var(--sb-color-seafoam)';
       }
 
       if (type === 'test') {
-        return theme.color.green;
+        return 'var(--sb-color-green)';
       }
 
       return 'currentColor';
@@ -38,7 +38,6 @@ export const TypeIcon = styled.svg<{ type: 'component' | 'story' | 'test' | 'gro
 );
 
 const commonNodeStyles: FunctionInterpolation<{ depth?: number; isExpandable?: boolean }> = ({
-  theme,
   depth = 0,
   isExpandable = false,
 }) => ({
@@ -51,7 +50,7 @@ const commonNodeStyles: FunctionInterpolation<{ depth?: number; isExpandable?: b
   textDecoration: 'none',
   border: 'none',
   color: 'inherit',
-  fontSize: `${theme.typography.size.s2}px`,
+  fontSize: 'var(--sb-typography-size-s2)',
   fontWeight: 'inherit',
   background: 'transparent',
   minHeight: 28,
diff --git a/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx b/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
index 171d12fdc343..66cdb96f4502 100644
--- a/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
+++ b/code/core/src/manager/components/sidebar/components/CollapseIcon.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 
 import { styled } from 'storybook/theming';
 
-export const CollapseIconWrapper = styled.div<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({
+export const CollapseIconWrapper = styled.div<{ isExpanded: boolean }>(({ isExpanded }) => ({
   width: 8,
   height: 8,
   display: 'flex',
@@ -11,7 +11,7 @@ export const CollapseIconWrapper = styled.div<{ isExpanded: boolean }>(({ theme,
   alignItems: 'center',
   transform: isExpanded ? 'rotateZ(90deg)' : 'none',
   transition: 'transform .1s ease-out',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
 }));
 
 export const CollapseIcon: FC<ComponentProps<typeof CollapseIconWrapper>> = (props) => (
diff --git a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
index b72f15d2f94e..ebb56446229c 100644
--- a/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
+++ b/code/core/src/manager/components/upgrade/UpgradeBlock.tsx
@@ -43,19 +43,19 @@ export const UpgradeBlock: FC<UpgradeBlockProps> = ({ onNavigateToWhatsNew }) =>
   );
 };
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   border: '1px solid',
   borderRadius: 5,
   padding: 20,
   marginTop: 0,
-  borderColor: theme.appBorderColor,
-  fontSize: theme.typography.size.s2,
+  borderColor: 'var(--sb-appBorderColor)',
+  fontSize: `var(--sb-typography-size-s2)`,
   width: '100%',
 
   [MEDIA_DESKTOP_BREAKPOINT]: {
     maxWidth: 400,
   },
-}));
+});
 
 const Tabs = styled.div({
   display: 'flex',
@@ -63,19 +63,19 @@ const Tabs = styled.div({
 });
 
 const Code = styled.pre(({ theme }) => ({
-  background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.05)' : theme.appBorderColor,
-  fontSize: theme.typography.size.s2 - 1,
+  background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'var(--sb-appBorderColor)',
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
   margin: '4px 0 16px',
 }));
 
-const ButtonTab = styled.button<{ active: boolean }>(({ theme, active }) => ({
+const ButtonTab = styled.button<{ active: boolean }>(({ active }) => ({
   all: 'unset',
   alignItems: 'center',
   gap: 10,
-  color: theme.color.defaultText,
-  fontSize: theme.typography.size.s2 - 1,
+  color: 'var(--sb-color-defaultText)',
+  fontSize: `calc(var(--sb-typography-size-s2) - 1px)`,
   borderBottom: '2px solid transparent',
-  borderBottomColor: active ? theme.color.secondary : 'none',
+  borderBottomColor: active ? 'var(--sb-color-secondary)' : 'transparent',
   padding: '0 10px 5px',
   marginBottom: '5px',
   cursor: 'pointer',
diff --git a/code/core/src/manager/container/Menu.tsx b/code/core/src/manager/container/Menu.tsx
index 1e34b4fb3e8e..196946af2be6 100644
--- a/code/core/src/manager/container/Menu.tsx
+++ b/code/core/src/manager/container/Menu.tsx
@@ -25,9 +25,9 @@ export type MenuItem = NormalLink & {
   internal?: boolean;
 };
 
-const ProgressCircle = styled(ProgressSpinner)(({ theme }) => ({
-  color: theme.color.secondary,
-}));
+const ProgressCircle = styled(ProgressSpinner)({
+  color: 'var(--sb-color-secondary)',
+});
 
 export const useMenu = ({
   api,
diff --git a/code/core/src/manager/globals/exports.ts b/code/core/src/manager/globals/exports.ts
index 59703619f1de..4ea3f6a04abf 100644
--- a/code/core/src/manager/globals/exports.ts
+++ b/code/core/src/manager/globals/exports.ts
@@ -364,6 +364,7 @@ export default {
     'ClassNames',
     'Global',
     'ThemeProvider',
+    'ThemeVariables',
     'background',
     'color',
     'convert',
diff --git a/code/core/src/manager/index.tsx b/code/core/src/manager/index.tsx
index 9de62e5dd8e6..5fa29d849727 100644
--- a/code/core/src/manager/index.tsx
+++ b/code/core/src/manager/index.tsx
@@ -11,7 +11,7 @@ import { global } from '@storybook/global';
 import { HelmetProvider } from 'react-helmet-async';
 import { Provider as ManagerProvider, types } from 'storybook/manager-api';
 import type { Combo } from 'storybook/manager-api';
-import { ThemeProvider, ensure as ensureTheme } from 'storybook/theming';
+import { ThemeProvider, ThemeVariables, ensure as ensureTheme } from 'storybook/theming';
 
 import { App } from './App';
 import type { Layout } from './components/layout/Layout';
@@ -68,6 +68,7 @@ const Main: FC<{ provider: Provider }> = ({ provider }) => {
 
             return (
               <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
+                <ThemeVariables />
                 <LayoutProvider>
                   <App
                     key="app"
diff --git a/code/core/src/manager/settings/About.tsx b/code/core/src/manager/settings/About.tsx
index 63e8fa526552..c7683c9ca15d 100644
--- a/code/core/src/manager/settings/About.tsx
+++ b/code/core/src/manager/settings/About.tsx
@@ -33,9 +33,9 @@ const Footer = styled.div(({ theme }) => ({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'center',
-  color: theme.base === 'light' ? theme.color.dark : theme.color.lightest,
-  fontWeight: theme.typography.weight.regular,
-  fontSize: theme.typography.size.s2,
+  color: theme.base === 'light' ? 'var(--sb-color-dark)' : 'var(--sb-color-lightest)',
+  fontWeight: 'var(--sb-typography-weight-regular)',
+  fontSize: `var(--sb-typography-size-s2)`,
 }));
 
 const Actions = styled.div({
@@ -49,11 +49,11 @@ const Actions = styled.div({
 
 const StyledLink = styled(Link as any)(({ theme }) => ({
   '&&': {
-    fontWeight: theme.typography.weight.bold,
-    color: theme.base === 'light' ? theme.color.dark : theme.color.light,
+    fontWeight: 'var(--sb-typography-weight-bold)',
+    color: theme.base === 'light' ? 'var(--sb-color-dark)' : 'var(--sb-color-light)',
   },
   '&:hover': {
-    color: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
+    color: theme.base === 'light' ? 'var(--sb-color-darkest)' : 'var(--sb-color-lightest)',
   },
 }));
 
diff --git a/code/core/src/manager/settings/Checklist/Checklist.stories.tsx b/code/core/src/manager/settings/Checklist/Checklist.stories.tsx
index 02812912e2ba..08b00a1f3e20 100644
--- a/code/core/src/manager/settings/Checklist/Checklist.stories.tsx
+++ b/code/core/src/manager/settings/Checklist/Checklist.stories.tsx
@@ -45,9 +45,9 @@ const availableItems = checklistData.sections.flatMap(
     })
 );
 
-const Container = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
-}));
+const Container = styled.div({
+  fontSize: `var(--sb-typography-size-s2)`,
+});
 
 const managerContext: any = {
   state: {},
diff --git a/code/core/src/manager/settings/Checklist/Checklist.tsx b/code/core/src/manager/settings/Checklist/Checklist.tsx
index 9b57632c5703..6cd83738fcc9 100644
--- a/code/core/src/manager/settings/Checklist/Checklist.tsx
+++ b/code/core/src/manager/settings/Checklist/Checklist.tsx
@@ -33,8 +33,8 @@ const Sections = styled.ol(({ theme }) => ({
   padding: 0,
 
   '& > li': {
-    background: theme.background.content,
-    border: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
+    background: 'var(--sb-background-content)',
+    border: `1px solid ${theme.base === 'dark' ? 'var(--sb-color-darker)' : 'var(--sb-color-border)'}`,
     borderRadius: 8,
   },
 }));
@@ -47,7 +47,7 @@ const Items = styled.ol(({ theme }) => ({
   padding: 0,
 
   '& > li:not(:last-child)': {
-    boxShadow: `inset 0 -1px 0 ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
+    boxShadow: `inset 0 -1px 0 ${theme.base === 'dark' ? 'var(--sb-color-darker)' : 'var(--sb-color-border)'}`,
   },
 
   '& > li:last-child': {
@@ -64,7 +64,7 @@ const SectionSummary = styled.div<{ progress: number; isCollapsed: boolean }>(
     alignItems: 'center',
     gap: 10,
     padding: '10px 10px 10px 15px',
-    borderBottom: `5px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.light}`,
+    borderBottom: `5px solid ${theme.base === 'dark' ? 'var(--sb-color-darker)' : 'var(--sb-color-light)'}`,
     borderBottomLeftRadius: isCollapsed ? 7 : 0,
     borderBottomRightRadius: isCollapsed ? 7 : 0,
     transition: 'border-radius var(--transition-duration, 0.2s)',
@@ -87,7 +87,7 @@ const SectionSummary = styled.div<{ progress: number; isCollapsed: boolean }>(
       content: '""',
       display: 'block',
       width: `${progress}%`,
-      borderBottom: `5px solid ${theme.color.positive}`,
+      borderBottom: `5px solid var(--sb-color-positive)`,
       borderBottomLeftRadius: 'inherit',
       borderBottomRightRadius: progress === 100 ? 'inherit' : 0,
       transition: 'width var(--transition-duration, 0.2s)',
@@ -95,17 +95,17 @@ const SectionSummary = styled.div<{ progress: number; isCollapsed: boolean }>(
   })
 );
 
-const SectionHeading = styled.h2(({ theme }) => ({
+const SectionHeading = styled.h2({
   flex: 1,
   margin: 0,
-  fontSize: theme.typography.size.s3,
-  fontWeight: theme.typography.weight.bold,
-}));
+  fontSize: `var(--sb-typography-size-s3)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
 const ItemSummary = styled.div<{ isCollapsed: boolean; onClick?: () => void }>(
-  ({ theme, isCollapsed, onClick }) => ({
-    fontWeight: theme.typography.weight.regular,
-    fontSize: theme.typography.size.s2,
+  ({ isCollapsed, onClick }) => ({
+    fontWeight: 'var(--sb-typography-weight-regular)',
+    fontSize: `var(--sb-typography-size-s2)`,
     display: 'flex',
     alignItems: 'center',
     minHeight: 40,
@@ -121,29 +121,29 @@ const ItemSummary = styled.div<{ isCollapsed: boolean; onClick?: () => void }>(
   })
 );
 
-const ItemHeading = styled.h3<{ skipped: boolean }>(({ theme, skipped }) => ({
+const ItemHeading = styled.h3<{ skipped: boolean }>(({ skipped }) => ({
   flex: 1,
   margin: 0,
-  color: skipped ? theme.textMutedColor : theme.color.defaultText,
+  color: skipped ? 'var(--sb-textMutedColor)' : 'var(--sb-color-defaultText)',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  fontSize: theme.typography.size.s2,
-  fontWeight: theme.typography.weight.bold,
+  fontSize: `var(--sb-typography-size-s2)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
 }));
 
-const ItemContent = styled.div(({ theme }) => ({
+const ItemContent = styled.div({
   display: 'flex',
   flexDirection: 'column',
   alignItems: 'flex-start',
   gap: 8,
   padding: '0 15px 15px 41px',
-  fontSize: theme.typography.size.s2,
+  fontSize: `var(--sb-typography-size-s2)`,
 
   code: {
     fontSize: '0.9em',
-    backgroundColor: theme.background.app,
-    borderRadius: theme.appBorderRadius,
+    backgroundColor: 'var(--sb-background-app)',
+    borderRadius: 'var(--sb-appBorderRadius)',
     padding: '1px 3px',
   },
   img: {
@@ -159,10 +159,10 @@ const ItemContent = styled.div(({ theme }) => ({
     listStyleType: 'disc',
 
     'li::marker': {
-      color: theme.color.mediumdark,
+      color: 'var(--sb-color-mediumdark)',
     },
   },
-}));
+});
 
 const StatusIcon = styled.div(({ theme }) => ({
   position: 'relative',
@@ -170,13 +170,13 @@ const StatusIcon = styled.div(({ theme }) => ({
   minHeight: 16,
   minWidth: 16,
   margin: 0,
-  background: theme.base === 'dark' ? theme.color.darkest : theme.background.app,
+  background: theme.base === 'dark' ? 'var(--sb-color-darkest)' : 'var(--sb-background-app)',
   borderRadius: 9,
-  outline: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`,
+  outline: `1px solid ${theme.base === 'dark' ? 'var(--sb-color-darker)' : 'var(--sb-color-border)'}`,
   outlineOffset: -1,
 }));
 const Checked = styled(StatusPassIcon)<{ 'data-visible'?: boolean }>(
-  ({ theme, 'data-visible': visible }) => ({
+  ({ 'data-visible': visible }) => ({
     position: 'absolute',
     width: 'inherit',
     height: 'inherit',
@@ -186,17 +186,17 @@ const Checked = styled(StatusPassIcon)<{ 'data-visible'?: boolean }>(
     right: 0,
     padding: 1,
     borderRadius: '50%',
-    background: theme.color.positive,
-    color: theme.background.content,
+    background: 'var(--sb-color-positive)',
+    color: 'var(--sb-background-content)',
     opacity: visible ? 1 : 0,
     transform: visible ? 'scale(1)' : 'scale(0.7)',
     transition: 'all var(--transition-duration, 0.2s)',
   })
 );
-const Skipped = styled.span<{ visible?: boolean }>(({ theme, visible }) => ({
+const Skipped = styled.span<{ visible?: boolean }>(({ visible }) => ({
   display: 'flex',
   alignItems: 'center',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   fontSize: '12px',
   fontWeight: 'bold',
   overflow: 'hidden',
diff --git a/code/core/src/manager/settings/GuidePage.tsx b/code/core/src/manager/settings/GuidePage.tsx
index 343718d79c62..a43a97ed5598 100644
--- a/code/core/src/manager/settings/GuidePage.tsx
+++ b/code/core/src/manager/settings/GuidePage.tsx
@@ -9,32 +9,32 @@ import { styled } from 'storybook/theming';
 import { useChecklist } from '../components/sidebar/useChecklist';
 import { Checklist } from './Checklist/Checklist';
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   display: 'flex',
   flexDirection: 'column',
   maxWidth: 600,
   margin: '0 auto',
   padding: '48px 20px',
   gap: 32,
-  fontSize: theme.typography.size.s2,
+  fontSize: `var(--sb-typography-size-s2)`,
   '--transition-duration': '0.2s',
-}));
+});
 
-const Intro = styled.div(({ theme }) => ({
+const Intro = styled.div({
   display: 'flex',
   flexDirection: 'column',
   gap: 8,
 
   '& h1': {
-    fontSize: theme.typography.size.m3,
-    fontWeight: theme.typography.weight.bold,
+    fontSize: `var(--sb-typography-size-m3)`,
+    fontWeight: 'var(--sb-typography-weight-bold)',
     margin: 0,
   },
 
   '& > p': {
     margin: 0,
   },
-}));
+});
 
 export const GuidePage = () => {
   const checklist = useChecklist();
diff --git a/code/core/src/manager/settings/SettingsFooter.tsx b/code/core/src/manager/settings/SettingsFooter.tsx
index 7bdabf27f6cc..e09dbb7af730 100644
--- a/code/core/src/manager/settings/SettingsFooter.tsx
+++ b/code/core/src/manager/settings/SettingsFooter.tsx
@@ -5,17 +5,18 @@ import { Link } from 'storybook/internal/components';
 
 import { styled } from 'storybook/theming';
 
-const Footer = styled.div(({ theme }) => ({
+const Footer = styled.div({
   display: 'flex',
   paddingTop: 20,
   marginTop: 20,
-  borderTop: `1px solid ${theme.appBorderColor}`,
-  fontWeight: theme.typography.weight.bold,
+  borderTop: `1px solid var(--sb-appBorderColor)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
 
   '& > * + *': {
     marginLeft: 20,
   },
-}));
+});
+
 const SettingsFooter: FC<any> = (props) => (
   <Footer {...props}>
     <Link secondary href="https://storybook.js.org?ref=ui" cancel={false} target="_blank">
diff --git a/code/core/src/manager/settings/index.tsx b/code/core/src/manager/settings/index.tsx
index 15613516dbf3..622d174c7f18 100644
--- a/code/core/src/manager/settings/index.tsx
+++ b/code/core/src/manager/settings/index.tsx
@@ -20,9 +20,9 @@ import { WhatsNewPage } from './whats_new_page';
 
 const { document } = global;
 
-const Content = styled(ScrollArea)(({ theme }) => ({
-  background: theme.background.content,
-}));
+const Content = styled(ScrollArea)({
+  background: 'var(--sb-background-content)',
+});
 
 const SidebarToggle = styled.div({
   // Extra specificity is necessary here
diff --git a/code/core/src/manager/settings/shortcuts.tsx b/code/core/src/manager/settings/shortcuts.tsx
index 62b20331170a..2653268e5d3f 100644
--- a/code/core/src/manager/settings/shortcuts.tsx
+++ b/code/core/src/manager/settings/shortcuts.tsx
@@ -15,18 +15,18 @@ import { keyframes, styled } from 'storybook/theming';
 
 import SettingsFooter from './SettingsFooter';
 
-const Header = styled.header(({ theme }) => ({
+const Header = styled.header({
   marginBottom: 20,
-  fontSize: theme.typography.size.m3,
-  fontWeight: theme.typography.weight.bold,
+  fontSize: `var(--sb-typography-size-m3)`,
+  fontWeight: 'var(--sb-typography-weight-bold)',
   alignItems: 'center',
   display: 'flex',
-}));
+});
 
 // Grid
-export const HeaderItem = styled.div(({ theme }) => ({
-  fontWeight: theme.typography.weight.bold,
-}));
+export const HeaderItem = styled.div({
+  fontWeight: 'var(--sb-typography-weight-bold)',
+});
 
 export const GridHeaderRow = styled.div({
   alignSelf: 'flex-end',
@@ -40,12 +40,12 @@ export const GridHeaderRow = styled.div({
   },
 });
 
-export const Row = styled.div(({ theme }) => ({
+export const Row = styled.div({
   padding: '6px 0',
-  borderTop: `1px solid ${theme.appBorderColor}`,
+  borderTop: `1px solid var(--sb-appBorderColor)`,
   display: 'grid',
   gridTemplateColumns: '1fr 1fr 0px',
-}));
+});
 
 export const GridWrapper = styled.div({
   display: 'grid',
@@ -89,10 +89,10 @@ export const Fade = keyframes`
 `;
 
 const SuccessIcon = styled(CheckIcon)<{ valid: string }>(
-  ({ valid, theme }) =>
+  ({ valid }) =>
     valid === 'valid'
       ? {
-          color: theme.color.positive,
+          color: 'var(--sb-color-positive)',
           animation: `${Fade} 2s ease forwards`,
         }
       : {
@@ -107,12 +107,12 @@ const SuccessIcon = styled(CheckIcon)<{ valid: string }>(
   }
 );
 
-const Container = styled.div(({ theme }) => ({
-  fontSize: theme.typography.size.s2,
+const Container = styled.div({
+  fontSize: `var(--sb-typography-size-s2)`,
   padding: `3rem 20px`,
   maxWidth: 600,
   margin: '0 auto',
-}));
+});
 
 const shortcutLabels = {
   fullScreen: 'Go full screen',
diff --git a/code/core/src/manager/settings/whats_new.tsx b/code/core/src/manager/settings/whats_new.tsx
index b30573bbf36e..1d152f33d2e3 100644
--- a/code/core/src/manager/settings/whats_new.tsx
+++ b/code/core/src/manager/settings/whats_new.tsx
@@ -22,28 +22,28 @@ const LoaderWrapper = styled.div({
   height: '32px',
 });
 
-const Message = styled.div(({ theme }) => ({
+const Message = styled.div({
   paddingTop: '12px',
-  color: theme.textMutedColor,
+  color: 'var(--sb-textMutedColor)',
   maxWidth: '295px',
   margin: '0 auto',
-  fontSize: `${theme.typography.size.s1}px`,
+  fontSize: `var(--sb-typography-size-s1)`,
   lineHeight: `16px`,
-}));
+});
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div({
   position: 'absolute',
   width: '100%',
   height: 40,
   bottom: 0,
-  background: theme.background.bar,
-  fontSize: theme.typography.size.s2,
-  borderTop: `1px solid ${theme.color.border}`,
+  background: 'var(--sb-background-bar)',
+  fontSize: `var(--sb-typography-size-s2)`,
+  borderTop: `1px solid var(--sb-color-border)`,
   padding: '0 10px 0 15px',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-}));
+});
 
 export const WhatsNewFooter = ({
   isNotificationsEnabled,
@@ -106,12 +106,12 @@ const Iframe = styled.iframe<{ isLoaded: boolean }>(
 
 const AlertIcon = styled(((props) => <AlertIconSvg {...props} />) as FC<
   Omit<ComponentProps<typeof AlertIconSvg>, 'icon'>
->)(({ theme }) => ({
-  color: theme.textMutedColor,
+>)({
+  color: 'var(--sb-textMutedColor)',
   width: 32,
   height: 32,
   margin: '0 auto',
-}));
+});
 
 const WhatsNewLoader: FC = () => (
   <Centered>
diff --git a/code/core/src/shared/checklist-store/checklistData.tsx b/code/core/src/shared/checklist-store/checklistData.tsx
index df1a47702373..a2752780970a 100644
--- a/code/core/src/shared/checklist-store/checklistData.tsx
+++ b/code/core/src/shared/checklist-store/checklistData.tsx
@@ -33,17 +33,17 @@ import { TourGuide } from '../../manager/components/TourGuide/TourGuide';
 import { LocationMonitor } from '../../manager/hooks/useLocation';
 import type { initialState } from './checklistData.state';
 
-const CodeWrapper = styled.div(({ theme }) => ({
+const CodeWrapper = styled.div({
   alignSelf: 'stretch',
-  background: theme.background.content,
-  borderRadius: theme.appBorderRadius,
+  background: 'var(--sb-background-content)',
+  borderRadius: 'var(--sb-appBorderRadius)',
   margin: '5px 0',
   padding: 10,
-  fontSize: theme.typography.size.s1,
+  fontSize: `var(--sb-typography-size-s1)`,
   '.linenumber': {
     opacity: 0.5,
   },
-}));
+});
 
 const CodeSnippet = (props: ComponentProps<typeof SyntaxHighlighter>) => (
   <ThemeProvider theme={convert(themes.dark)}>
diff --git a/code/core/src/theming/ThemeVariables.tsx b/code/core/src/theming/ThemeVariables.tsx
new file mode 100644
index 000000000000..6404ceb6e3e6
--- /dev/null
+++ b/code/core/src/theming/ThemeVariables.tsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+import { Global, css, useTheme } from '.';
+
+// Recursively get all the variables from the theme (drilling down into nested objects), return an array of strings.
+const getVariables = (theme: object, prefix = '--sb'): string[] =>
+  Object.entries(theme).reduce<string[]>((acc, [key, value]) => {
+    if (value === undefined || typeof value === 'function') {
+      return acc;
+    }
+
+    const name = `${prefix}-${key}`;
+    if (typeof value === 'object') {
+      return acc.concat(getVariables(value, name));
+    }
+
+    let rule = `${name}: ${value}`;
+    if (typeof value === 'number' && !/(opacity|weight)/.test(name)) {
+      rule += 'px';
+    }
+    return acc.concat(`${rule};`);
+  }, []);
+
+export const ThemeVariables = React.memo(function ThemeVariables({
+  rootSelector = ':root',
+}: {
+  rootSelector?: string;
+}) {
+  const { animation, base, code, ...theme } = useTheme();
+  const variables = getVariables(theme).join('\n');
+
+  return (
+    <Global
+      styles={css`
+        ${rootSelector} {
+          ${variables}
+        }
+      `}
+    />
+  );
+});
diff --git a/code/core/src/theming/index.ts b/code/core/src/theming/index.ts
index 7650c87b0b39..1f4b840e733d 100644
--- a/code/core/src/theming/index.ts
+++ b/code/core/src/theming/index.ts
@@ -37,6 +37,7 @@ export { createGlobal, createReset } from './global';
 export * from './create';
 export * from './convert';
 export * from './ensure';
+export { ThemeVariables } from './ThemeVariables';
 
 export { lightenColor as lighten, darkenColor as darken, getPreferredColorScheme } from './utils';
 
diff --git a/code/core/src/viewport/components/Tool.tsx b/code/core/src/viewport/components/Tool.tsx
index e94133f242f6..89cf1e1c8a8d 100644
--- a/code/core/src/viewport/components/Tool.tsx
+++ b/code/core/src/viewport/components/Tool.tsx
@@ -9,15 +9,15 @@ import { styled } from 'storybook/theming';
 import { useViewport } from '../useViewport';
 import { iconsMap } from '../viewportIcons';
 
-const Dimensions = styled.div(({ theme }) => ({
+const Dimensions = styled.div({
   display: 'flex',
   gap: 2,
   marginLeft: 20,
-  fontFamily: theme.typography.fonts.mono,
-  fontSize: theme.typography.size.s1 - 1,
-  fontWeight: theme.typography.weight.regular,
-  color: theme.textMutedColor,
-}));
+  fontFamily: 'var(--sb-typography-fonts-mono)',
+  fontSize: `calc(var(--sb-typography-size-s1) - 1px)`,
+  fontWeight: 'var(--sb-typography-weight-regular)',
+  color: 'var(--sb-textMutedColor)',
+});
 
 export const ViewportTool = () => {
   const { name, value, isDefault, isLocked, options: viewportMap, reset, select } = useViewport();