Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-21 16:18:28 +01:00
Code Issues Projects Releases Wiki Activity

[CL-141] Custom storybook theme (#5569)

Browse Source 
Add Bitwarden logo and other branding styles to the Storybook site.
This commit is contained in:
Danielle Flinn 2023-11-16 08:24:22 -06:00 committed by GitHub
parent 29be9bff05
commit bad1f1b482
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 63 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
.storybook/manager.js Normal file
View File

@ -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,
});