Create custom storybook theme

mel-miller · Oct 5, 2022 · 68178ad · 68178ad
1 parent ec99368
commit 68178ad
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 1 deletion.
diff --git a/.storybook/manager.js b/.storybook/manager.js
@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons'
+import themeSbDrupal from './themeSbDrupal'
+
+addons.setConfig({
+	theme: themeSbDrupal,
+})
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -2,4 +2,14 @@
 	.sbdocs-wrapper {
 		padding: 2rem 2.5rem;
 	}
+	.sbdocs {
+		color: black;
+	}
+	.os-content {
+		background-color: #fafcfe;
+		color: black;
+	}
+	.css-1p8ieni code {
+		background-color: #fafcfe;
+	}
 </style>
diff --git a/.storybook/themeSbDrupal.js b/.storybook/themeSbDrupal.js
@@ -0,0 +1,15 @@
+import { create } from '@storybook/theming'
+import { version } from '../package.json'
+
+const toolkitTitle = `<img src="sb-drupal-logo.svg" width="150px" alt="Storybook Drupal"/> <br/> v${version}`
+
+export default create({
+	base: 'light',
+	brandTitle: toolkitTitle,
+	colorPrimary: '#FF4785',
+	colorSecondary: '#0678be',
+	textColor: 'black',
+	textInverseColor: 'white',
+	barTextColor: '#3d4546',
+	barSelectedColor: '#0678be',
+})
diff --git a/public/sb-drupal-logo.svg b/public/sb-drupal-logo.svg
diff --git a/src/docs/introduction.stories.mdx b/src/docs/introduction.stories.mdx
@@ -1,6 +1,6 @@
 <Meta title="Documentation/Introduction" />
 
-# SB Drupal
+# Storybook Drupal
 
 This toolkit is a sample Storybook implementation for Drupal.