include ./helpers

h1.example__header Colors


label.label Variables
table.color-table(border="1px")
  tr
    td @color--white
    td.white-cell
  tr
    td @color--black
    td.black-cell
  tr
    td @color--off-white
    td.off-white-cell
  tr
    td @color--gray-lighter
    td.gray-lighter-cell
  tr
    td @color--gray-light
    td.gray-light-cell
  tr
    td @color--gray
    td.gray-cell
  tr
    td @color--gray-dark
    td.gray-dark-cell
  tr
    td @color--blue
    td.blue-cell
  tr
    td @color--blue-dark
    td.blue-dark-cell
  tr
    td @color--purple
    td.purple-cell
  tr
    td @color--purple-dark
    td.purple-dark-cell
  tr
    td @color--yellow-light
    td.yellow-light-cell
  tr
    td @color--yellow
    td.yellow-cell
  tr
    td @color--yellow-dark
    td.yellow-dark-cell
  tr
    td @color--red
    td.red-cell
  tr
    td @color--pink
    td.pink-cell
  tr
    td @color--orange
    td.orange-cell
  tr
    td @color--orange-dark
    td.orange-dark-cell
  tr
    td @color--green
    td.green-cell
  tr
    td @color--green-dark
    td.green-dark-cell

br
label.label Mixins
ul
  span Set background color and adjusted font colors
  +codeExample("css").
    .background--color(@color: off-white);
br
label.label Global classes
.row
  .column
    .box.background
      p TEST
    label .background
  .column
    .box.background--dark
      p TEST
    label .background--dark