import { PrismTheme } from 'prism-react-renderer'

const theme: PrismTheme = {
  plain: {
    backgroundColor: 'transparent',
    color: 'currentColor',
  },
  styles: [
    {
      types: ['comment', 'prolog', 'doctype', 'cdata'],
      style: {
        // color: '#6c6783'
        opacity: 0.3,
        fontStyle: 'italic',
      }
    },
    {
      types: ['namespace'],
      style: {
        opacity: 0.7
      }
    },
    {
      types: ['number', 'boolean', 'hexcode'],
      style: {
        color: 'var(--color-code-number)',
        fontWeight: 'bold',
      }
    },
    {
      types: ['tag', 'operator', 'keyword', 'atrule', 'selector', 'important'],
      style: {
        color: 'var(--color-code-keyword)',
        fontWeight: 'bold',
      }
    },
    {
      types: ['type'],
      style: {
        color: 'var(--color-code-type)',
        fontWeight: 'bold',
      }
    },
    {
      types: ['punctuation'],
      style: {
        color: 'currentColor'
      }
    },
    {
      types: ['function'],
      style: {
        color: 'var(--color-code-function)',
        fontStyle: 'italic',
      }
    },
    {
      types: ['parameter'],
      style: {
        color: 'var(--color-code-parameter)'
      }
    },
    {
      types: ['property', 'attr-name'],
      style: {
        color: 'var(--color-code-property)'
      }
    },
    {
      types: ['string', 'attr-value', 'unit'],
      style: {
        color: 'var(--color-code-string)'
      }
    },
    {
      types: ['variable'],
      style: {
        color: 'var(--color-code-variable)'
      }
    },
    {
      types: [
        'regex',
      ],
      style: {
        color: 'var(--color-code-regexp)'
      }
    },
    {
      types: [
        'entity',
      ],
      style: {
        fontWeight: 'bold',
      },
    },
    {
      types: [
        'url',
      ],
      style: {
        color: 'var(--color-code-url)',
        textDecorationLine: 'underline',
      }
    },
    {
      types: ['deleted'],
      style: {
        textDecorationLine: 'line-through'
      }
    },
    {
      types: ['inserted'],
      style: {
        textDecorationLine: 'underline'
      }
    },
    {
      types: ['italic'],
      style: {
        fontStyle: 'italic'
      }
    },
    {
      types: ['bold'],
      style: {
        fontWeight: 'bold'
      }
    },
  ]
}

export default theme
