How to use open-color - 10 common examples

import colors from 'open-color'
import { Theme } from './interface'

const textColor = colors.gray[0]
const backgroundColor = colors.gray[9]
const activeColor = colors.blue[5]
const activeTextColor = colors.gray[0]
const borderColor = colors.gray[7]
const fontSize = 12

export const defaultTheme: Theme = {
  app: {
    textColor,
    backgroundColor,
    fontSize
  },
  sideNav: {
    linkActiveBackgroundColor: activeColor,
    borderColor
  },
  contextMenu: {

import React from 'react'
import styled from 'styled-components'
import oc from 'open-color'
import { AppBar, Drawer, MenuItem } from 'material-ui'
import LinkIcon from 'material-ui/svg-icons/content/link'
const Top = styled.div`
  align-items: center;
  background-color: ${oc.gray[8]};
  color: ${oc.white};
  display: flex;
  font-size: 1.1rem;
  left: 0;
  height: 3rem;
  justify-content: center;
  position: fixed;
  top: 0;
  width: 100%;
`

export default class extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isDrawerOpened: false,

&:after {
        content: " / ";
        color: ${oc.black};
    }
    &:last-child:after {
        content: "";
    }
`


const Tags = styled.div`
    margin-top: 0.35rem;
`;

const NoCategory = styled.span`
    color: ${oc.gray[5]};
    font-size: 0.9rem;
`;

class PostBody extends Component {

    static defaultProps = {
        data: {},
        darken: false
    }
    
    state = { 
        html: '',
        categories: []
    }

    converter = null

const FileList = styled.div`
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-top: 8px;

  background: ${oc.gray[8]};
  color: ${oc.gray[5]};
`;

const Header = styled.div`
  padding: 16px;

  background: ${oc.gray[9]};
  color: ${oc.gray[5]};
`;

const FileDirItem = styled.div`
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 8px;
  padding-left: ${props => props.depth * 16}px;

  font-weight: bold;
`;

const FileItem = styled(Link)`
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;

import hljs from 'highlight.js';
import 'highlight.js/styles/monokai-sublime.css';
import $ from 'jquery';
import DatePrint from 'components/Common/DatePrint';

import IonFolder from 'react-icons/lib/io/folder';

import Tag from 'components/Common/Tag';
import styled from 'styled-components'
import oc from 'open-color';

import { orderify, treeize, flatten } from 'helpers/category';

const StyledFolder = styled(IonFolder)`
    margin-right: 0.4rem;
    color: ${oc.gray[6]};
`

const Categories = styled.div`
    margin-top: 0.25rem;
`

const Category = styled.span`
    color: ${oc.gray[7]};
    font-size: 0.8rem;
    &:after {
        content: " / ";
        color: ${oc.black};
    }
    &:last-child:after {
        content: "";
    }

const Code = styled('code')`
  font-family: monospace;
  font-size: 0.75rem;
  color: ${colors.gray[8]};
  background-color: ${colors.gray[1]};
  padding: 1px;

  & p & {
    font-size: 0.99rem;
  }
`

const CodeBlock = styled('pre')`
  margin: 0;
  padding: 4px;
  color: ${colors.gray[6]};
  background-color: ${colors.gray[1]};
  border-radius: attr(radius, 6px);
`

export default ({ markdown }) => {
  return (
    
       {
            const tag = `h${level}`
            let id

            if (Array.isArray(children)) {
              if (typeof children[0] === 'string') {

import React from 'react';
import oc from 'open-color';
import styled from 'styled-components';


const Tag = styled.span`
    font-size: 0.75rem;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
    background: ${oc.gray[2]};
    display: inline-block;
    border-radius: 2px;
    font-weight: 400;
    color: ${oc.gray[7]};
    cursor: pointer;
    margin-right: 0.4rem;
    margin-bottom: 0.4rem;
    border: 1px solid ${oc.gray[3]};
    user-select: none;

    &:hover {
        background: ${oc.pink[7]};
        border: 1px solid ${oc.pink[8]};
        color: white;
    }

    &:active {
        border: 1px solid ${oc.pink[9]};
        background: ${oc.pink[8]};
        color: white;

height: 100%;
`;

const Scrollable = styled.div`
  flex: 1;
  overflow-y: auto;
`;

const FileList = styled.div`
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-top: 8px;

  background: ${oc.gray[8]};
  color: ${oc.gray[5]};
`;

const Header = styled.div`
  padding: 16px;

  background: ${oc.gray[9]};
  color: ${oc.gray[5]};
`;

const FileDirItem = styled.div`
  display: block;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-right: 8px;
  padding-left: ${props => props.depth * 16}px;