anchor.diff:              each el in color.uses
                 li= el
       mixin colorBoxTrans(color, n)
  -      section.o-GridFlex__Item.o-Box.-w-1o2.js-colorbox(class=[(color.is_dark) ? 'h-darkbg' : ''] style={
  +      section.o-GridFlex__Item.o-Box.-w-1o2.js-colorbox(class=['js-'+color.bg_class, (color.is_dark) ? 'h-darkbg' : ''] style={
           'border-radius': '0',
           'background-color': color.box_color.code_hex
         })
           - var numbers = ['One','Two','Three','Four','Five','Six','Seven','Eight','Nine']
           mixin transbox(i)
             if i < n
  -            div.o-Box.o-Box--mill(class=color.bg_class)= numbers[i]
  +            div.o-Box.o-Box--mill(class=color.bg_class)
  +              p.-mb-0
  +                = numbers[i]
  +                span.js-mix
                 +transbox(i+1)
           h4.ColorTitle Overlapping #{color.name}
           form
  
positive.code:   script(src="../core/scripts/util.js")
    script(src="../core/scripts/color.js")
    script.
      function fontdemo(self) {
        return $(self).closest('.o-GridFlex').find('.c-FontSamp')
      }
      $('body').addClass('-bc-w -bi-n -c-b')
      $('input[name="fs"]').change(function () {
        fontdemo(this).css('font-style', (this.checked) ? $(this).val() : '')
      })
  
negative.code:             | .#{color.bg_class}
              br
              | #{color.code_dfn} == #{color.code_hexa}
          p.-mb-0 Zero
          +transbox(0)
      h2 Color Scheme
      footer: p.
  