theme aphrodite styles rather than default vars

curology · Aug 21, 2016 · 76bafbb · 76bafbb
1 parent 1c9594c
commit 76bafbb
Show file tree

Hide file tree

Showing 14 changed files with 163 additions and 120 deletions.
diff --git a/examples/src/app.js b/examples/src/app.js
@@ -47,6 +47,61 @@ const THUMBNAIL_IMAGES = [
 	// https://unsplash.com/photos/NUMlxTPsznM coyote?
 ];
 
+const theme = {
+	// container
+	container: { background: 'rgba(255, 255, 255, 0.9)' },
+
+	// arrows
+	arrow: {
+		backgroundColor: 'rgba(255, 255, 255, 0.8)',
+		fill: '#222',
+		opacity: 0.6,
+		transition: 'opacity 200ms',
+
+		':hover': {
+			opacity: 1,
+		},
+	},
+	arrow__size__medium: {
+		borderRadius: 40,
+		height: 40,
+		marginTop: -20,
+
+		'@media (min-width: 768px)': {
+			height: 70,
+			padding: 15,
+		},
+	},
+	arrow__direction__left: { marginLeft: 10 },
+	arrow__direction__right: { marginRight: 10 },
+
+	// header
+	close: {
+		fill: '#D40000',
+		opacity: 0.6,
+		transition: 'all 200ms',
+
+		':hover': {
+			opacity: 1,
+		},
+	},
+
+	// footer
+	footer: {
+		color: 'black',
+	},
+	footerCount: {
+		color: 'rgba(0, 0, 0, 0.6)',
+	},
+
+	// thumbnails
+	thumbnail: {
+	},
+	thumbnail__active: {
+		boxShadow: '0 0 0 2px #00D8FF',
+	},
+};
+
 render(
 	<div>
 		<div style={{ marginBottom: 40 }}>
@@ -95,17 +150,7 @@ render(
 			caption,
 			orientation,
 			useForDemo,
-		}))} theme={{
-			arrow: { color: '#999' },
-			close: { color: '#666' },
-			container: { background: 'rgba(255, 255, 255, 0.9)' },
-			footer: {
-				color: 'black',
-				count: {
-					color: 'rgba(0, 0, 0, 0.6)',
-				},
-			},
-		}} />
+		}))} theme={theme} showThumbnails />
 	</div>,
 	document.getElementById('example')
 );
diff --git a/src/Lightbox.js b/src/Lightbox.js
@@ -9,12 +9,8 @@ import Footer from './components/Footer';
 import Header from './components/Header';
 import PaginatedThumbnails from './components/PaginatedThumbnails';
 import Portal from './components/Portal';
-// import Thumbnails from './components/Thumbnails';
 
-import { bindFunctions, bodyScroll, canUseDom, deepMerge } from './utils';
-import styles from './styles/default';
-
-const classes = StyleSheet.create(styles);
+import { bindFunctions, bodyScroll, canUseDom } from './utils';
 
 class Lightbox extends Component {
 	constructor () {
@@ -27,11 +23,8 @@ class Lightbox extends Component {
 		]);
 	}
 	getChildContext () {
-		const extended = deepMerge(theme, this.props.theme);
-		// console.log('Lightbox extended theme', extended);
-
 		return {
-			theme: extended,
+			theme: this.props.theme,
 		};
 	}
 	componentWillReceiveProps (nextProps) {
@@ -187,9 +180,9 @@ class Lightbox extends Component {
 					/>
 					{this.renderImages()}
 				</div>
+				{this.renderThumbnails()}
 				{this.renderArrowPrev()}
 				{this.renderArrowNext()}
-				{this.renderThumbnails()}
 			</Container>
 		);
 	}
@@ -314,6 +307,23 @@ Lightbox.childContextTypes = {
 	theme: PropTypes.object.isRequired,
 };
 
-Lightbox.PaginatedThumbnails = PaginatedThumbnails;
+const classes = StyleSheet.create({
+	content: {
+		position: 'relative',
+	},
+	figure: {
+		margin: 0, // remove browser default
+	},
+	image: {
+		display: 'block', // removes browser default gutter
+		height: 'auto',
+		margin: '0 auto', // maintain center on very short screens OR very narrow image
+		maxWidth: '100%',
+
+		// disable user select
+		WebkitTouchCallout: 'none',
+		userSelect: 'none',
+	},
+});
 
 export default Lightbox;
diff --git a/src/components/Arrow.js b/src/components/Arrow.js
@@ -1,7 +1,8 @@
 import React, { PropTypes } from 'react';
 import { css, StyleSheet } from 'aphrodite/no-important';
 
