Skip to content

Add bgLighten to Base #446

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

Add bgLighten to Base #446

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2e665e6
Add bgLighten to Base
aravindballa Dec 29, 2017
8c16cd0
[WIP] Add bgColourOverlay and bgColourIntensity to base.js
aravindballa Jan 9, 2018
6b82ace
Add poslished and change prop to bgTransparentize
aravindballa Jan 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|

Expand Down
1 change: 1 addition & 0 deletions docs/props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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|
2 changes: 1 addition & 1 deletion example/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export default class Presentation extends React.Component {
theme="dark"
/>
</Slide>
<Slide transition={['slide']} bgImage={images.city.replace('/', '')} bgDarken={0.75}>
<Slide transition={['slide']} bgImage={images.city.replace('/', '')} bgOverlayColour={'#FFA500'} bgTransparentize="0.8">
<Appear fid="1">
<Heading size={1} caps fit textColor="primary">
Full Width
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 15 additions & 3 deletions src/utils/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,15 @@ const convertFontSizeToPx = function (fontSize) {
return convertedFontSize;
};

const hexToRGB = function (hex) {
Copy link
Contributor

@kitten kitten Jan 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of maintaining this piece of code ourselves it should probably use a helper. Polished has some excellent ones and we won't need to pull in the entire library ✨

https://polished.js.org/docs/#transparentize

or

https://polished.js.org/docs/#parsetorgb

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;
Expand All @@ -68,7 +77,8 @@ export const getStyles = function getStyles() {
textAlign,
bgColor,
bgImage,
bgDarken,
bgOverlayColour,
bgOverlayIntensity,
Copy link
Contributor

@kitten kitten Jan 9, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't call this prop "intensity" as that would refer to the saturation of the colour: https://www.uwgb.edu/heuerc/2D/ColorTerms.html

Instead I would just call this "opacity" or "opacify" or "transparentize" depending on what it'll do.

Copy link
Author

@aravindballa aravindballa Jan 10, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Its bgTransparentize now ✨

bgSize,
bgPosition,
bgRepeat,
Expand Down Expand Up @@ -135,9 +145,11 @@ export const getStyles = function getStyles() {
styles.backgroundColor = color;
}
if (bgImage) {
if (bgDarken) {
if (bgOverlayColour) {
const rgbOverlay = hexToRGB(bgOverlayColour);
const bi = bgOverlayIntensity || 0.5; //default intensity - 0.5
styles.backgroundImage =
`linear-gradient( rgba(0, 0, 0, ${bgDarken}), rgba(0, 0, 0, ${bgDarken}) ), url(${bgImage})`;
`linear-gradient( rgba(${rgbOverlay.join(',')}, ${bi}), rgba(${rgbOverlay.join(',')}, ${bi}) ), url(${bgImage})`;
} else {
styles.backgroundImage = `url(${bgImage})`;
}
Expand Down