How to use the @uifabric/fluent-theme.NeutralColors.gray90 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 / ExampleCard / ExampleCard.styles.ts View on Github external
],
    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
    ],
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / ExampleCard / ExampleCard.styles.ts View on Github external
const sharedToggleButtonStyles = {
    marginRight: 0,
    background: 'none',
    backgroundColor: 'transparent',
    border: `1px solid ${theme.palette.neutralTertiary}`,
    borderBottom: 0,
    borderTopLeftRadius: '4px',
    borderTopRightRadius: '4px',
    padding: '4px 12px',
    minWidth: 100,
    transition: `border ${AnimationVariables.durationValue3} ${AnimationVariables.easeFunction1}`
  };

  const codeButtonActiveStyles: IRawStyle = {
    backgroundColor: NeutralColors.gray20,
    borderColor: NeutralColors.gray90,
    selectors: {
      '.ms-Button-icon': {
        color: theme.palette.themePrimary
      },
      '.ms-Button-label': {
        color: NeutralColors.gray160
      }
    }
  };

  const dropdownStyles: Partial = {
    caretDownWrapper: {
      top: '6px'
    },
    title: [
      sharedToggleButtonStyles,
github OfficeDev / office-ui-fabric-react / packages / example-app-base / src / components / ExampleCard / ExampleCard.styles.ts View on Github external
root: [
      {
        margin: '20px 0'
      },
      globalClassNames.root,
      isCodeVisible && globalClassNames.isCodeVisible
    ],
    header: [
      {
        borderBottom: `1px solid ${theme.palette.neutralTertiary}`,
        display: 'flex',
        overflow: 'hidden',
        position: 'relative'
      },
      isCodeVisible && {
        borderColor: NeutralColors.gray90
      },
      globalClassNames.header
    ],
    title: [
      theme.fonts.medium,
      {
        display: 'inline-flex',
        flexGrow: 1,
        flexShrink: 1,
        marginBottom: 10
      },
      globalClassNames.title
    ],
    toggleButtons: [
      theme.fonts.medium,
      {