Adds and uses new rgba generation method for generating rgba colors f…

…rom hex variables
elastic · Aug 22, 2018 · b9efa46 · b9efa46
1 parent c38e948
commit b9efa46
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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 =