From 30ab23718b1a993dfe0e7ba322007d05371beb9c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 23 Jul 2018 10:28:35 +0200
Subject: [PATCH] [Slider]: Increase color specification conformance

The spec only displays two different colors for
different states (disabled and not-disabled). Track before and after
thumb only varies in opacity.
---
 packages/material-ui-lab/src/Slider/Slider.js | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
index 5edd623ef48c41..90dcc1a1694150 100644
--- a/packages/material-ui-lab/src/Slider/Slider.js
+++ b/packages/material-ui-lab/src/Slider/Slider.js
@@ -23,8 +23,6 @@ export const styles = theme => {
 
   const colors = {
     primary: theme.palette.primary.main,
-    secondary: theme.palette.grey[400],
-    focused: theme.palette.grey[500],
     disabled: theme.palette.grey[400],
   };
 
@@ -63,12 +61,12 @@ export const styles = theme => {
       transform: 'translate(0, -50%)',
       top: '50%',
       height: 2,
+      backgroundColor: colors.primary,
       '&$focused, &$activated': {
         transition: 'none',
-        backgroundColor: colors.focused,
       },
       '&$disabled': {
-        backgroundColor: colors.secondary,
+        backgroundColor: colors.disabled,
       },
       '&$vertical': {
         transform: 'translate(-50%, 0)',
@@ -76,24 +74,17 @@ export const styles = theme => {
         top: 'initial',
         width: 2,
       },
-      '&$jumped': {
-        backgroundColor: colors.focused,
-      },
     },
     /* Styles applied to the track element before the thumb. */
     trackBefore: {
       zIndex: 1,
       left: 0,
-      backgroundColor: colors.primary,
       transition: commonTransitions,
-      '&$focused, &$activated, &$jumped': {
-        backgroundColor: colors.primary,
-      },
     },
     /* Styles applied to the track element after the thumb. */
     trackAfter: {
       right: 0,
-      backgroundColor: colors.secondary,
+      opacity: 0.24,
       transition: commonTransitions,
       '&$vertical': {
         bottom: 0,
@@ -128,12 +119,12 @@ export const styles = theme => {
         backgroundColor: 'transparent',
       },
       '&$focused$zero': {
-        border: `2px solid ${colors.focused}`,
-        backgroundColor: fade(colors.focused, 0.34),
-        boxShadow: `0px 0px 0px 9px ${fade(colors.focused, 0.34)}`,
+        border: `2px solid ${colors.primary}`,
+        backgroundColor: fade(colors.primary, 0.34),
+        boxShadow: `0px 0px 0px 9px ${fade(colors.primary, 0.34)}`,
       },
       '&$activated$zero': {
-        border: `2px solid ${colors.focused}`,
+        border: `2px solid ${colors.primary}`,
       },
       '&$jumped': {
         width: 17,