fix(theme): Allow CSS variables to be passed to mdc-theme-prop (#3086)

Author: kfranqueiro

packages/mdc-theme/README.md

@@ -146,11 +146,11 @@ Determines whether to use light or dark text on top of a given color.
 @debug mdc-theme-contrast-tone(#9c27b0); // light
 ```
 
-#### `mdc-theme-prop-value($property)`
+#### `mdc-theme-prop-value($style)`
 
-If `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the
-corresponding theme property (from `$mdc-theme-property-values`) is returned. If `$property` is not a color and no
-such theme property exists, an error is thrown.
+If `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.
+Otherwise, `$style` is treated as a theme property name, and the corresponding value from `$mdc-theme-property-values`
+is returned. If this also fails, an error is thrown.
 
 This is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).
 

packages/mdc-theme/_mixins.scss

@@ -18,11 +18,11 @@
 
 // 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), or a literal color value.
+// $style should be one of the map keys in $mdc-theme-property-values (_variables.scss), or a color value.
 // $edgeOptOut controls whether to feature-detect around Edge to avoid emitting CSS variables for it,
 // intended for use in cases where interactions with pseudo-element styles cause problems due to Edge bugs.
 @mixin mdc-theme-prop($property, $style, $important: false, $edgeOptOut: false) {
-  @if type-of($style) == "color" or $style == "currentColor" {
+  @if mdc-theme-is-valid-theme-prop-value_($style) {
     @if $important {
       #{$property}: $style !important;
     } @else {

packages/mdc-theme/_variables.scss

@@ -98,28 +98,28 @@ $mdc-theme-property-values: (
   text-icon-on-dark: mdc-theme-ink-color-for-fill_(icon, dark)
 );
 
-// If `$property` is a literal color value (e.g., `blue`, `#fff`), it is returned verbatim. Otherwise, the value of the
-// corresponding theme property (from `$mdc-theme-property-values`) is returned. If `$property` is not a color and no
-// such theme property exists, an error is thrown.
+// If `$style` is a color (a literal color value, `currentColor`, or a CSS custom property), it is returned verbatim.
+// Otherwise, `$style` is treated as a theme property name, and the corresponding value from
+// `$mdc-theme-property-values` is returned. If this also fails, an error is thrown.
 //
 // This is mainly useful in situations where `mdc-theme-prop` cannot be used directly (e.g., `box-shadow`).
 //
 // Examples:
 //
-// 1. mdc-theme-prop-value(primary) => "#3f51b5"
+// 1. mdc-theme-prop-value(primary) => "#6200ee"
 // 2. mdc-theme-prop-value(blue)    => "blue"
 //
 // NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.
-@function mdc-theme-prop-value($property) {
-  @if type-of($property) == "color" or $property == "currentColor" {
-    @return $property;
+@function mdc-theme-prop-value($style) {
+  @if mdc-theme-is-valid-theme-prop-value_($style) {
+    @return $style;
   }
 
-  @if not map-has-key($mdc-theme-property-values, $property) {
-    @error "Invalid theme property: '#{$property}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
+  @if not map-has-key($mdc-theme-property-values, $style) {
+    @error "Invalid theme property: '#{$style}'. Choose one of: #{map-keys($mdc-theme-property-values)}";
   }
 
-  @return map-get($mdc-theme-property-values, $property);
+  @return map-get($mdc-theme-property-values, $style);
 }
 
 // NOTE: This function must be defined in _variables.scss instead of _functions.scss to avoid circular imports.
@@ -133,3 +133,8 @@ $mdc-theme-property-values: (
 
   @return map-get($color-map-for-tone, $text-style);
 }
+
+// NOTE: This function is depended upon by mdc-theme-prop-value (above) and thus must be defined in this file.
+@function mdc-theme-is-valid-theme-prop-value_($style) {
+  @return type-of($style) == "color" or $style == "currentColor" or str_slice($style, 1, 4) == "var(";
+}