How to use @uifabric/fluent-theme - 10 common examples

root: {
    color: active ? '#000' : '#4f4f4f',
    height: '36px',
    width: '220px',
    fontSize: `${FontSizes.size14}`,
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    backgroundColor: 'transparent',
  },
  icon: {
    color: active ? '#000' : '#4f4f4f',
    padding: '0 13px',
    marginLeft: '0px',
    boxSizing: 'border-box',
    fontSize: `${FontSizes.size16}`,
  },
  textContainer: {
    textAlign: 'left',
    zIndex: '1',
    // display: isExpand ? 'inline-block' : 'none',
  },
});

export const commandBarButton = active => ({
  root: {
    color: active ? '#000' : '#4f4f4f',
    height: '36px',
    width: '220px',
    fontSize: `${FontSizes.size14}`,
    paddingLeft: '0px',
    paddingRight: '0px',
    marginLeft: '0px',
    backgroundColor: 'transparent',
  },
  icon: {
    color: active ? '#000' : '#4f4f4f',
    padding: '0 13px',
    marginLeft: '0px',
    boxSizing: 'border-box',
    fontSize: `${FontSizes.size16}`,
  },
  textContainer: {
    textAlign: 'left',
    zIndex: '1',
    // display: isExpand ? 'inline-block' : 'none',

import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { FontSizes } from '@uifabric/fluent-theme';

export const styles = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      // maxWidth: '416px !important',
      maxWidth: '80% !important',
      width: '960px !important',
    },
  },
  halfstack: {
    root: [
      {
        flexBasis: '50%',
      },
    ],
  },

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT License.

import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { FontSizes } from '@uifabric/fluent-theme';
import { IDialogContentStyles } from 'office-ui-fabric-react/lib/Dialog';
import { IModalStyles } from 'office-ui-fabric-react/lib/Modal';

export const styles: { dialog: Partial; modal: Partial } = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      maxWidth: '416px !important',
    },
  },
};

import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
import { FontSizes } from '@uifabric/fluent-theme';

export const styles = {
  dialog: {
    title: {
      fontWeight: FontWeights.bold,
      fontSize: FontSizes.size20,
      paddingTop: '14px',
      paddingBottom: '11px',
    },
    subText: {
      fontSize: FontSizes.size14,
    },
  },
  modal: {
    main: {
      // maxWidth: '416px !important',
      maxWidth: '80% !important',
      width: '960px !important',
    },
  },
  halfstack: {
    root: [

import * as javascript from 'highlight.js/lib/languages/javascript';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
import { NeutralColors } from '@uifabric/fluent-theme';

registerLanguage('javascript', javascript);

export interface IHighlightProps extends React.HTMLAttributes {
  componentRef?: () => void;
}

const rootClass = mergeStyles({
  selectors: {
    '.hljs': {
      display: 'block',
      color: NeutralColors.gray180,
      background: NeutralColors.gray20
    },
    '.hljs-comment, .hljs-quote': {
      color: NeutralColors.gray120,
      fontStyle: 'italic'
    },
    '.hljs-keyword, .hljs-selector-tag, .hljs-subst': {
      color: NeutralColors.gray180,
      fontWeight: 'normal'
    },
    // attribute name
    '.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr ': {
      color: '#008080'
    },
    // @param
    '.hljs-string, .hljs-doctag': {
      color: '#d14'

isScrollable && [
        {
          WebkitOverflowScrolling: 'touch',
          maxHeight: '80vh',
          overflowX: 'hidden',
          overflowY: 'auto',
          padding: '20px 4px',
          position: 'relative'
        },
        globalClassNames.isScrollable
      ],
      isRightAligned && [{ textAlign: 'right' }, globalClassNames.isRightAligned]
    ],
    code: [
      {
        backgroundColor: NeutralColors.gray20,
        overflow: 'hidden',
        selectors: {
          pre: [
            {
              margin: 0,
              overflow: 'auto',
              transition: `all ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
            },
            // Collapse code blocks by default
            isCodeVisible ? { maxHeight: 480, minHeight: 120 } : { maxHeight: 0 },
            isCodeVisible && {
              border: '1px solid ' + NeutralColors.gray90,
              borderTop: 0
            }
          ],
          code: {

registerLanguage('javascript', javascript);

export interface IHighlightProps extends React.HTMLAttributes {
  componentRef?: () => void;
}

const rootClass = mergeStyles({
  selectors: {
    '.hljs': {
      display: 'block',
      color: NeutralColors.gray180,
      background: NeutralColors.gray20
    },
    '.hljs-comment, .hljs-quote': {
      color: NeutralColors.gray120,
      fontStyle: 'italic'
    },
    '.hljs-keyword, .hljs-selector-tag, .hljs-subst': {
      color: NeutralColors.gray180,
      fontWeight: 'normal'
    },
    // attribute name
    '.hljs-number, .hljs-literal, .hljs-variable, .hljs-template-variable, .hljs-tag .hljs-attr ': {
      color: '#008080'
    },
    // @param
    '.hljs-string, .hljs-doctag': {
      color: '#d14'
    },
    '.hljs-title, .hljs-section, .hljs-selector-id': {
      color: '#900',

SyntaxHighlighter.registerLanguage('typescript', ts);
SyntaxHighlighter.registerLanguage('scss', scss);
SyntaxHighlighter.registerLanguage('markdown', md);
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('html', xml);

// Customize imported SyntaxHighlighter styles. Available properties:
// https://github.com/conorhastings/react-syntax-highlighter/blob/master/src/styles/hljs/github.js
style.hljs = {
  ...baseCodeStyle,
  padding: 8,
  overflowX: 'auto'
};
// Darken comment color for accessibility
style['hljs-comment'] = style['hljs-quote'] = {
  color: NeutralColors.gray120,
  fontStyle: 'italic'
};

export interface ICodeSnippetProps {
  className?: string;
  language?: string;
  styles?: IStyleFunctionOrObject;
  theme?: ITheme;
}

export type ICodeSnippetStyleProps = Pick;

export interface ICodeSnippetStyles {
  root: IStyle;
}

],
    code: [
      {
        backgroundColor: NeutralColors.gray20,
        overflow: 'hidden',
        selectors: {
          pre: [
            {
              margin: 0,
              overflow: 'auto',
              transition: `all ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
            },
            // Collapse code blocks by default
            isCodeVisible ? { maxHeight: 480, minHeight: 120 } : { maxHeight: 0 },
            isCodeVisible && {
              border: '1px solid ' + NeutralColors.gray90,
              borderTop: 0
            }
          ],
          code: {
            display: 'block',
            margin: 12,
            fontSize: '14px'
          }
        }
      },
      isCodeVisible && {
        display: 'block',
        marginBottom: 20
      },
      globalClassNames.code
    ],