@zendeskgarden/react-typography/dist/esm/styled/StyledCode.js

Components relating to typography in the Garden Design System

/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import styled, { css } from 'styled-components';
import { componentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
import { StyledFont } from './StyledFont.js';

const COMPONENT_ID = 'typography.code';
const colorStyles = _ref => {
  let {
    $hue,
    theme
  } = _ref;
  const bgColorArgs = {
    theme,
    light: {
      offset: 100
    },
    dark: {
      offset: -100
    }
  };
  const fgColorArgs = {
    theme
  };
  switch ($hue) {
    case 'green':
      bgColorArgs.variable = 'background.success';
      fgColorArgs.variable = 'foreground.successEmphasis';
      break;
    case 'red':
      bgColorArgs.variable = 'background.danger';
      fgColorArgs.variable = 'foreground.dangerEmphasis';
      break;
    case 'yellow':
      bgColorArgs.variable = 'background.warning';
      fgColorArgs.variable = 'foreground.warningEmphasis';
      break;
    default:
      fgColorArgs.variable = 'foreground.default';
      bgColorArgs.variable = 'background.subtle';
      break;
  }
  const backgroundColor = getColor(bgColorArgs);
  const foregroundColor = getColor(fgColorArgs);
  return css(["background-color:", ";color:", ";a &{color:inherit;}"], backgroundColor, foregroundColor);
};
const StyledCode = styled(StyledFont).attrs({
  'data-garden-id': COMPONENT_ID,
  'data-garden-version': '9.10.0',
  as: 'code',
  $isMonospace: true
}).withConfig({
  displayName: "StyledCode",
  componentId: "sc-l8yvmf-0"
})(["border-radius:", ";padding:1.5px;", ";", ";"], props => props.theme.borderRadii.sm, props => colorStyles(props), componentStyles);
StyledCode.defaultProps = {
  theme: DEFAULT_THEME,
  $hue: 'grey',
  $size: 'inherit'
};

export { StyledCode };