fix(md-colors): add important to background colors

[Ullfis]

.. primary, accent, error and success
to be able to color avatar icons in md-collection

<md-collection>
  <md-collection-item class="avatar">
    <i class="material-icons circle primary">insert_chart</i>
    <span class="title">Title</span>
    <p>First Line <br>
      Second Line
    </p>
  </md-collection-item>
</md-collection>

[coveralls]

Coverage remained the same at 95.154% when pulling 9e8f46c on Ullfis:important-colors into d5b8313 on aurelia-ui-toolkits:master.

[Thanood]

I'm not sure really. I always tried to prevent !important usage.
Especially in a library which others use and adapt to their apps.

[Ullfis]

Another approach is to be more specific about what to put the theme color on to:

  md-collection .collection md-collection-item.collection-item.avatar i.circle.primary {
    background-color: ${mdPrimaryColor}!important;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.accent {
    background-color: ${mdAccentColor}!important;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.error {
    background-color: ${mdErrorColor}!important;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.success {
    background-color: ${mdAccentColor}!important;
  }

Cant get away without !important to make it work.

[Thanood]

Why close it? The idea is a good one.

If you can't get away with !important at all then we should be more specific.
What overrides the background-color if you don't use !important, though?

[Thanood]

This overrides bg-color: .collection .collection-item.avatar i.circle
So your second approach works without !important.. 😃

[Ullfis]

Excellent!

Here is some more to add 😄

Use -text classes to remove the circle:

  md-collection .collection md-collection-item.collection-item.avatar i.circle.primary-text {
    color: ${mdPrimaryColor};
    background-color: transparent;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.accent-text {
    color: ${mdAccentColor};
    background-color: transparent;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.error-text {
    color: ${mdErrorColor};
    background-color: transparent;
  }
  md-collection .collection md-collection-item.collection-item.avatar i.circle.success-text {
    color: ${mdAccentColor};
    background-color: transparent;
  }

      <md-collection-item class="accent-text avatar">
        <i class="circle material-icons primary-text" style="font-size:36px;">person</i>
        <span class="title">Title</span>
        <p>First Line <br>
           Second Line
        </p>
        <div class="secondary-content">
          <i class="material-icons">send</i>
        </div>
      </md-collection-item>

Result: