experimental: theming

code/core/package.json

@@ -90,8 +90,11 @@
     },
     "./dist/router": {
       "types": "./dist/router/index.d.ts",
-      "require": "./dist/router/index.cjs",
       "import": "./dist/router/index.js"
+    },
+    "./dist/theming": {
+      "types": "./dist/theming/index.d.ts",
+      "import": "./dist/theming/index.js"
     }
   },
   "main": "dist/index.cjs",
@@ -117,6 +120,11 @@
     "@babel/parser": "^7.24.4",
     "@babel/traverse": "^7.24.1",
     "@babel/types": "^7.24.0",
+    "@emotion/cache": "^11.11.0",
+    "@emotion/is-prop-valid": "^1.2.2",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.0",
+    "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1",
     "@storybook/csf": "^0.1.6",
     "@storybook/global": "^5.0.0",
     "@types/express": "^4.7.0",
@@ -137,6 +145,7 @@
     "ansi-to-html": "^0.7.2",
     "chalk": "^5.3.0",
     "cross-spawn": "^7.0.3",
+    "deep-object-diff": "^1.1.0",
     "dequal": "^2.0.2",
     "detect-package-manager": "^3.0.2",
     "execa": "^5.0.0",
@@ -157,6 +166,7 @@
     "npmlog": "^7.0.0",
     "picomatch": "^2.3.0",
     "pkg-dir": "^8.0.0",
+    "polished": "^4.2.2",
     "prettier-fallback": "npm:prettier@^3",
     "prettier-v2": "npm:prettier@^2",
     "prettier-v3": "npm:prettier@^3",

code/core/report/meta.json

@@ -852,7 +852,7 @@
       "format": "esm"
     },
     "src/types/modules/addons.ts": {
-      "bytes": 16316,
+      "bytes": 16302,
       "imports": [],
       "format": "esm"
     },
@@ -872,7 +872,7 @@
       "format": "esm"
     },
     "src/types/modules/api.ts": {
-      "bytes": 5077,
+      "bytes": 5063,
       "imports": [],
       "format": "esm"
     },

code/core/scripts/dts.ts

@@ -22,8 +22,8 @@ const dtsResults = dts.generateDtsBundle(
     noCheck: true,
     libraries: {
       importedLibraries: [...external, ...externals],
-      allowedTypesLibraries: [...externals],
-      inlinedLibraries: internal,
+      allowedTypesLibraries: [],
+      inlinedLibraries: internal.filter((i) => ![...external, ...externals].includes(i)),
     },
     output: { noBanner: true, exportReferencedTypes: false },
   })),

code/core/scripts/entries.ts

@@ -23,6 +23,11 @@ export const getEntries = (cwd: string) => {
     define('src/telemetry/index.ts', ['node'], true),
     define('src/preview-api/index.ts', ['browser', 'node'], true),
     define('src/instrumenter/index.ts', ['browser', 'node'], true),
-    define('src/router/index.ts', ['browser', 'node'], true, ['react']),
+    define('src/router/index.ts', ['browser'], true, ['react', 'react-is']),
+    define('src/theming/index.ts', ['browser'], true, [
+      'react',
+      'react-is',
+      '@emotion/use-insertion-effect-with-fallbacks',
+    ]),
   ];
 };

code/core/scripts/prep.ts

@@ -78,6 +78,8 @@ const [filesTime, packageJsonTime, distTime, typesTime] = await Promise.all([
   types,
 ]);
 
+await modifyThemeTypes();
+
 console.log('Files generated in', chalk.yellow(prettyTime(filesTime)));
 console.log('Package.json generated in', chalk.yellow(prettyTime(packageJsonTime)));
 console.log(isWatch ? 'Watcher started in' : 'Bundled in', chalk.yellow(prettyTime(distTime)));
@@ -270,3 +272,21 @@ async function generatePackageJsonFile() {
 
   await Bun.write(location, `${sortPackageJson(JSON.stringify(pkgJson, null, 2))}\n`, {});
 }
+async function modifyThemeTypes() {
+  const target = join(import.meta.dirname, '..', 'dist', 'theming', 'index.d.ts');
+  const contents = await Bun.file(target).text();
+
+  const footer = contents.includes('// auto generated file')
+    ? `export { StorybookTheme as Theme } from '../src/index';`
+    : dedent`
+        interface Theme extends StorybookTheme {}
+        export type { Theme };
+      `;
+
+  const newContents = dedent`
+    ${contents}
+    ${footer}
+  `;
+
+  await Bun.write(target, newContents);
+}

code/core/src/common/versions.ts

