Programmatic stylus

colors.styl

colors = {
  'black': #000,
  'white': #fff
}

shades = {
  'light': 20%,
  'lighter': 40%,
  'lightest': 60%
}

.btn
  for col, colValue in colors
    &-{col}
      background col
      border-color col

      for key, value in shades
        &-{key}
          background lighten(colValue, value)

selectors.css

.btn-green {
  background: #40bf6a;
  border-color: #40bf6a;
}
.btn-green-dark {
  background: #395;
}
.btn-green-darker {
  background: #267340;
}
.btn-green-darkest {
  background: #194d2b;
}
.btn-green-light {
  background: #6c8;
}
.btn-green-lighter {
  background: #8cd9a6;
}
.btn-green-lightest {
  background: #b3e6c4;
}
.btn-yellow {
  background: #4095bf;
  border-color: #4095bf;
}
.btn-yellow-dark {
  background: #379;
}
.btn-yellow-darker {
  background: #265973;
}
.btn-yellow-darkest {
  background: #193b4d;
}
.btn-yellow-light {
  background: #6ac;
}
.btn-yellow-lighter {
  background: #8cbfd9;
}
.btn-yellow-lightest {
  background: #b3d4e6;
}
input green {
  color: #40bf6a;
}
input green-dark {
  background: #395;
}
input green-darker {
  background: #267340;
}
input green-darkest {
  background: #194d2b;
}
input green-light {
  background: #6c8;
}
input green-lighter {
  background: #8cd9a6;
}
input green-lightest {
  background: #b3e6c4;
}
input yellow {
  color: #4095bf;
}
input yellow-dark {
  background: #379;
}
input yellow-darker {
  background: #265973;
}
input yellow-darkest {
  background: #193b4d;
}
input yellow-light {
  background: #6ac;
}
input yellow-lighter {
  background: #8cbfd9;
}
input yellow-lightest {
  background: #b3d4e6;
}
select option green {
  background-color: #40bf6a;
}
select option green-dark {
  background: #395;
}
select option green-darker {
  background: #267340;
}
select option green-darkest {
  background: #194d2b;
}
select option green-light {
  background: #6c8;
}
select option green-lighter {
  background: #8cd9a6;
}
select option green-lightest {
  background: #b3e6c4;
}
select option yellow {
  background-color: #4095bf;
}
select option yellow-dark {
  background: #379;
}
select option yellow-darker {
  background: #265973;
}
select option yellow-darkest {
  background: #193b4d;
}
select option yellow-light {
  background: #6ac;
}
select option yellow-lighter {
  background: #8cbfd9;
}
select option yellow-lightest {
  background: #b3d4e6;
}

selectors.styl

sels = {
  '.btn': {
    '0': 'background',
    '1': 'border-color'
  }
  'input': {
    '0': 'color'
  }
  'select option': {
    '0': 'background-color'
  }
}

colors = {
  'green': hsl(140, 50%, 50%)
  'yellow': hsl(200, 50%, 50%)
}

shades = {
  'dark': 20%
  'darker': 40%
  'darkest': 60%
  'light': 20%
  'lighter': 40%
  'lightest': 60%
}

for sel, props in sels
  //- seperate with a space if `sel` is an element
  //- otherwise use a `-`
  sep = match('^\.', sel) ? '-' : ' '
  {sel}
    for col, colValue in colors
      &{sep}{col}
        for key, val in props
          {val} colValue

        for key, value in shades
          &-{key}
            fn = match('^light', key) ? lighten : darken
            background fn(colValue, value)