theme-light.mjs (1451B)
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 light 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: "light", 19 20 // Branding 21 brandTitle: "Storybook for Firefox", 22 23 // Colors 24 colorPrimary: "#0062f9", // --color-accent-primary: oklch(55% 0.24 260) 25 appBg: "#ffffff", // --background-color-canvas 26 appBorderColor: "#bfbfc9", // --border-color 27 appBorderRadius: 4, 28 29 // Typography 30 fontBase: "system-ui", 31 fontCode: "monospace", 32 textColor: "#15141a", // --text-color 33 34 // Toolbar default and active colors 35 barBg: "#f0f0f4", // --table-row-background-color-alternate 36 barTextColor: "#15141a", // --button-text-color 37 barHoverColor: "##006d79", // --color-accent-primary-hover: oklch(48% 0.2 205) 38 barSelectedColor: "#005761", // --color-accent-primary-active: oklch(41% 0.17 205) 39 });