How to use the @uifabric/fluent-theme.NeutralColors.gray180 function in @uifabric/fluent-theme

To help you get started, we’ve selected a few @uifabric/fluent-theme 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 OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / Highlight / Highlight.tsx View on Github external
// @ts-ignore
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': {
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / Highlight / Highlight.tsx View on Github external
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',
      fontWeight: 'bold'
    },
    '.hljs-type, .hljs-class .hljs-title': {
      color: '#458',