feat(theme): Add !important option to mdl-theme-prop.

Also use the new option for the `mdl-theme--*` classes.

Author: Sérgio Gomes

packages/mdl-theme/README.md

@@ -51,7 +51,8 @@ The correct text colors will automatically be calculated based on the provided t
 #### mdl-theme-prop mixin
 
 MDL Theme exports an `mdl-theme-prop` mixin, which can be used to apply a theme color to a property. The mixin takes the
-property name as the first parameter, and the desired color as the second one.
+property name as the first parameter, and the desired color as the second one. It also has an optional boolean parameter
+for whether `!important` should be applied to the value.
 
 For example, if you wanted to set the background of `.foo` to the primary color, and the text color to suit primary text
 on top of it:
@@ -258,6 +259,9 @@ Determines whether to use light or dark text on top of a given color.
 </span>
 ```
 
+> Note: These classes use `!important` on the values, since they're user-specified and are applied to ensure that a
+particular color gets used.
+
 There are a number of CSS classes available for taking advantage of theming.
 
 #### Theme color classes
@@ -338,15 +342,15 @@ calculate the correct text colors to use, based on the chosen theme colors. Thes
 
 #### Theme colors
 
-| Class                    | Description                 |
+| Custom property          | Description                 |
 | ------------------------ | --------------------------- |
 | `--mdl-theme-primary`    | The theme primary color.    |
 | `--mdl-theme-accent`     | The theme accent color.     |
 | `--mdl-theme-background` | The theme background color. |
 
 #### Text on a theme primary color background
 
-| Class                                      | Description                                                |
+| Custom property                            | Description                                                |
 | ------------------------------------------ | ---------------------------------------------------------- |
 | `--mdl-theme-text-primary-on-primary`      | Primary text on top of a theme primary color background.   |
 | `--mdl-theme-text-secondary-on-primary`    | Secondary text on top of a theme primary color background. |
@@ -356,7 +360,7 @@ calculate the correct text colors to use, based on the chosen theme colors. Thes
 
 #### Text on a theme accent color background
 
-| Class                                      | Description                                                |
+| Custom property                            | Description                                                |
 | ------------------------------------------ | ---------------------------------------------------------- |
 | `--mdl-theme-text-primary-on-accent`       | Primary text on top of a theme accent color background.    |
 | `--mdl-theme-text-secondary-on-accent`     | Secondary text on top of a theme accent color background.  |
@@ -366,7 +370,7 @@ calculate the correct text colors to use, based on the chosen theme colors. Thes
 
 #### Text on the theme background
 
-| Class                                      | Description                                                |
+| Custom property                            | Description                                                |
 | ------------------------------------------ | ---------------------------------------------------------- |
 | `--mdl-theme-text-primary-on-background`   | Primary text on top of the theme background.               |
 | `--mdl-theme-text-secondary-on-background` | Secondary text on top of the theme background.             |
@@ -376,7 +380,7 @@ calculate the correct text colors to use, based on the chosen theme colors. Thes
 
 #### Text on a light-colored background (useful for custom backgrounds)
 
-| Class                                      | Description                                                |
+| Custom property                            | Description                                                |
 | ------------------------------------------ | ---------------------------------------------------------- |
 | `--mdl-theme-text-primary-on-light`        | Primary text on top of a light-colored background.         |
 | `--mdl-theme-text-secondary-on-light`      | Secondary text on top of a light-colored background.       |
@@ -386,7 +390,7 @@ calculate the correct text colors to use, based on the chosen theme colors. Thes
 
 #### Text on a dark-colored background (useful for custom backgrounds)
 
-| Class                                      | Description                                                |
+| Custom property                            | Description                                                |
 | ------------------------------------------ | ---------------------------------------------------------- |
 | `--mdl-theme-text-primary-on-dark`         | Primary text on top of a dark-colored background.          |
 | `--mdl-theme-text-secondary-on-dark`       | Secondary text on top of a dark-colored background.        |

packages/mdl-theme/_mixins.scss

@@ -24,13 +24,20 @@
  * $property is typically color or background-color, but can be any CSS property that accepts color values.
  * $style should be one of the map keys in $mdl-theme-property-values (_variables.scss).
  */
-@mixin mdl-theme-prop($property, $style) {
+@mixin mdl-theme-prop($property, $style, $important: false) {
   @if not map-has-key($mdl-theme-property-values, $style) {
     @error "Invalid style specified! Choose one of #{map-keys($mdl-theme-property-values)}";
   }
 
-  #{$property}: map-get($mdl-theme-property-values, $style);
-  #{$property}: var(--mdl-theme-#{$style}, map-get($mdl-theme-property-values, $style));
+  @if $important {
+    #{$property}: map-get($mdl-theme-property-values, $style) !important;
+    #{$property}: var(--mdl-theme-#{$style}, map-get($mdl-theme-property-values, $style)) !important;
+  }
+
+  @else {
+    #{$property}: map-get($mdl-theme-property-values, $style);
+    #{$property}: var(--mdl-theme-#{$style}, map-get($mdl-theme-property-values, $style));
+  }
 }
 
 /**

packages/mdl-theme/mdl-theme.scss

@@ -30,14 +30,14 @@
 @each $style in map-keys($mdl-theme-property-values) {
   @if $style != "background" {
     .mdl-theme--#{$style} {
-      @include mdl-theme-prop(color, $style);
+      @include mdl-theme-prop(color, $style, true);
     }
   }
 }
 
 /* CSS rules for using primary and accent as background colors. */
 @each $style in ("primary", "accent") {
   .mdl-theme--#{$style}-bg {
-    @include mdl-theme-prop(background-color, $style);
+    @include mdl-theme-prop(background-color, $style, true);
   }
 }