Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import { create } from "@storybook/theming/create";
// CSS variables are not accepted values in the object passed into the
// create() method. The values used here are hard-coded and based on
// values from `toolkit/themes/shared/design-system/tokens-brand.css`,
// for the light theme.
//
// Storybook config files do not recognize OKLCH colors, so the closest
// corresponding HEX value has been substituted.
//
// The corresponding CSS variable name has been commented, if it exists.
export default create({
// Base theme, mandatory
base: "light",
// Branding
brandTitle: "Storybook for Firefox",
// Colors
colorPrimary: "#0062f9", // --color-accent-primary: oklch(55% 0.24 260)
appBg: "#ffffff", // --background-color-canvas
appBorderColor: "#bfbfc9", // --border-color
appBorderRadius: 4,
// Typography
fontBase: "system-ui",
fontCode: "monospace",
textColor: "#15141a", // --text-color
// Toolbar default and active colors
barBg: "#f0f0f4", // --table-row-background-color-alternate
barTextColor: "#15141a", // --button-text-color
barHoverColor: "##006d79", // --color-accent-primary-hover: oklch(48% 0.2 205)
barSelectedColor: "#005761", // --color-accent-primary-active: oklch(41% 0.17 205)
});