How to use the @storybook/components.themes.normal function in @storybook/components

To help you get started, we’ve selected a few @storybook/components examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github uber / baseweb / .storybook-move / config.js View on Github external
import {withKnobs} from '@storybook/addon-knobs';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';

import loadStories from '../.storybook-base/loadStories.js';
import {ThemeProvider} from '../src/styles';
import {LightThemeMove} from '../src/themes';

  name: 'baseui',
  url: '',

  theme: {
    highlightColor: LightThemeMove.colors.primary,
    successColor: LightThemeMove.colors.positive,
    warningColor: LightThemeMove.colors.warning,
    failColor: LightThemeMove.colors.negative,

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here


// Add providers for theme and styletron
github storybookjs / storybook-addon-console / .storybook / config.js View on Github external
import React from 'react';
import ThemeProvider from '@emotion/provider';
import { configure, addDecorator } from '@storybook/react';
import { themes } from '@storybook/components';
import { withOptions } from '@storybook/addon-options';
import { setConsoleOptions } from '../src';

import 'react-chromatic/storybook-addon';

const theme = {...themes.normal,
  // mainBackground: '#4c4c4c',
  // mainFill: '#ababab',
  // barFill: '#4c4c4c',
  // barSelectedColor: 'white',
  // highlightColor: 'red'
  // mainTextColor: 'white'
  brand: {
    background: '#F1618C',
    color: 'white'

    name: 'Addon Console',
    url: '',
github storybookjs / storybook / lib / ui / src / store.js View on Github external
      stories: [],
      storiesHash: {},
      selectedId: null,
      shortcutOptions: {
        full: false,
        nav: true,
        panel: 'right',
        enableShortcuts: true,
      uiOptions: {
        name: 'STORYBOOK',
        url: '',
        sortStoriesByKind: false,
        sidebarAnimations: true,
        theme: themes.normal,
      customQueryParams: {},
      notifications: [
          id: 'update',
          level: 2,
          link: '/settings/about',
          icon: '🎉',
          content: `There's a new version available: 4.0.0`,

      selectedPanelValue: null,

      get selectedPanel() {
        return ensurePanel(this.panels, this.selectedPanelValue, this.selectedPanelValue);