-import theme from '../theme';
+import defaults from '../theme';
+import { deepMerge } from '../utils';
 import Icon from './Icon';
 
 function Arrow ({
@@ -14,15 +15,17 @@ function Arrow ({
 {
 	theme,
 }) {
+	const classes = StyleSheet.create(deepMerge(defaultStyles, theme));
+
 	return (
 		<button
 			type="button"
-			className={css(classes.arrow, classes[direction], size && classes[size])}
+			className={css(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size])}
 			onClick={onClick}
 			onTouchEnd={onClick}
 			{...props}
 		>
-			<Icon color={theme.arrow.color} type={icon} />
+			<Icon fill={!!theme.arrow && theme.arrow.fill || defaults.arrow.fill} type={icon} />
 		</button>
 	);
 };
@@ -40,7 +43,7 @@ Arrow.contextTypes = {
 	theme: PropTypes.object.isRequired,
 };
 
-const classes = StyleSheet.create({
+const defaultStyles = {
 	arrow: {
 		background: 'none',
 		border: 'none',
@@ -57,18 +60,18 @@ const classes = StyleSheet.create({
 	},
 
 	// sizees
-	medium: {
-		height: theme.arrow.height,
-		marginTop: theme.arrow.height / -2,
+	arrow__size__medium: {
+		height: defaults.arrow.height,
+		marginTop: defaults.arrow.height / -2,
 		width: 40,
 
 		'@media (min-width: 768px)': {
 			width: 70,
 		},
 	},
-	small: {
-		height: theme.thumbnail.size,
-		marginTop: theme.thumbnail.size / -2,
+	arrow__size__small: {
+		height: defaults.thumbnail.size,
+		marginTop: defaults.thumbnail.size / -2,
 		width: 30,
 
 		'@media (min-width: 500px)': {
@@ -77,12 +80,12 @@ const classes = StyleSheet.create({
 	},
 
 	// direction
-	right: {
-		right: theme.container.gutter.horizontal,
+	arrow__direction__right: {
+		right: defaults.container.gutter.horizontal,
 	},
-	left: {
-		left: theme.container.gutter.horizontal,
+	arrow__direction__left: {
+		left: defaults.container.gutter.horizontal,
 	},
-});
+};
 
 module.exports = Arrow;
diff --git a/src/components/Container.js b/src/components/Container.js
@@ -1,18 +1,11 @@
 import React, { PropTypes } from 'react';
 import { css, StyleSheet } from 'aphrodite/no-important';
 
-// import theme from './theme';
+import defaults from '../theme';
+import { deepMerge } from '../utils';
 
-function Container ({ style, ...props }, { theme }) {
-	props.style = {
-		backgroundColor: theme.container.background,
-		paddingBottom: theme.container.gutter.vertical,
-		paddingLeft: theme.container.gutter.horizontal,
-		paddingRight: theme.container.gutter.horizontal,
-		paddingTop: theme.container.gutter.vertical,
-		zIndex: theme.container.zIndex,
-		...style,
-	};
+function Container ({ ...props }, { theme }) {
+	const classes = StyleSheet.create(deepMerge(defaultStyles, theme));
 
 	return (
 		<div
@@ -26,18 +19,24 @@ Container.contextTypes = {
 	theme: PropTypes.object.isRequired,
 };
 
-const classes = StyleSheet.create({
+const defaultStyles = {
 	container: {
 		alignItems: 'center',
+		backgroundColor: defaults.container.background,
 		boxSizing: 'border-box',
 		display: 'flex',
 		height: '100%',
 		justifyContent: 'center',
 		left: 0,
+		paddingBottom: defaults.container.gutter.vertical,
+		paddingLeft: defaults.container.gutter.horizontal,
+		paddingRight: defaults.container.gutter.horizontal,
+		paddingTop: defaults.container.gutter.vertical,
 		position: 'fixed',
 		top: 0,
 		width: '100%',
+		zIndex: defaults.container.zIndex,
 	},
-});
+};
 
 module.exports = Container;
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,6 +1,7 @@
 import React, { PropTypes } from 'react';
 import { css, StyleSheet } from 'aphrodite/no-important';
-import theme from '../theme';
+import defaults from '../theme';
+import { deepMerge } from '../utils';
 
 function Footer ({
 	caption,
@@ -14,21 +15,18 @@ function Footer ({
 }) {
 	if (!caption && !showCount) return null;
 
+	const classes = StyleSheet.create(deepMerge(defaultStyles, theme));
+
 	const imageCount = showCount ? (
-		<div className={css(classes.footerCount)} style={{
-			color: theme.footer.count.color,
-			fontSize: theme.footer.count.fontSize,
-		}}>
+		<div className={css(classes.footerCount)}>
 			{countCurrent}
 			{countSeparator}
 			{countTotal}
 		</div>)
 		: <span />;
 
 	return (
-		<div className={css(classes.footer)} {...props} style={{
-			color: theme.footer.color,
-		}}>
+		<div className={css(classes.footer)} {...props}>
 			{caption ? (
 				<figcaption className={css(classes.footerCaption)}>
 					{caption}
@@ -50,27 +48,28 @@ Footer.contextTypes = {
 	theme: PropTypes.object.isRequired,
 };
 
-const classes = StyleSheet.create({
+const defaultStyles = {
 	footer: {
 		boxSizing: 'border-box',
-		color: 'white',
+		color: defaults.footer.color,
 		cursor: 'auto',
 		display: 'flex',
-		height: theme.footer.height,
 		justifyContent: 'space-between',
 		left: 0,
 		lineHeight: 1.3,
-		paddingBottom: theme.footer.gutter.vertical,
-		paddingLeft: theme.footer.gutter.horizontal,
-		paddingRight: theme.footer.gutter.horizontal,
-		paddingTop: theme.footer.gutter.vertical,
+		paddingBottom: defaults.footer.gutter.vertical,
+		paddingLeft: defaults.footer.gutter.horizontal,
+		paddingRight: defaults.footer.gutter.horizontal,
+		paddingTop: defaults.footer.gutter.vertical,
 	},
 	footerCount: {
+		color: defaults.footer.count.color,
+		fontSize: defaults.footer.count.fontSize,
 		paddingLeft: '1em', // add a small gutter for the caption
 	},
 	footerCaption: {
 		flex: '1 1 0',
 	},
-});
+};
 
 module.exports = Footer;