From 2e665e68926c5ecafb8844b3d2e007a682409a09 Mon Sep 17 00:00:00 2001 From: Aravind Balla Date: Fri, 29 Dec 2017 19:20:54 +0530 Subject: [PATCH 1/3] Add bgLighten to Base --- README.md | 1 + docs/props.md | 1 + src/utils/base.js | 4 ++++ 3 files changed, 6 insertions(+) diff --git a/README.md b/README.md index 24e553246..7d02301aa 100644 --- a/README.md +++ b/README.md @@ -774,6 +774,7 @@ Every component above that has `(Base)` after it has been extended from a common | bgPosition | PropTypes.string | Set `backgroundPosition` value| | bgRepeat | PropTypes.string | Set `backgroundRepeat` value| | bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image| +| bgLighten | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to lighten the bgImage image| | overflow | PropTypes.string | Set `overflow` value| | height | PropTypes.string | Set `height` value| diff --git a/docs/props.md b/docs/props.md index 5fefe52ef..61bfce423 100644 --- a/docs/props.md +++ b/docs/props.md @@ -17,3 +17,4 @@ Every component in the Tag API that has `(Base)` after it has been extended from | bgColor | PropTypes.string | Set `backgroundColor` value| | bgImage | PropTypes.string | Set `backgroundImage` value| | bgDarken | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to darken the bgImage image| +| bgLighten | PropTypes.number | Float value from 0.0 to 1.0 specifying how much to lighten the bgImage image| diff --git a/src/utils/base.js b/src/utils/base.js index 2137b696c..abc087e90 100644 --- a/src/utils/base.js +++ b/src/utils/base.js @@ -69,6 +69,7 @@ export const getStyles = function getStyles() { bgColor, bgImage, bgDarken, + bgLighten, bgSize, bgPosition, bgRepeat, @@ -138,6 +139,9 @@ export const getStyles = function getStyles() { if (bgDarken) { styles.backgroundImage = `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`; + } else if (bgLighten) { + styles.backgroundImage = + `linear-gradient( rgba(255, 255, 255, ${bgLighten}), rgba(255, 255, 255, ${bgLighten}) ), url(${bgImage})`; } else { styles.backgroundImage = `url(${bgImage})`; } From 8c16cd0856f472fa32a67491ef03ffd5fdee8fe6 Mon Sep 17 00:00:00 2001 From: Aravind Balla Date: Tue, 9 Jan 2018 12:09:46 +0530 Subject: [PATCH 2/3] [WIP] Add bgColourOverlay and bgColourIntensity to base.js --- src/utils/base.js | 22 +++++++++++++++------- 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/src/utils/base.js b/src/utils/base.js index abc087e90..ae80ed2b0 100644 --- a/src/utils/base.js +++ b/src/utils/base.js @@ -51,6 +51,15 @@ const convertFontSizeToPx = function (fontSize) { return convertedFontSize; }; +const hexToRGB = function (hex) { + hex = (hex.charAt(0) === '#') ? hex.substring(1, 7) : hex; + const RGB = []; + RGB.push(parseInt(hex.substring(0, 2), 16)); // R + RGB.push(parseInt(hex.substring(2, 4), 16)); // G + RGB.push(parseInt(hex.substring(4, 6), 16)); // B + return RGB; +}; + export const getStyles = function getStyles() { if (process.env.NODE_ENV !== 'production' && typeof this.warnedAboutFontSize === 'undefined') { this.warnedAboutFontSize = false; @@ -68,8 +77,8 @@ export const getStyles = function getStyles() { textAlign, bgColor, bgImage, - bgDarken, - bgLighten, + bgOverlayColour, + bgOverlayIntensity, bgSize, bgPosition, bgRepeat, @@ -136,12 +145,11 @@ export const getStyles = function getStyles() { styles.backgroundColor = color; } if (bgImage) { - if (bgDarken) { - styles.backgroundImage = - `linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`; - } else if (bgLighten) { + if (bgOverlayColour) { + const rgbOverlay = hexToRGB(bgOverlayColour); + const bi = bgOverlayIntensity || 0.5; //default intensity - 0.5 styles.backgroundImage = - `linear-gradient( rgba(255, 255, 255, ${bgLighten}), rgba(255, 255, 255, ${bgLighten}) ), url(${bgImage})`; + `linear-gradient( rgba(${rgbOverlay.join(',')}, ${bi}), rgba(${rgbOverlay.join(',')}, ${bi}) ), url(${bgImage})`; } else { styles.backgroundImage = `url(${bgImage})`; } From 6b82aceabe6c259057f1baa5942930e34119aa67 Mon Sep 17 00:00:00 2001 From: Aravind Balla Date: Wed, 10 Jan 2018 14:04:48 +0530 Subject: [PATCH 3/3] Add poslished and change prop to bgTransparentize --- example/src/index.js | 2 +- package.json | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/example/src/index.js b/example/src/index.js index e8d90735d..4a72c019f 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -101,7 +101,7 @@ export default class Presentation extends React.Component { theme="dark" /> - + Full Width diff --git a/package.json b/package.json index aba6abe51..9a1ee94bc 100644 --- a/package.json +++ b/package.json @@ -29,6 +29,7 @@ "lodash": "^4.17.4", "marksy": "^5.0.0", "normalize.css": "^7.0.0", + "polished": "^1.9.0", "prismjs": "^1.6.0", "react-emotion": "^8.0.8", "react-live": "^1.8.0-2",