storybookjs · ghengeveld · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026 · Jan 12, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -29,26 +29,26 @@ 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: '""',
         position: 'absolute',
         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
@@ -12,17 +12,17 @@ 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',
   left: 0,
   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
@@ -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
@@ -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
@@ -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
@@ -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',