theme-dark.mjs (1450B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */ 4 5 import { create } from "@storybook/theming/create"; 6 7 // CSS variables are not accepted values in the object passed into the 8 // create() method. The values used here are hard-coded and based on 9 // values from `toolkit/themes/shared/design-system/tokens-brand.css`, 10 // for the dark theme. 11 // 12 // Storybook config files do not recognize OKLCH colors, so the closest 13 // corresponding HEX value has been substituted. 14 // 15 // The corresponding CSS variable name has been commented, if it exists. 16 export default create({ 17 // Base theme, mandatory 18 base: "dark", 19 20 // Branding 21 brandTitle: "Storybook for Firefox", 22 23 // Colors 24 colorPrimary: "#00cadb", // --color-accent-primary: oklch(76% 0.14 205) 25 appBg: "#1c1b22", // --background-color-canvas 26 appBorderColor: "#5b5b66", // --border-color 27 appBorderRadius: 4, 28 29 // Typography 30 fontBase: "system-ui", 31 fontCode: "monospace", 32 textColor: "#fbfbfe", // ---text-color 33 34 // Toolbar default and active colors 35 barBg: "#23222b", // --table-row-background-color-alternate 36 barTextColor: "#fbfbfe", // --button-text-color 37 barHoverColor: "#61dce9", // --color-accent-primary-hover: oklch(83% 0.11 205) 38 barSelectedColor: "#a6ecf4", // --color-accent-primary-active: oklch(90% 0.07 205) 39 });