// https://coolors.co/434371-e8eddf-79aea3-242423-333533
const c = {
  colorBackground: '#242423',
  colorForeground: '#E8EDDF',
  colorAccent: '#434371',
  colorAccentAlt: '#79AEA3',
  colorBackgroundLight: '#333533',
}

export default {
  ...c,
  theme: {
    treebeard: {
      tree: {
        base: {
          backgroundColor: c.colorBackground
        },
        node: {
          base: {
            color: c.colorForeground
          },
          activeLink: {
            color: c.colorAccentAlt
          },
          toggle: {
            base: {
              position: 'relative',
              display: 'inline-block',
              verticalAlign: 'top',
              height: '24px',
              width: '24px'
            },
            wrapper: {
              position: 'absolute',
              top: '50%',
              left: '50%',
              margin: '-7px 0 0 -7px',
              height: '14px'
            },
            height: 14,
            width: 14,
            arrow: {
              fill: '#9DA5AB',
              strokeWidth: 0
            }
          },
          header: {
            base: {
              display: 'inline-block',
              verticalAlign: 'top',
              userSelect: 'none',
            },
            icon: {
              width: '20px',
              fontSize: '15px',
              display: 'inline-block',
              color: c.colorAccentAlt,
            },
            connector: {
              width: '2px',
              height: '12px',
              borderLeft: 'solid 2px black',
              borderBottom: 'solid 2px black',
              position: 'absolute',
              top: '0px',
              left: '-21px'
            },
            title: {
              lineHeight: '24px',
              verticalAlign: 'middle'
            }
          },
          subtree: {
            listStyle: 'none',
            paddingLeft: 0,
          },
        }
      }
    }
  }
}