feat(Slider): implements shadow and background with opacity (using he…

…xToRgba)

components/Slider/Slider.jsx

@@ -3,8 +3,8 @@ import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import RcSlider from 'rc-slider';
 import 'rc-slider/assets/index.css';
-import Colors from '../Colors';
 import { colors, spacing, baseFontSize } from '../shared/theme';
+import { shadow, hexToRgba } from '../shared';
 import Tooltip from '../Tooltip';
 import valueValidator from './valueValidator';
 
@@ -65,13 +65,25 @@ const customStyle = css`
   }
 
   .rc-slider-track {
-    background-color: ${Colors.BLUE[50]}; //usar o hex
+    ${({
+      theme: {
+        colors: {
+          primary: { 700: primary900 },
+        },
+      },
+    }) => `background-color: ${hexToRgba(primary900, 0.5)};`}
   }
 
   .rc-slider-handle:active,
   .rc-slider-handle:focus {
     border: none;
-    box-shadow: 0 2px 6px 0 ${Colors.BLUE[50]};
+    ${({
+      theme: {
+        colors: {
+          primary: { 900: primary900 },
+        },
+      },
+    }) => shadow(6, primary900)}
   }
 
   &.rc-slider-disabled {

components/Slider/__snapshots__/Slider.unit.test.jsx.snap

@@ -58,13 +58,13 @@ exports[`<Slider /> Snapshots should match the snapshot when <Slider /> is disab
 }
 
 .c4 .rc-slider-track {
-  background-color: rgba(19,85,208,0.5);
+  background-color: rgba(14,68,196,0.5);
 }
 
 .c4 .rc-slider-handle:active,
 .c4 .rc-slider-handle:focus {
   border: none;
-  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  box-shadow: 0px 3px 5px -1px rgba(6,42,179,0.2),0px 6px 10px 0px rgba(6,42,179,0.14),0px 1px 18px 0px rgba(6,42,179,0.12);
 }
 
 .c4.rc-slider-disabled {
@@ -278,13 +278,13 @@ exports[`<Slider /> Snapshots should match the snapshot when have just one handl
 }
 
 .c4 .rc-slider-track {
-  background-color: rgba(19,85,208,0.5);
+  background-color: rgba(14,68,196,0.5);
 }
 
 .c4 .rc-slider-handle:active,
 .c4 .rc-slider-handle:focus {
   border: none;
-  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  box-shadow: 0px 3px 5px -1px rgba(6,42,179,0.2),0px 6px 10px 0px rgba(6,42,179,0.14),0px 1px 18px 0px rgba(6,42,179,0.12);
 }
 
 .c4.rc-slider-disabled {
@@ -498,13 +498,13 @@ exports[`<Slider /> Snapshots should match the snapshot when have two handles 1`
 }
 
 .c4 .rc-slider-track {
-  background-color: rgba(19,85,208,0.5);
+  background-color: rgba(14,68,196,0.5);
 }
 
 .c4 .rc-slider-handle:active,
 .c4 .rc-slider-handle:focus {
   border: none;
-  box-shadow: 0 2px 6px 0 rgba(19,85,208,0.5);
+  box-shadow: 0px 3px 5px -1px rgba(6,42,179,0.2),0px 6px 10px 0px rgba(6,42,179,0.14),0px 1px 18px 0px rgba(6,42,179,0.12);
 }
 
 .c4.rc-slider-disabled {