wekan/client/components/boards/boardColors.styl

// We define a set of six board colors that we took from the FlatUI palette.
// http://flatuicolors.com
//
// XXX Centralizing all these properties in a single file just because their
// value is derived from the same color, doesn't make any sense. We should
// create a mixin/macro that would generate 6 versions of a given property and
// dispatch this list in the other stylus files.
setBoardColor(color)
  &#header,
  &.sk-spinner div,
  .board-backgrounds-list &.background-box,
  .board-list & a
    background-color: color

  .is-selected .minicard
    border-left: 3px solid color

  button[type=submit].primary, input[type=submit].primary
    background-color: darken(color, 20%)

  &.pop-over .pop-over-list li a:not(.disabled):hover,
  .sidebar .sidebar-content .sidebar-btn:hover,
  .sidebar-list li a:hover
    background-color: lighten(color, 10%)

  &#header ul li.current, &#header-quick-access ul li.current
    border-bottom: 2px solid lighten(color, 10%)

  &#header-quick-access
    background: darken(color, 10%)
    color: white

  &#header #header-main-bar .board-header-btn.emphasis
    background: complement(color)

    &:hover,
    .board-header-btn-close
      background: darken(complement(color), 10%)

    &:hover .board-header-btn-close
      background: darken(complement(color), 20%)

  .materialCheckBox.is-checked
    border-bottom: 2px solid color
    border-right: 2px solid color

  .is-multiselection-active .multi-selection-checkbox
    &.is-checked + .minicard
      background: lighten(color, 90%)

    &:not(.is-checked) + .minicard:hover:not(.minicard-composer)
      background: lighten(color, 97%)

  .toggle-label

    &:after
      background-color: darken(color, 20%)

  .toggle-switch:checked ~ .toggle-label
    background-color: lighten(color, 20%)

    &:after
      background-color: darken(color, 20%)

  @media screen and (max-width: 800px)
    &.pop-over .header
      background: color
      color: white

   &#header ul li.current, &#header-quick-access ul li.current
      border-bottom: 4px solid lighten(color, 20%)

.board-color-nephritis
  setBoardColor(#27AE60)

.board-color-pomegranate
  setBoardColor(#C0392B)

.board-color-belize
  setBoardColor(#2980B9)

.board-color-wisteria
  setBoardColor(#8E44AD)

.board-color-midnight
  setBoardColor(#2C3E50)

.board-color-pumpkin
  setBoardColor(#E67E22)