gradients.styl

@import 'config'

/*
 * Implicit color stop position.
 */

pos-in-stops(i, stops)
  len = length(stops)
  if len - 1 == i
    100%
  else if i
    unit(i / len * 100, '%')
  else
    0

/*
 * Normalize color stops:
 *
 *   - (color pos) -> (pos color)
 *   - (color) -> (implied-pos color)
 *
 */

normalize-stops(stops)
  stops = clone(stops)
  for stop, i in stops
    if length(stop) == 1
      color = stop[0]
      stop[0] = pos-in-stops(i, stops)
      stop[1] = color
    else if typeof(stop[1]) == 'unit'
      pos = stop[1]
      stop[1] = stop[0]
      stop[0] = pos
  stops

/*
 * Join color stops with the given translation function.
 */

join-stops(stops, translate)
  str = ''
  len = length(stops)
  for stop, i in stops
    str += ', ' if i
    pos = stop[0]
    color = stop[1]
    str += translate(color, pos)
  unquote(str)

/*
 * Standard color stop.
 */

std-stop(color, pos)
  '%s %s' % (color pos)

/*
 * Create a linear gradient with the given start position
 * and variable number of color stops.
 *
 * Examples:
 *
 *    background: linear-gradient(top, red, green, blue)
 *    background: linear-gradient(bottom, red, green 50%, blue)
 *    background: linear-gradient(bottom, red, 50% green, blue)
 *    background: linear-gradient(bottom, red, 50% green, 90% white, blue)
 *
 */

linear-gradient(start, stops...)
  error('color stops required') unless length(stops)

  unquote('linear-gradient(' + join(', ',arguments) + ')')

/*
 * Create a linear gradient image with the given start position
 * and variable number of color stops.
 */

linear-gradient-image(start, stops...)
  error('node-canvas is required for linear-gradient-image()') unless has-canvas
  stops = stops[0] if length(stops) == 1
  error('gradient image size required') unless start[0] is a 'unit'
  size = start[0]
  start = start[1] or 'top'
  grad = create-gradient-image(size, start)
  stops = normalize-stops(stops)
  add-color-stop(grad, stop[0], stop[1]) for stop in stops
  'url(%s)' % gradient-data-uri(grad)