How I use colours within stylus

example.styl

// Quick example of how to use it
.warning {
  color red
  background-color mobilleo
}

// But it has sensible fallbacks to the default prop usage if colour is not found or is a valid colour

.alert {
  color #9c0
  color navyblue
}

helpers-colours.styl

// This generates hard colour classes for every colour I define
// useful for quick overrides and testing.

for colour, value in colours
  .{colour}
    color colour !important
  .bg-{colour}
    background-color colour
    contrast-color colour

mixins-colour.styl

// These override the default css props and adds a new contrast-color prop.
// Allows me to use color: myfunkycolor just like any valid colour name.

color(value)
  color colours[value] ? colours[value] : value
contrast-color(value)
  color: contrast(colours[value], colours.white-primary).ratio > 3 ? colours.white-primary : colours.black-primary
background-color(value)
  background-color colours[value] ? colours[value] : value
border-color(value)
  border-color colours[value] ? colours[value] : value

vars-colours.styl

// I then define a number of hashes that I merge into a single colour has.
// Usually split between material design colours and then UI overrides or better names.

material = {
  'red': #f44336,
  'red-50':   #ffebee,
  'red-100':  #ffcdd2,
}

ui = {
  'mobilleo': #384154,
  'background': #f2f2f2,
  'notification': material.red,
}

colours = merge(material, ui)