diff --git a/src/Button/Button.js b/src/Button/Button.js
index 7f6fbc68175b69..2694b1b60b01fb 100644
--- a/src/Button/Button.js
+++ b/src/Button/Button.js
@@ -23,7 +23,7 @@ export const styles = theme => ({
     }),
     '&:hover': {
       textDecoration: 'none',
-      backgroundColor: fade(theme.palette.text.primary, 0.12),
+      backgroundColor: fade(theme.palette.text.primary, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -45,7 +45,7 @@ export const styles = theme => ({
   flatPrimary: {
     color: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.primary.main, 0.12),
+      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -55,7 +55,7 @@ export const styles = theme => ({
   flatSecondary: {
     color: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.main, 0.12),
+      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
diff --git a/src/CssBaseline/CssBaseline.d.ts b/src/CssBaseline/CssBaseline.d.ts
index bdab0c750b3f42..3a23ab30cedd3c 100644
--- a/src/CssBaseline/CssBaseline.d.ts
+++ b/src/CssBaseline/CssBaseline.d.ts
@@ -6,7 +6,6 @@ export interface CssBaselineProps {
 
 declare const CssBaseline: React.ComponentType<CssBaselineProps>;
 
-export type CssBaselineClassKey =
-  | '@global';
+export type CssBaselineClassKey = '@global';
 
 export default CssBaseline;
diff --git a/src/IconButton/IconButton.js b/src/IconButton/IconButton.js
index b6c20cc2e03078..3ca75b2c484a52 100644
--- a/src/IconButton/IconButton.js
+++ b/src/IconButton/IconButton.js
@@ -22,7 +22,7 @@ export const styles = theme => ({
       duration: theme.transitions.duration.shortest,
     }),
     '&:hover': {
-      backgroundColor: fade(theme.palette.action.active, 0.04),
+      backgroundColor: fade(theme.palette.action.active, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -41,7 +41,7 @@ export const styles = theme => ({
   colorPrimary: {
     color: theme.palette.primary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.primary.main, 0.04),
+      backgroundColor: fade(theme.palette.primary.main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -51,7 +51,7 @@ export const styles = theme => ({
   colorSecondary: {
     color: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.main, 0.04),
+      backgroundColor: fade(theme.palette.secondary.main, theme.palette.action.hoverOpacity),
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         backgroundColor: 'transparent',
diff --git a/src/Select/Select.d.ts b/src/Select/Select.d.ts
index 53c9b0878694c0..b77ded06774249 100644
--- a/src/Select/Select.d.ts
+++ b/src/Select/Select.d.ts
@@ -4,7 +4,8 @@ import { InputProps } from '../Input';
 import { MenuProps } from '../Menu';
 import { SelectInputProps } from './SelectInput';
 
-export interface SelectProps extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'> {
+export interface SelectProps
+  extends StandardProps<InputProps, SelectClassKey, 'value' | 'onChange'> {
   autoWidth?: boolean;
   displayEmpty?: boolean;
   input?: React.ReactNode;
diff --git a/src/styles/createPalette.js b/src/styles/createPalette.js
index aa74eb25be6040..f7c1ab1598def6 100644
--- a/src/styles/createPalette.js
+++ b/src/styles/createPalette.js
@@ -33,6 +33,7 @@ export const light = {
     active: 'rgba(0, 0, 0, 0.54)',
     // The color of an hovered action.
     hover: 'rgba(0, 0, 0, 0.08)',
+    hoverOpacity: 0.08,
     // The color of a selected action.
     selected: 'rgba(0, 0, 0, 0.14)',
     // The color of a disabled action.
@@ -58,6 +59,7 @@ export const dark = {
   action: {
     active: common.white,
     hover: 'rgba(255, 255, 255, 0.1)',
+    hoverOpacity: 0.1,
     selected: 'rgba(255, 255, 255, 0.2)',
     disabled: 'rgba(255, 255, 255, 0.3)',
     disabledBackground: 'rgba(255, 255, 255, 0.12)',
diff --git a/test/typescript/styles.spec.tsx b/test/typescript/styles.spec.tsx
index 1c2f4a6c8217ae..8cd28be647fb8c 100644
--- a/test/typescript/styles.spec.tsx
+++ b/test/typescript/styles.spec.tsx
@@ -174,4 +174,4 @@ withStyles<'listItem'>(theme => ({
       visibility: 'inherit',
     },
   },
-}))
\ No newline at end of file
+}));