@@ -32,6 +32,7 @@ export default {
   '@storybook/preview-api': '8.1.0-alpha.7',
   '@storybook/router': '8.1.0-alpha.7',
   '@storybook/telemetry': '8.1.0-alpha.7',
+  '@storybook/theming': '8.1.0-alpha.7',
   '@storybook/types': '8.1.0-alpha.7',
   '@storybook/angular': '8.1.0-alpha.7',
   '@storybook/ember': '8.1.0-alpha.7',
@@ -63,7 +64,6 @@ export default {
   '@storybook/react-dom-shim': '8.1.0-alpha.7',
   '@storybook/source-loader': '8.1.0-alpha.7',
   '@storybook/test': '8.1.0-alpha.7',
-  '@storybook/core/dist/theming': '8.1.0-alpha.7',
   '@storybook/preset-create-react-app': '8.1.0-alpha.7',
   '@storybook/preset-html-webpack': '8.1.0-alpha.7',
   '@storybook/preset-preact-webpack': '8.1.0-alpha.7',

code/lib/theming/src/index.ts → code/core/src/theming/index.ts

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
-/// <reference path="./typings.d.ts" />
+/// <reference path="../typings.d.ts" />
 
 import type { FunctionInterpolation, Interpolation } from '@emotion/react';
 import type { StorybookTheme } from './types';
@@ -30,7 +29,7 @@ export type {
 
 export * from './base';
 export * from './types';
-export * from './emotionAugmentation.d';
+// export * from './emotionAugmentation.d.ts';
 
 export { default as createCache } from '@emotion/cache';
 export { default as isPropValid } from '@emotion/is-prop-valid';

code/core/src/types/modules/addons.ts

@@ -2,7 +2,7 @@
 
 import type { FC, PropsWithChildren, ReactElement, ReactNode } from 'react';
 import type { RenderData as RouterData } from '../../router/types';
-import type { ThemeVars } from '../../../../lib/theming/src/types';
+import type { ThemeVars } from '../../theming/types';
 import type { API_SidebarOptions } from './api';
 import type {
   Args,

code/core/src/types/modules/api.ts

@@ -3,7 +3,7 @@
 import type { ReactElement } from 'react';
 import type { RenderData } from '../../router/types';
 import type { Channel } from '@storybook/core/dist/channels';
-import type { ThemeVars } from '../../../../lib/theming/src/types';
+import type { ThemeVars } from '../../theming/types';
 import type { DocsOptions } from './core-common';
 import type { API_FilterFunction, API_HashEntry, API_IndexHash } from './api-stories';
 import type { SetStoriesStory, SetStoriesStoryData } from './channelApi';

code/core/src/typings.d.ts

@@ -27,6 +27,7 @@ declare module 'better-opn';
 declare module 'lazy-universal-dotenv';
 declare module 'open';
 declare module 'pnp-webpack-plugin';
+declare module 'react-inspector';
 // declare module 'detect-package-manager' {
 //   // copied from https://www.npmjs.com/package/detect-package-manager?activeTab=code
 //   // because

code/deprecated/router/shim.d.ts

@@ -1 +1 @@
-export * from '@storybook/core/dist/router';
+export * from '@storybook/core/dist/theming';

code/deprecated/theming/create.js

@@ -0,0 +1 @@
+module.exports = require('@storybook/core/dist/theming/create');

code/deprecated/theming/create.mjs

@@ -0,0 +1 @@
+export * from '@storybook/core/dist/theming/create';

code/deprecated/theming/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@storybook/theming",
+  "version": "8.1.0-alpha.7",
+  "description": "Core Storybook Components",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/theming",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "code/lib/theming"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./shim.d.ts",
+      "node": "./shim.js",
+      "require": "./shim.js",
+      "import": "./shim.mjs"
+    },
+    "./create": {
+      "types": "./create.d.ts",
+      "require": "./create.js",
+      "import": "./create.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./shim.js",
+  "module": "./shim.mjs",
+  "types": "./shim.d.ts",
+  "files": [
+    "README.md",
+    "*.js",
+    "*.mjs",
+    "*.cjs",
+    "*.d.ts"
+  ],
+  "peerDependencies": {
+    "@storybook/core": "*"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

code/deprecated/theming/shim.d.ts

@@ -0,0 +1 @@
+export * from '@storybook/core/dist/router';

code/deprecated/theming/shim.js

@@ -0,0 +1 @@
+module.exports = require('@storybook/core/dist/theming');

code/deprecated/theming/shim.mjs

@@ -0,0 +1 @@
+export * from '@storybook/core/dist/theming';

code/ui/components/src/components/tabs/tabs.tsx

@@ -1,6 +1,6 @@
 import type { FC, PropsWithChildren, ReactElement, ReactNode, SyntheticEvent } from 'react';
 import React, { useMemo, Component, memo } from 'react';
-import { styled } from '@storybook/core/dist/theming';
+import { color, styled, withTheme } from '@storybook/core/dist/theming';
 import { sanitize } from '@storybook/csf';
 
 import type { Addon_RenderOptions } from '@storybook/core/dist/types';
@@ -18,6 +18,15 @@ export interface WrapperProps {
   absolute?: boolean;
 }
 
+styled.div(
+  {
+    color: 'red',
+  },
+  ({ theme }) => ({
+    color: 'blue',
+  })
+);
+
 const Wrapper = styled.div<WrapperProps>(
   ({ theme, bordered }) =>
     bordered