Customize Storybook

package.json

@@ -36,8 +36,9 @@
 		"@storybook/addon-knobs": "^5.3.17",
 		"@storybook/addon-links": "^5.3.17",
 		"@storybook/addon-storysource": "^5.3.17",
-		"@storybook/addons": "^5.3.17",
+		"@storybook/addons": "^5.3.19",
 		"@storybook/react": "^5.3.17",
+		"@storybook/theming": "^5.3.19",
 		"@svgr/rollup": "^5.4.0",
 		"@svgr/webpack": "^5.4.0",
 		"@types/reach__router": "^1.3.5",

packages/components/.storybook/Container.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+export default function Container({ children }) {
+	return <div style={{ backgroundColor: "black", padding: 15 }}>{children}</div>;
+}

packages/components/.storybook/manager-head.html

@@ -0,0 +1,29 @@
+<link
+	rel="icon"
+	type="image/png"
+	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+	sizes="16x16"
+/>
+<link
+	rel="icon"
+	type="image/png"
+	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+	sizes="32x32"
+/>
+<link
+	rel="icon"
+	type="image/png"
+	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+	sizes="64x64"
+/>
+<link
+	rel="icon"
+	type="image/png"
+	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+	sizes="1024x1024"
+/>
+<link
+	rel="apple-touch-icon"
+	href="https://raw.githubusercontent.com/Joystream/design/master/logo/favicon/Favicon-v2.png"
+	sizes="1024x1024"
+/>

packages/components/.storybook/preview-head.html

@@ -0,0 +1,14 @@
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css" />
+<link rel="stylesheet" href="https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css" />
+<style>
+	@font-face {
+		font-family: "PxGroteskRegular";
+		src: url("https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskRegular-Regular.css");
+	}
+	@font-face {
+		font-family: "PxGroteskRegular";
+		font-weight: bold;
+		src: url("https://ben.click/Optimo_11264_K0tfnA/Optimo-PxGrotesk/PxGroteskBold-Regular.css");
+	}
+</style>

packages/components/.storybook/preview.js

@@ -1,6 +1,15 @@
-import { addDecorator } from "@storybook/react";
+import { addDecorator, addParameters } from "@storybook/react";
 import { withKnobs } from "@storybook/addon-knobs";
 import { jsxDecorator } from "storybook-addon-jsx";
+import theme from "./theme";
+import Container from "./Container";
 
 addDecorator(withKnobs);
 addDecorator(jsxDecorator);
+addDecorator((storyFn) => <Container>{storyFn()}</Container>);
+
+addParameters({
+	options: {
+		theme: theme,
+	},
+});

packages/components/.storybook/theme.js

@@ -0,0 +1,44 @@
+import { create } from "@storybook/theming/create";
+/* Can't import the theme directly here because it is written in TS.
+Any workaround?
+import { colors } from "../src/theme";
+*/
+
+export default create({
+	base: "dark",
+
+	colorPrimary: "#4038FF",
+	colorSecondary: "deepskyblue",
+
+	// UI
+	appBg: "black",
+	appContentBg: "#272D33",
+	inputBg: "black",
+	appBorderColor: "#424E57",
+	appBorderRadius: 4,
+
+	// Typography
+	fontBase: '"Open Sans", sans-serif',
+	fontCode: "monospace",
+
+	// Text colors
+	textColor: "#DAE2EB",
+	textInverseColor: "rgba(255,255,255,0.9)",
+
+	// Toolbar default and active colors
+
+	barBg: "#272D33",
+	barTextColor: "#7B8A95",
+	barSelectedColor: "white",
+
+	// Form colors
+	inputBg: "white",
+	inputBorder: "#272D33",
+	inputTextColor: "white",
+	inputBorderRadius: 4,
+
+	brandTitle: "@joystream/components",
+	brandUrl: "https://joystream.org",
+	brandImage:
+		"https://raw.githubusercontent.com/Joystream/design/master/logo/logo/PNG/Logo-horisontal-basic-white-1x.png",
+});

yarn.lock

@@ -3528,7 +3528,7 @@
     regenerator-runtime "^0.13.3"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@5.3.19", "@storybook/addons@^5.3.17":
+"@storybook/addons@5.3.19", "@storybook/addons@^5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.19.tgz#3a7010697afd6df9a41b8c8a7351d9a06ff490a4"
   integrity sha512-Ky/k22p6i6FVNvs1VhuFyGvYJdcp+FgXqFgnPyY/OXJW/vPDapdElpTpHJZLFI9I2FQBDcygBPU5RXkumQ+KUQ==
@@ -3812,7 +3812,7 @@
     prop-types "^15.7.2"
     regenerator-runtime "^0.13.3"
 
-"@storybook/theming@5.3.19":
+"@storybook/theming@5.3.19", "@storybook/theming@^5.3.19":
   version "5.3.19"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.19.tgz#177d9819bd64f7a1a6ea2f1920ffa5baf9a5f467"
   integrity sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==