How to use the @storybook/theming.ensure 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 / lib / components / src / syntaxhighlighter / syntaxhighlighter.stories.tsx View on Github external
.add('dark unsupported', () => {
    const theme = ensure(themes.dark);
    return (
      
        
          {`
            // A Hello World! program in C#.
            using System;
            namespace HelloWorld
            {
              class Hello 
              {
                static void Main() 
                {
                  Console.WriteLine("Hello World!");

                  // Keep the console window open in debug mode.
                  Console.WriteLine("Press any key to exit.");
github storybookjs / storybook / addons / docs / src / blocks / DocsContainer.tsx View on Github external
export const DocsContainer: React.FunctionComponent = ({
  context,
  content: MDXContent,
}) => {
  const options = (context && context.parameters && context.parameters.options) || {};

  const theme = ensureTheme(options.theme);
  const { getPropDefs = null, components: userComponents = null } = options.docs || {};
  const components = { ...defaultComponents, ...userComponents };
  return (
    
      
        
        
          
            
              
            
          
        
      
    
  );
github storybookjs / storybook / addons / docs / src / blocks / DocsContainer.tsx View on Github external
export const DocsContainer: React.FunctionComponent = ({
  context,
  content: MDXContent,
}) => {
  const parameters = (context && context.parameters) || {};
  const options = parameters.options || {};
  const theme = ensureTheme(options.theme);
  const { components: userComponents = null } = options.docs || {};
  const components = { ...defaultComponents, ...userComponents };
  return (
    
      
        
        
          
            
              
            
          
        
      
    
  );
github storybookjs / storybook / lib / ui / src / index.js View on Github external
{({ state, api }) => {
                const panelCount = Object.keys(api.getPanels()).length;
                const story = state.storiesHash[state.storyId];
                return (
                  
                    
                  
                );
              }}
github storybookjs / frontpage / src / components / lib / global.tsx View on Github external
import React from 'react';
import { ThemeProvider } from 'emotion-theming';
import { ensure, themes } from '@storybook/theming';

import { global } from '@storybook/design-system';

const theme = ensure(themes.light);
const { GlobalStyle } = global;

export const Global = ({ children }) => (
  
    
    {children}
  
);
github storybookjs / storybook / examples / cra-mdx / .storybook / Info.js View on Github external
export const Info = ({ context }) => {
  const {
    parameters: { component, options },
  } = context;

  const themeVars = options && options.theme;
  const propDefinitions = component && component.propDefinitions;
  const theme = ensureTheme(themeVars);

  return (
    
      
      {propDefinitions ?  : <div>No info</div>}
    
  );
};