[AppBar] Add color transparent support

Author: oliviertassinari

docs/pages/api/app-bar.md

@@ -26,7 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The content of the component. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
-| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
+| <span class="prop-name">color</span> | <span class="prop-type">'default'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'transparent'</span> | <span class="prop-default">'primary'</span> | The color of the component. It supports those theme colors that make sense for this component. |
 | <span class="prop-name">position</span> | <span class="prop-type">'absolute'<br>&#124;&nbsp;'fixed'<br>&#124;&nbsp;'relative'<br>&#124;&nbsp;'static'<br>&#124;&nbsp;'sticky'</span> | <span class="prop-default">'fixed'</span> | The positioning type. The behavior of the different options is described [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning). Note: `sticky` is not universally supported and will fall back to `static` when unavailable. |
 
 The `ref` is forwarded to the root element.
@@ -50,6 +50,7 @@ Any other props supplied will be provided to the root element ([Paper](/api/pape
 | <span class="prop-name">colorPrimary</span> | <span class="prop-name">.MuiAppBar-colorPrimary</span> | Styles applied to the root element if `color="primary"`.
 | <span class="prop-name">colorSecondary</span> | <span class="prop-name">.MuiAppBar-colorSecondary</span> | Styles applied to the root element if `color="secondary"`.
 | <span class="prop-name">colorInherit</span> | <span class="prop-name">.MuiAppBar-colorInherit</span> | Styles applied to the root element if `color="inherit"`.
+| <span class="prop-name">colorTransparent</span> | <span class="prop-name">.MuiAppBar-colorTransparent</span> | Styles applied to the root element if `color="transparent"`.
 
 You can override the style of the component thanks to one of these customization points:
 

packages/material-ui/src/AppBar/AppBar.d.ts

@@ -5,7 +5,7 @@ export interface AppBarProps extends StandardProps<PaperProps, AppBarClassKey> {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color?: PropTypes.Color;
+  color?: PropTypes.Color | 'transparent';
   /**
    * The positioning type. The behavior of the different options is described
    * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).

packages/material-ui/src/AppBar/AppBar.js

@@ -71,7 +71,11 @@ export const styles = theme => {
     },
     /* Styles applied to the root element if `color="inherit"`. */
     colorInherit: {
-      backgroundColor: 'inherit',
+      color: 'inherit',
+    },
+    /* Styles applied to the root element if `color="transparent"`. */
+    colorTransparent: {
+      backgroundColor: 'transparent',
       color: 'inherit',
     },
   };
@@ -121,7 +125,7 @@ AppBar.propTypes = {
   /**
    * The color of the component. It supports those theme colors that make sense for this component.
    */
-  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']),
+  color: PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary', 'transparent']),
   /**
    * The positioning type. The behavior of the different options is described
    * [in the MDN web docs](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning).