How to use the @storybook/theming.themes.light function in @storybook/theming

To help you get started, we’ve selected a few @storybook/theming 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 storybookjs / storybook / addons / knobs / src / components / __tests__ / Panel.js View on Github external
it('should have no tabs when there are no groupIds', () => {
      // Unfortunately, a shallow render will not invoke the render() function of the groups --
      // it thinks they are unnamed function components (what they effectively are anyway).
      //
      // We have to do a full mount.

      const root = mount(
        
          
        
      );

      testChannel.on.mock.calls[0][1]({
        knobs: {
          foo: {
            name: 'foo',
            defaultValue: 'test',
            used: true,
            // no groupId
          },
          bar: {
            name: 'bar',
            defaultValue: 'test2',
            used: true,
github kalmhq / kalm / frontend / .storybook / preview.js View on Github external
const theme = select("Theme", muiThemeNames, muiThemeNames[0], "Themes");
  return (
    
      
      {storyFn()}
    
  );
};

addDecorator(withGlobalStyle);
// addDecorator(withKnobs);
//   loadFontsForStorybook();

addParameters({
  options: {
    theme: themes.light,
    showRoots: false,
  },
  docs: {
    page: DocsPage,
  },
  dependencies: {
    withStoriesOnly: false,
    hideEmpty: true,
  },
  viewport: {
    viewports: { ...INITIAL_VIEWPORTS, ...newViewports }, // newViewports would be an ViewportMap. (see below for examples)
    defaultViewport: "macbookpro",
  },
});

// export const decorators = [withGlobalStyle];
github storybookjs / storybook / examples / official-storybook / preview.js View on Github external
addParameters({
  a11y: {
    config: {},
    options: {
      checks: { 'color-contrast': { options: { noScroll: true } } },
      restoreScroll: true,
    },
  },
  options: {
    showRoots: true,
    theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
  backgrounds: [
    { name: 'storybook app', value: themes.light.appBg, default: true },
    { name: 'light', value: '#eeeeee' },
    { name: 'dark', value: '#222222' },
  ],
  docs: {
    page: () =>  `Subtitle: ${selectedKind}`} />,
  },
});
github kata-ai / wicara / .storybook / config.js View on Github external
// https://github.com/storybooks/storybook/tree/master/addons/a11y
addDecorator(withA11y);

// JSX addon
// https://github.com/storybooks/addon-jsx
addDecorator(jsxDecorator);
addParameters({
  jsx: {
    showDefaultProps: false
  }
});

// use custom theme
addParameters({
  options: {
    theme: themes.light
  }
});

const stories = require.context('../', true, /\.story\.tsx?$/);
function loadStories() {
  stories.keys().forEach(stories);
}

configure(loadStories, module);
github storybookjs / storybook / examples / official-storybook / preview.js View on Github external
{storyFn()}
  
));

addParameters({
  a11y: {
    config: {},
    options: {
      checks: { 'color-contrast': { options: { noScroll: true } } },
      restoreScroll: true,
    },
  },
  options: {
    showRoots: true,
    theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
    storySort: (a, b) =>
      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),
  },
  backgrounds: [
    { name: 'storybook app', value: themes.light.appBg, default: true },
    { name: 'light', value: '#eeeeee' },
    { name: 'dark', value: '#222222' },
  ],
  docs: {
    page: () =>  `Subtitle: ${selectedKind}`} />,
  },
});
github pixeloven / pixeloven / packages / pixeloven-storybook / config / src / config.ts View on Github external
},
            restoreScroll: true,
        },
    },
    backgrounds: [
        { name: "default", value: "transparent", default: true },
        { name: "#000", value: "#000000", default: false },
        { name: "#333", value: "#333333", default: false },
        { name: "twitter", value: "#00aced", default: false },
        { name: "facebook", value: "#3b5998", default: false },
    ],
    options: {
        isFullScreen: false,
        panelPosition: "right",
        showSearchBox: false,
        theme: themes.light,
    },
});

/**
 * Stories loader
 */
/* tslint:disable no-string-literal */
const req = require["context"]("@src", true, /.stories.[jt]sx?$/);
function loadStories() {
    req.keys().forEach(req);
}
/* tslint:enable no-string-literal */

// Initialize react-storybook
configure(loadStories, module);
github magma / magma / symphony / app / fbcnms-packages / fbcnms-ui / .storybook / preview.js View on Github external
);
});

addParameters({
  options: {
    name: 'FBC Design System',
    isFullscreen: false,
    showNav: true,
    showPanel: false,
    isToolshown: true,
    theme: {
      ...themes.light,
      appContentBg: Theme.palette.D10,
    },
    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
    hierarchySeparator: /\//,
  },
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
});