feat(theme): mdc-theme-prop accepts literal color values (#1129)

The `mdc-theme-prop` SCSS mixin now accepts literal color values (e.g., `green`, `#fff`) for `$style`, in addition to property names from the `$mdc-theme-property-values` map. This gives components the flexibility to do either `mdc-theme-prop(color, primary)` or `mdc-theme-prop(color, #fff)`.
material-components · Aug 25, 2017 · e47f3e6 · e47f3e6
1 parent 886109a
commit e47f3e6
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 13 deletions.
diff --git a/packages/mdc-theme/README.md b/packages/mdc-theme/README.md
@@ -140,7 +140,7 @@ CSS Class | Description
 
 Mixin | Description
 --- | ---
-`mdc-theme-prop($property, $style, $important)` | Applies a theme color to a property
+`mdc-theme-prop($property, $style, $important)` | Applies a theme color or a custom color to a CSS property
 `mdc-theme-dark($root-selector, $compound)` | Creates a rule that is applied when the current selector is within an Dark Theme context
 
 #### `mdc-theme-dark($root-selector, $compound)`
@@ -149,7 +149,7 @@ Creates a rule that is applied when the current selector is within an Dark Theme
 
 #### `mdc-theme-prop` Properties
 
-These properties can be used as the `$property` argument for `mdc-theme-prop` mixin.
+The properties below can be used as the `$style` argument for the `mdc-theme-prop` mixin. Literal color values (e.g., `rgba(0, 0, 0, .75)`) may also be used instead.
 
 > **A note about `<TEXT_STYLE>` and `<THEME_COLOR>`**, `<TEXT_STYLE>` represents the lowercase name of the text styles listed above, e.g. `hint`. `<THEME_COLOR>` represents the lowercase name of the theme colors listed above, e.g. `secondary`. When you put it all together it would be `text-hint-on-secondary`.
 

diff --git a/packages/mdc-theme/_mixins.scss b/packages/mdc-theme/_mixins.scss
@@ -18,22 +18,36 @@
 
 // Applies the correct theme color style to the specified property.
 // $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 $mdc-theme-property-values (_variables.scss).
+// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a literal color value.
 @mixin mdc-theme-prop($property, $style, $important: false) {
-  @if not map-has-key($mdc-theme-property-values, $style) {
-    @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
-  }
+  @if type-of($style) == "color" {
+    @if $important {
+      #{$property}: $style !important;
+    }
 
-  @if $important {
-    /* @alternate */
-    #{$property}: map-get($mdc-theme-property-values, $style) !important;
-    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style)) !important;
+    @else {
+      #{$property}: $style;
+    }
   }
 
   @else {
-    /* @alternate */
-    #{$property}: map-get($mdc-theme-property-values, $style);
-    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style));
+    @if not map-has-key($mdc-theme-property-values, $style) {
+      @error "Invalid style: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
+    }
+
+    $value: map-get($mdc-theme-property-values, $style);
+
+    @if $important {
+      /* @alternate */
+      #{$property}: $value !important;
+      #{$property}: var(--mdc-theme-#{$style}, $value) !important;
+    }
+
+    @else {
+      /* @alternate */
+      #{$property}: $value;
+      #{$property}: var(--mdc-theme-#{$style}, $value);
+    }
   }
 }