import PropTypes from 'prop-types'
import React from 'react'
import styled from 'styled-components'

import {scale, theme} from '../../utilStyles'
import {declareTypograhpy, StyledSpan} from '../../Typography'

const StyledHtmlFormatter = styled(StyledSpan)`
  &&& {
    ${props => declareTypograhpy(props, 'html')}
    margin: 0 0 ${scale.space(-1)};

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      border-radius: 6px;
      padding: .3em;
    }

    .label-danger {
      background-color: ${theme.color('signal.danger.paper')};
      color: ${theme.color('signal.danger.text')};
    }

    .label-info {
      background-color: ${theme.color('signal.info.paper')};
      color: ${theme.color('signal.info.text')};
    }

    .label-warning {
      background-color: ${theme.color('signal.warning.paper')};
      color: ${theme.color('signal.warning.text')};
    }

    .label-success {
      background-color: ${theme.color('signal.success.paper')};
      Color: ${theme.color('signal.success.text')};
    }
  }
`

const HtmlFormatter = props => {
  return <StyledHtmlFormatter dangerouslySetInnerHTML={{__html: props.value}}/>
}

HtmlFormatter.propTypes = {
  value: PropTypes.string.isRequired
}

export {
  HtmlFormatter as default,
  StyledHtmlFormatter
}

@@ -487,71 +487,8 @@
 r %7B%0A
-      background-color: $%7Btheme.color('signal.danger.paper')%7D;%0A
     
@@ -563,69 +563,8 @@
 o %7B%0A
-      background-color: $%7Btheme.color('signal.info.paper')%7D;%0A
     
@@ -640,72 +640,8 @@
 g %7B%0A
-      background-color: $%7Btheme.color('signal.warning.paper')%7D;%0A
     
@@ -720,72 +720,8 @@
 s %7B%0A
-      background-color: $%7Btheme.color('signal.success.paper')%7D;%0A
     

remove backgroundcolor in display expressions