Storybook: Storybook 6.0 doesn't use brandImage during build

[lifeiscontent]

Describe the bug
When customizing storybook theme like it describes in the docs here: https://storybook.js.org/docs/configurations/theming/

development renders the theme fine, but if you build storybook the theme doesn't get used.

To Reproduce
Steps to reproduce the behavior:

1. Create app with custom theme
2. Build storybook
3. See that custom brand image doesn't get used

Expected behavior
Custom theme shows up in build assets

Screenshots

Code snippets
If applicable, add code samples to help explain your problem.

System:
Please paste the results of npx -p @storybook/cli@next sb info here.

Additional context
Add any other context about the problem here.

[shilman]

do other aspects of the theme (e.g background color) get applied? or is it only brandImage that's broken?

[pumano]

I have another issue: if I add brandImage, i dont see brandTitle and vice versa. I don't know its bug or feature

[lifeiscontent]

@shilman I think it's the entire aspect of theme.

[lifeiscontent]

just for reference, here's my preview.js

import React from 'react';
import { create } from '@storybook/theming/create';
import { UIColorSchemeContext } from '../../packages/react-ui/src/UIColorScheme';
import { withBodyStyle } from '../src/decorators';

const theme = create({
  base: 'light',
  colorPrimary: '#2266ee',
  colorSecondary: '#2266ee',

  // // UI
  appBg: '#f7f7f7',
  appContentBg: '#ffffff',
  appBorderColor: '#cccccc',
  appBorderRadius: 3,

  // // Typography
  fontBase: '"Inter", sans-serif',
  fontCode: 'monospace',

  // // Text colors
  textColor: '#262626',
  textInverseColor: '#D9D9D9',

  // // Toolbar default and active colors
  barTextColor: '#262626',
  barSelectedColor: '#262626',
  barBg: '#f7f7f7',

  // // Form colors
  inputBg: '#ffffff',
  inputBorder: '#cccccc',
  inputTextColor: '#262626',
  inputBorderRadius: 3,

  brandTitle: 'LifeTime UI',
  brandUrl: '.',
  brandImage: 'logo.svg',
});

export const globalArgTypes = {
  colorScheme: {
    name: 'Color Scheme',
    description: 'Global color scheme for components',
    defaultValue: 'light',
    toolbar: { icon: 'lightning', items: ['light','dark'] },
  }
}

export const parameters = {
  a11y: {
    element: '#root',
    config: {},
    options: {},
    manual: true,
  },
  docs: {
    theme,
  },
  options: {
    panelPosition: 'bottom',
    showRoots: true,
  },
  dependencies: {
    //display only dependencies/dependents that have a story in storybook
    //by default this is false
    withStoriesOnly: true,

    //completely hide a dependency/dependents block if it has no elements
    //by default this is false
    hideEmpty: true,
  },
  viewport: {
    viewports: {
      mobile: {
        name: 'Mobile',
        styles: {
          width: '360px',
          height: '640px',
        },
        type: 'mobile',
      },
    },
    defaultViewport: 'mobile',
  },
};

const colorSchemeDecorator = (storyFn, { globalArgs: { colorScheme } }) => (
  <UIColorSchemeContext.Provider value={colorScheme}>
    {storyFn()}
  </UIColorSchemeContext.Provider>
);

export const decorators = [colorSchemeDecorator, withBodyStyle({backgroundColor: ''})];

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!