From b9efa46df14ac2b47ea124045b59c27e9dbfc33d Mon Sep 17 00:00:00 2001
From: Jason Rhodes <jason.matthew.rhodes@gmail.com>
Date: Wed, 22 Aug 2018 08:21:32 -0400
Subject: [PATCH] Adds and uses new rgba generation method for generating rgba
 colors from hex variables

---
 .../shared/KueryBar/Typeahead/Suggestions.js          |  4 ++--
 x-pack/plugins/apm/public/components/shared/Modal.js  | 11 ++++++-----
 .../apm/public/store/selectors/chartSelectors.js      |  7 ++++---
 x-pack/plugins/apm/public/style/variables.js          |  7 +++++++
 4 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
index 8df5168471336e..f00049d33a9bb4 100644
--- a/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
+++ b/x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/Suggestions.js
@@ -9,13 +9,13 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { isEmpty } from 'lodash';
 import Suggestion from './Suggestion';
-import { units, colors, px, unit } from '../../../../style/variables';
+import { units, colors, px, unit, rgba } from '../../../../style/variables';
 
 const List = styled.ul`
   width: 100%;
   border: 1px solid ${colors.gray4};
   border-radius: ${px(units.quarter)};
-  box-shadow: 0px ${px(units.quarter)} ${px(units.double)} rgba(0, 0, 0, 0.1);
+  box-shadow: 0px ${px(units.quarter)} ${px(units.double)} ${rgba(colors.black, 0.1)};
   position: absolute;
   background: #fff;
   z-index: 10;
diff --git a/x-pack/plugins/apm/public/components/shared/Modal.js b/x-pack/plugins/apm/public/components/shared/Modal.js
index f588b015e856a5..9bfd37657d08af 100644
--- a/x-pack/plugins/apm/public/components/shared/Modal.js
+++ b/x-pack/plugins/apm/public/components/shared/Modal.js
@@ -9,7 +9,7 @@ import Portal from 'react-portal';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Close } from './Icons';
-import { fontSizes, units } from '../../style/variables';
+import { fontSizes, units, colors, rgba } from '../../style/variables';
 
 const Header = styled.div`
   display: flex;
@@ -36,9 +36,10 @@ const ModalFixed = styled.div`
 
 const ModalOverlay = styled(ModalFixed)`
   z-index: 10;
-  background: rgba(45, 45, 45, 0.8);
+  background: ${rgba(colors.gray2, 0.8)};
   height: 100%;
 `;
+// background: rgba(45, 45, 45, 0.8);
 
 const ModalOuterContainer = styled(ModalFixed)`
   z-index: 20;
@@ -118,9 +119,9 @@ Modal.propTypes = {
 };
 
 Modal.defaultProps = {
-  onOpen: () => {},
-  onClose: () => {},
-  close: () => {}
+  onOpen: () => { },
+  onClose: () => { },
+  close: () => { }
 };
 
 export default Modal;
diff --git a/x-pack/plugins/apm/public/store/selectors/chartSelectors.js b/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
index ef5d918476a0f0..7e2d01e04aef34 100644
--- a/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
+++ b/x-pack/plugins/apm/public/store/selectors/chartSelectors.js
@@ -6,12 +6,13 @@
 
 import d3 from 'd3';
 import { last, zipObject, difference, memoize, get, isEmpty } from 'lodash';
-import { colors } from '../../style/variables';
+import { colors, rgba } from '../../style/variables';
 import {
   asMillisWithDefault,
   asDecimal,
   tpmUnit
 } from '../../utils/formatters';
+import { rgba } from 'polished';
 
 export const getEmptySerie = memoize(
   (start = Date.now() - 3600000, end = Date.now()) => {
@@ -91,7 +92,7 @@ export function getResponseTimeSeries(chartsData) {
       ),
       type: 'area',
       color: 'none',
-      areaColor: 'rgba(49, 133, 252, 0.1)' // apmBlue
+      areaColor: rgba(colors.apmBlue, 0.1) //'rgba(49, 133, 252, 0.1)' // apmBlue
     });
 
     series.splice(1, 0, {
@@ -105,7 +106,7 @@ export function getResponseTimeSeries(chartsData) {
       ),
       type: 'areaMaxHeight',
       color: 'none',
-      areaColor: 'rgba(146, 0, 0, 0.1)' // apmRed
+      areaColor: rgba(colors.apmRed, 0.1) //'rgba(146, 0, 0, 0.1)' // apmRed
     });
   }
 
diff --git a/x-pack/plugins/apm/public/style/variables.js b/x-pack/plugins/apm/public/style/variables.js
index e4fc7d765ab3b3..be6d792b0113b5 100644
--- a/x-pack/plugins/apm/public/style/variables.js
+++ b/x-pack/plugins/apm/public/style/variables.js
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { parseToRgb } from 'polished';
+
 // Units
 export const unit = 16;
 
@@ -66,6 +68,11 @@ export const colors = {
   linkHover: colorBlue1
 };
 
+export function rgba(hex, alpha = 1) {
+  const rgb = parseToRgb(hex);
+  return `rgba(${rgb.red}, ${rgb.green}, ${rgb.blue}, ${alpha})`;
+}
+
 // Fonts
 export const fontFamily = '"Open Sans", Helvetica, Arial, sans-serif';
 export const fontFamilyCode =