[SpeedDial] Fix SpeedDialAction dark theme (#12230)

Also improve some button class descriptions.

Closes #10763
<!-- Thanks so much for your PR, your contribution is appreciated! ❤️ -->
![image](https://user-images.githubusercontent.com/357702/43039919-44fe59ee-8d2f-11e8-95c5-937b4ea6a426.png)

packages/material-ui-lab/src/SpeedDialAction/SpeedDialAction.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
 import Button from '@material-ui/core/Button';
 import Tooltip from '@material-ui/core/Tooltip';
 
@@ -14,6 +15,10 @@ export const styles = theme => ({
   button: {
     margin: 8,
     color: theme.palette.text.secondary,
+    backgroundColor: emphasize(theme.palette.background.default, 0.12),
+    '&:hover': {
+      backgroundColor: emphasize(theme.palette.background.default, 0.15),
+    },
     transition: `${theme.transitions.create('transform', {
       duration: theme.transitions.duration.shorter,
     })}, opacity 0.8s`,

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

@@ -79,7 +79,7 @@ export const styles = theme => ({
       theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
     }`,
   },
-  /* Styles applied to the root element if `variant="contained"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"`. */
   contained: {
     color: theme.palette.getContrastText(theme.palette.grey[300]),
     backgroundColor: theme.palette.grey[300],
@@ -106,7 +106,7 @@ export const styles = theme => ({
       },
     },
   },
-  /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
+  /* Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`. */
   containedPrimary: {
     color: theme.palette.primary.contrastText,
     backgroundColor: theme.palette.primary.main,
@@ -118,7 +118,7 @@ export const styles = theme => ({
       },
     },
   },
-  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
+  /* Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`. */
   containedSecondary: {
     color: theme.palette.secondary.contrastText,
     backgroundColor: theme.palette.secondary.main,
@@ -136,7 +136,7 @@ export const styles = theme => ({
   raisedPrimary: {}, // legacy
   /* Styles applied to the root element for backwards compatibility with legacy variant naming. */
   raisedSecondary: {}, // legacy
-  /* Styles applied to the root element if `variant="fab"`. */
+  /* Styles applied to the root element if `variant="[fab | extendedFab]"`. */
   fab: {
     borderRadius: '50%',
     padding: 0,
@@ -164,7 +164,7 @@ export const styles = theme => ({
   colorInherit: {
     color: 'inherit',
   },
-  /* Styles applied to the root element if `size="mini"`. */
+  /* Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`. */
   mini: {
     width: 40,
     height: 40,

pages/api/button.md

@@ -47,18 +47,18 @@ This property accepts the following keys:
 | <span class="prop-name">flatPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">flatSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">outlined</span> | Styles applied to the root element if `variant="outlined"`.
-| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="contained"`.
-| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="contained"` and `color="primary"`.
-| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="contained"` and `color="secondary"`.
+| <span class="prop-name">contained</span> | Styles applied to the root element if `variant="[contained | fab]"`.
+| <span class="prop-name">containedPrimary</span> | Styles applied to the root element if `variant="[contained | fab|"` and `color="primary"`.
+| <span class="prop-name">containedSecondary</span> | Styles applied to the root element if `variant="[contained | fab]"` and `color="secondary"`.
 | <span class="prop-name">raised</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedPrimary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
 | <span class="prop-name">raisedSecondary</span> | Styles applied to the root element for backwards compatibility with legacy variant naming.
-| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="fab"`.
+| <span class="prop-name">fab</span> | Styles applied to the root element if `variant="[fab | extendedFab]"`.
 | <span class="prop-name">extendedFab</span> | Styles applied to the root element if `variant="extendedFab"`.
 | <span class="prop-name">focusVisible</span> | Styles applied to the ButtonBase root element if the button is keyboard focused.
 | <span class="prop-name">disabled</span> | Styles applied to the root element if `disabled={true}`.
 | <span class="prop-name">colorInherit</span> | Styles applied to the root element if `color="inherit"`.
-| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"`.
+| <span class="prop-name">mini</span> | Styles applied to the root element if `size="mini"` & `variant="[fab | extendedFab]"`.
 | <span class="prop-name">sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | Styles applied to the root element if `size="large"`.
 | <span class="prop-name">fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.