From bad1f1b482b170b897be3c58993838f25ab19564 Mon Sep 17 00:00:00 2001
From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Date: Thu, 16 Nov 2023 08:24:22 -0600
Subject: [PATCH] [CL-141] Custom storybook theme (#5569)

Add Bitwarden logo and other branding styles to the Storybook site.
---
 .storybook/manager.js | 63 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 .storybook/manager.js

diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 0000000000..89a69bf942
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,63 @@
+import { addons } from "@storybook/addons";
+import { create } from "@storybook/theming/create";
+
+const lightTheme = create({
+  base: "light",
+  //logo and Title
+  brandTitle: "Bitwarden Component Library",
+  brandUrl: "/",
+  brandImage:
+    "https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-blue.png?raw=true",
+  brandTarget: "_self",
+
+  //Colors
+  colorPrimary: "#6D757E",
+  colorSecondary: "#175DDC",
+
+  // UI
+  appBg: "#f9fBff",
+  appContentBg: "#ffffff",
+  appBorderColor: "#CED4DC",
+
+  // Text colors
+  textColor: "#212529",
+  textInverseColor: "#ffffff",
+
+  // Toolbar default and active colors
+  barTextColor: "#6D757E",
+  barSelectedColor: "#175DDC",
+  barBg: "#ffffff",
+
+  // Form colors
+  inputBg: "#ffffff",
+  inputBorder: "#6D757E",
+  inputTextColor: "#6D757E",
+});
+
+const darkTheme = create({
+  base: "dark",
+
+  //logo and Title
+  brandTitle: "Bitwarden Component Library",
+  brandUrl: "/",
+  brandImage:
+    "https://github.com/bitwarden/brand/blob/51942f8d6e55e96a078a524e0f739efbf1997bcf/logos/logo-horizontal-white.png?raw=true",
+  brandTarget: "_self",
+
+  //Colors
+  colorSecondary: "#6A99F0",
+  barSelectedColor: "#6A99F0",
+});
+
+export const getPreferredColorScheme = () => {
+  if (!globalThis || !globalThis.matchMedia) return "light";
+
+  const isDarkThemePreferred = globalThis.matchMedia("(prefers-color-scheme: dark)").matches;
+  if (isDarkThemePreferred) return "dark";
+
+  return "light";
+};
+
+addons.setConfig({
+  theme: getPreferredColorScheme() === "dark" ? darkTheme : lightTheme,
+});