[UI v2] feat: Adds prefect theming to storybook (#16482)

ui-v2/.storybook/manager.ts

@@ -0,0 +1,14 @@
+import { addons } from "@storybook/manager-api";
+
+import favicon from "../public/ico/favicon-16x16-dark.png";
+import { prefectLightTheme } from "./prefect-theme";
+
+addons.setConfig({
+	theme: prefectLightTheme,
+});
+
+// custom favicon
+const link = document.createElement("link");
+link.setAttribute("rel", "shortcut icon");
+link.setAttribute("href", favicon);
+document.head.appendChild(link);

ui-v2/.storybook/prefect-theme.ts

@@ -0,0 +1,21 @@
+import { create } from "@storybook/theming";
+import LogoDark from "./logos/logo-dark.svg";
+import LogoLight from "./logos/logo-light.svg";
+
+const BASE_THEME = {
+	brandTitle: "Prefect",
+	brandUrl: "https://prefect.io",
+	brandTarget: "_self",
+};
+
+export const prefectLightTheme = create({
+	...BASE_THEME,
+	base: "light",
+	brandImage: LogoLight,
+});
+
+export const prefectDarkTheme = create({
+	...BASE_THEME,
+	base: "dark",
+	brandImage: LogoDark,
+});

ui-v2/package.json

@@ -62,9 +62,11 @@
 		"@storybook/addon-essentials": "^8.4.2",
 		"@storybook/addon-interactions": "^8.4.2",
 		"@storybook/blocks": "^8.4.2",
+		"@storybook/manager-api": "^8.4.7",
 		"@storybook/react": "^8.4.2",
 		"@storybook/react-vite": "^8.4.2",
 		"@storybook/test": "^8.4.2",
+		"@storybook/theming": "^8.4.7",
 		"@tanstack/eslint-plugin-query": "^5.61.6",
 		"@tanstack/eslint-plugin-router": "^1.77.7",
 		"@tanstack/router-devtools": "^1.58.15",