How to use the @edtr-io/ui.createPluginTheme function in @edtr-io/ui

To help you get started, we’ve selected a few @edtr-io/ui 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 edtr-io / edtr-io / packages / plugin-rows / src / index.tsx View on Github external
lightBackgroundColor: string

  menu: {
    highlightColor: string
    primary: {
      backgroundColor: string
      color: string
    }
    secondary: {
      backgroundColor: string
      color: string
    }
  }
}

export const createRowPluginTheme = createPluginTheme(theme => {
  return {
    backgroundColor: theme.editor.backgroundColor,
    color: theme.editor.color,
    highlightColor: theme.editor.primary.background,
    lightBackgroundColor: theme.editor.primary.color,
    menu: {
      highlightColor: theme.editor.primary.background,
      primary: {
        backgroundColor: 'rgba(255, 255, 255, 0.95)',
        color: theme.editor.backgroundColor
      },
      secondary: {
        backgroundColor: '#f5f5f5',
        color: 'rgba(51,51,51)'
      }
    }
github edtr-io / edtr-io / packages / plugin-text / src / plugins / suggestions.tsx View on Github external
import { styled, createPluginTheme, ThemeProps } from '@edtr-io/ui'
import * as React from 'react'

const createSuggestionsTheme = createPluginTheme(theme => {
  return {
    background: {
      default: 'transparent',
      highlight: theme.editor.primary.background
    },

    text: {
      default: theme.editor.color,
      highlight: theme.editor.danger.background
    }
  }
})

const Suggestion = styled.div<{ active: boolean; name: string }>(
  ({
    active,